0
我一直在試圖製作一個網站，如this。雖然從我的理解，該網站是在Jquery，我只想在HTML和CSS工作，所以我使用了一些WebKit動畫。但是，它們在頂部和照片之間有一個很小的空間。我不知道如何解決它。如果有人能幫助我，我會非常感激。CSS大小問題（基本）
這裏的網站：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>
感謝您的閱讀，任何幫助，將不勝感激
很抱歉，但我不明白，是什麼是重點？ –
請解釋你想要做什麼，你想達到的最終結果是什麼？ – Mangiucugna
對不起，它可能不是很明顯，但我希望箱子沒有頂部邊框和圖片之間的空間。 – user2426889