0

我一直在努力做一个这样的网站。虽然据我了解，网站是在 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>

感谢您阅读，任何帮助将不胜感激

4

3 回答 3

1

You could change your change of margin from

.slide-up-boxes a:hover h5 {
    margin-top:-300px;
}

to

.slide-up-boxes a:hover h5 {
    margin-top:-305px;
}

Or find where that extra margin is coming from ;)

于 2013-07-14T19:41:50.407 回答
1

将此添加到您的 CSS 中：

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

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

于 2013-07-14T19:39:31.847 回答
1

您也可以通过添加以下代码来消除此问题：

div#page-wrap section.slide-up-boxes a div {
    position: relative;
    bottom: 5px;
}

但可以肯定的是，将标签的行高设为 0 会更好；）

于 2013-07-14T19:58:28.353 回答