<style type="text/css">*{margin:0;padding:0;}ul{list-style:none;}img{border:none;}a{text-decoration:none;}.header{position:relative;? ? ? ? z-index:2; ? ?box-shadow:0 0 7px 0 rgba(186,186,186,0.5);}.header-inner{width:1144px;? ? ? ? ? ? ? height:85px; ?margin:0 auto;}.inner-left{width:855px;}.logo{float:left; width:158px; height:48px; padding-top:18px;}.header-inner ul{margin-left:200px;}.header-inner li{float:left;}.header-inner li a{display:block;? ? ? ? ? ? ? ? ?height:80px; line-height:80px; font-family:arial; padding:0 24px; color:#414b4c; font-size:15px; border-top:3px solid #fff;}.header-inner li a:hover{color:#e97609; border-top:3px solid #eb5846; background-image:url(../images/index-a_03.jpg); background-repeat:repeat-x;}.header-inner li .x{display:block;? ? ? ? ? ? ? ? ?height:80px; line-height:80px; font-family:arial; padding:0 24px; font-size:15px; color:#e97609; border-top:3px solid #eb5846; background-image:url(../images/index-a_03.jpg); background-repeat:repeat-x;}.header-inner li .x:hover{color:#e97609;}.inner-right{float:right;}.inner-right a{width:22px;? ? ? ? ? ? ? ? ? height:22px; ?display:block; ?margin:20px 3px; ?float:left;}.inner-right .f{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? background-repeat:no-repeat; background-position:-242px -7px;}.inner-right .f:hover{ background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? background-repeat:no-repeat; background-position:-242px -45px;}.inner-right .niao{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? ? ?background-repeat:no-repeat; ? background-position:-268px -7px;}.inner-right .niao:hover{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? ? ?background-repeat:no-repeat; ? background-position:-268px -45px;}.inner-right .wife{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? ? ?background-repeat:no-repeat; ? background-position:-295px -7px;}.inner-right .wife:hover{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? ? ?background-repeat:no-repeat; ? background-position:-295px -45px;}.inner-right .v{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? background-repeat:no-repeat; background-position:-319px -7px;}.inner-right .v:hover{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? background-repeat:no-repeat; background-position:-319px -45px;}.inner-right .you{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? ? background-repeat:no-repeat; ?background-position:-344px -7px;}.inner-right .you:hover{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? ? background-repeat:no-repeat; ?background-position:-344px -45px;}.inner-right .in{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? ?background-repeat:no-repeat; background-position:-369px -7px;}.inner-right .in:hover{background-image:url(../images/s-icons.png);? ? ? ? ? ? ? ? ?background-repeat:no-repeat; background-position:-369px -45px;}.main{text-align:center;}.main h2{font-family:arial;? ? ? ? ?color:#010002; width:1142px; margin:0 auto; font-size:25px; line-height:92px; height:92px;}.main .nav{font-family:arial;? ? ? ? ? ?display:inline-block; ? line-height:65px; ? padding-left:17px; ? color:#222; ? font-size:16px;}.main .pic{width:1144px;? ? ? ? ? ?margin:0 auto;}.pic-a{width:286px;? ? ? ?height:184px; ? float:left; ? position:relative;}.pic-a img{width:100%;? ? ? ? ? ?height:100%; ??}.pic-a a{width:100%;? ? ? ? ?height:100%; background-color:rgba(0,0,0,0.5); position:absolute; top:0; left:0; color:#fff; display:block; display:none;}.pic-a:hover a{display:block;}.footer{height:320px;}.footer-top{height:270px;? ? ? ? ? ? background-color:#373737;}</style><body><body><div class="header">? ?<div class="header-inner">? ? ? <div class="inner-left">? ? ? ? ?<div class="logo"><a href="#"><img src="images/logo.png" /></a></div>? ? ? ? ?<ul>? ? ? ? ? ? <li><a href="#" class="x">Home</a></li>? ? ? ? ? ? <li><a href="#">About</a></li>? ? ? ? ? ? <li><a href="#">Portfolio</a></li>? ? ? ? ? ? <li><a href="#">Features</a></li>? ? ? ? ? ? <li><a href="#">Blog</a></li>? ? ? ? ? ? <li><a href="#">Contact</a></li>? ? ? ? ?</ul>? ? ? </div>? ? ? <div class="inner-right">? ? ? ? ?<a href="#" class="f"></a>? ? ? ? ?<a href="#" class="niao"></a>? ? ? ? ?<a href="#" class="wife"></a>? ? ? ? ?<a href="#" class="v"></a>? ? ? ? ?<a href="#" class="you"></a>? ? ? ? ?<a href="#" class="in"></a>? ? ? </div>? ?</div></div><div class="main">? ?<h2>Portfolio</h2>? ?<div class="nav">ALL</div>? ?<div class="nav">CATEGORY1</div>? ?<div class="nav">CATEGORY2</div>? ?<div class="nav">CATEGORY3</div>? ?<div class="nav">CATEGORY4</div> ?? <div class="pic">? ? ? <div class="pic-a">? ? ? ? ? ? <img src="images/s1.jpg" />? ? ? ? ? ? <a href="#">告訴你一個(gè)我的秘密</a>? ? ? </div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s2.jpg" />? ? ? ? ? ? <a href="#">點(diǎn)開(kāi)第三張我就告訴你</a>? ? ? ? ?</div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s3.jpg" />? ? ? ? ? ? <a href="#">現(xiàn)在我先告訴你這件事我一般不和人說(shuō)</a>? ? ? ? ?</div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s4.jpg" />? ? ? ? ? ? <a href="#">今天過(guò)節(jié)就告訴你</a>? ? ? ? ?</div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s5.jpg" />? ? ? ? ? ? <a href="#">我的秘密就是…………</a>? ? ? ? ?</div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s6.jpg" />? ? ? ? ? ? <a href="#">其實(shí)我每天早上都是被自己帥醒的</a>? ? ? ? ?</div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s1.jpg" />? ? ? ? ? ? <a href="#">告訴你一個(gè)我的秘密</a>? ? ? </div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s2.jpg" />? ? ? ? ? ? <a href="#">告訴你一個(gè)我的秘密</a>? ? ?</div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s6.jpg" />? ? ? ? ? ? <a href="#">告訴你一個(gè)我的秘密</a>? ? ? </div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s4.jpg" />? ? ? ? ? ? <a href="#">告訴你一個(gè)我的秘密</a>? ? ? </div>? ? ? <div class="pic-a">? ? ? ? <div class="pic-a"> <img src="images/s5.jpg" /> <a href="#">告訴你一個(gè)我的秘密</a> </div>? ? ? </div>? ? ? ? ?<div class="pic-a">? ? ? ? ? ? <img src="images/s3.jpg" />? ? ? ? ? ? <a href="#">告訴你一個(gè)我的秘密</a>? ? ? </div>? ?</div></div><div class="footer">? ?<div class="footer-top"></div>? ?<div class="footer-bot"></div></div></body></html></body></html>
1 回答
stone310
TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊
中間圖片加了float，浮動(dòng)了，于是父元素塌陷了，這是浮動(dòng)特性；
提供2種方法：
一種方法是給.footer直接加 clear:both，但這樣只是讓footer回到正常位置，但是塌陷沒(méi)清除;
另外一種方法是給.pic加上after為元素，如： .pic:after{content:"";display:block;clear:both;}
添加回答
舉報(bào)
0/150
提交
取消