CSS大小调整问题(基本)
CSS大小调整问题(基本)
提问于 2013-07-15 03:30:46
我一直在尝试做一个像this这样的网站。虽然根据我的理解，网站是用Jquery编写的，而我只想用HTML和CSS工作，所以我使用了一些webkit动画。然而，它们在顶部和照片之间有一个很小的空间。我不知道如何修复它。如果有人能帮我，我将不胜感激。
以下是网站：http://www.wandernetwork.com/
这里有一个小把戏：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>感谢您的阅读，如有任何帮助，将不胜感激
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-07-15 03:39:32
将这个添加到你的CSS中：
.slide-up-boxes a {
line-height: 0;
}问题是，即使没有文本节点，a元素也会从line-height属性获取高度，因为您正在处理图像，所以您不希望向其添加任何高度
Stack Overflow用户
发布于 2013-07-15 03:41:50
您可以将您的保证金更改为
.slide-up-boxes a:hover h5 {
margin-top:-300px;
}至
.slide-up-boxes a:hover h5 {
margin-top:-305px;
}或者找出额外的利润是从哪里来的;)
Stack Overflow用户
发布于 2013-07-15 03:58:28
您也可以通过添加以下代码来消除此问题：
div#page-wrap section.slide-up-boxes a div {
position: relative;
bottom: 5px;
}但可以肯定的是，将标签的行高设为0会更好;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17642921
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号