个人中心
gpt4 book ai didi

html - CSS Sizing 问题(基本)

转载 作者：太空宇宙 更新时间：2023-11-03 21:50:30 25 4
gpt4 key购买 nike

我一直在尝试制作一个类似 this 的网站.虽然根据我的理解，该网站是在 Jquery 中，我只想在 HTML 和 CSS 中工作，所以我使用了一些 webkit 动画。然而，它们在顶部和向上滑动的照片之间有一个小空间。我不知道如何解决它。如果有人可以帮助我，我将不胜感激。

这是网站:http://www.wandernetwork.com/

这是一个 fiddle :http://jsfiddle.net/8QhKW/

这是原始代码:

 <! DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8'>
<title> Wandercraft Network </title>

<style media="screen" type="text/css">

#page-wrap{
    width:620px;
    margin:0px auto;
}
.slide-up-boxes a {
    display:block;
    width:300px;
    height:300px;
    background: #eee;
    overflow:hidden;
}
.slide-up-boxes h5 {
    height:300px;
    width:300px;
    text-align:center;
    line-height:150px;
    -webkit-transition: margin-top 0.3s linear;
    background-color:#white;
}
.slide-up-boxes a:hover h5 {
    margin-top:-300px;
}
.slide-up-boxes div {
    text-align:center;
    height:300px;
    width:300px;
    opacity:0;
    background-color:orange;
    -webkit-transform: rotate(6deg);
    -webkit-transition: all 0.2s linear;
}
.slide-up-boxes a:hover div {
    -webkit-transform: rotate(0);
    opacity:1;
}

.slide-up-boxes {
 margin:5px;
 width:300px;
 float:left;
}

.banner{
margin:0px auto;
display:block;
padding:15px;
width:1000px;
height:300px;
}

/* =====================================================================*/
/*  MAKES THE ENJIN TRAY RUN VERTICALLY RATHER THAN HORIZONTALLY
/* =====================================================================*/

/* Limit the width of the tray to 30px to make it stack vertically*/

#enjin-tray {
    max-width: 30px;
    margin: 0;

/*adjust to your desired distance from the bottom of the window*/   

    bottom: 175px;

}

/*Make all of the corners rounded*/
#enjin-tray li#notificationpanel { border-radius: 3px;}

/* make the border cover all edges */
#enjin-tray ul li.tray-item {border-style: solid; border-width: 1px;}

/* Edit the alignment of the background images */
#notificationpanel .notification-icon.apps {background-position: -84px 3px;}
#notificationpanel .notification-icon.general {background-position: -54px 3px;}
#notificationpanel .notification-icon.messages {background-position: -25px 3px;}

/*Hide the Home button - it's redundant and it's wider than the others, so it looks funny stacked vertically */
#notificationpanel .notification-icon.dashboard {display: none;}

/*Subpanel Tweaks - for the pop-up panel  -- bottom: 0 will line the panel up with the bottom of the tray*/
#enjin-tray li#notificationpanel .subpanel {width: 380px; bottom: 0;}

/*fixe the horizontal alignment for the different panels*/
#enjin-tray #notificationpanel .subpanel.general {right: 40px;}
#enjin-tray #notificationpanel .subpanel.messages {right: 40px;}
#enjin-tray .subpanel {right: 40px;}

/*Hide the fake icons that appear when the subpanel opens */
#enjin-tray #notificationpanel .subpanel.apps .faux-icon {display: none;}
#enjin-tray #notificationpanel .subpanel.general .faux-icon {display: none;}
#enjin-tray #notificationpanel .subpanel.messages .faux-icon {display: none;}


/*Move notification tip - the "right: 35px" pulls the tips to the left of the tray. The "bottom: 231px" will have to be adjusted 
according to how high up the side of the browser window you placed your tray in the #enjin-tray section */

#messages-notification-tip {bottom: 231px !important; right: 35px !important;}
#general-notification-tip {bottom: 205px !important; right: 35px !important;}
#apps-notification-tip {bottom: 180px !important; right: 35px !important;}

/*Hide the little chat tail on the notification pop-up */
   .triangle {display: none;}

/*move the one-on-one chat icon over to the right edge of the page, now that the tray is out of the way (if you're beta-testing the chat */
   #enjin-tray-messaging {display: none;}


</style>

</head>

<body>

<img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner">

    <div id="page-wrap">
        <section class="slide-up-boxes">
            <a href="www.reddit.com">
        <img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png">
        <div> 
        <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
         </div>
        </a>
        </section>

    <section class="slide-up-boxes">
        <a href="www.reddit.com">
        <img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png">
        <div> 
        <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
         </div>
        </a>
    </section>

        <section class="slide-up-boxes">
        <a href="www.reddit.com">
        <img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png">
        <div> 
        <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
         </div>
        </a>
        </section>
            <section class="slide-up-boxes">
            <a href="www.reddit.com">
            <img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png">
            <div> 
            <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
             </div>
            </a>
        </section>
                <div style="clear:both;"></div>
   </div>

</body>

</html>

感谢阅读，如有帮助将不胜感激

最佳答案

将此添加到您的 CSS:

.slide-up-boxes a {
    line-height: 0;
}

事情是 a 元素将占用 line-height 属性的高度，即使它们没有文本节点，因为您正在处理图像，所以您不想添加任意高度

关于html - CSS Sizing 问题(基本)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17642921/

25 4 0
文章推荐： html - height 100% 不包括y-溢出内容？
文章推荐： c# - 在单声道 (mac) 中编译 C# visual studio 控制台应用程序
文章推荐： c#关键字this
文章推荐： c# - 图像未显示在 ASP.NET 上
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com