先来看看效果
一样的先来看div简单的代码部分:
<div id="box"> <!--顶上标题--> <div class="top"></div> <!--大图部分--> <div class="banner"> <a href="#"><img src="images/3.jpg" /></a> <a href="#"><img src="images/4.jpg" /></a> <a href="#"><img src="images/5.jpg" /></a> <a href="#"><img src="images/6.jpg" /></a> </div> <!--左右两个选择图标--> <div class="left"></div> <div class="right"></div> <!--文字描述部分--> <div class="des"> <p class="title">5分钟就能轻松搞定的派对妆 秒杀大红唇和烟熏妆</p> <p class="content">红唇与烟熏妆曾是派对的"标配",这个过时的规则早就该打破了. 今年秋冬的彩妆流行是简洁时髦的美感:一抹亮片眼影,一个出其不意的眼线,一只镇住全场的唇膏 .既然能5分钟就搞定的派对妆,为什么还要等上1个小时呢?</p> </div> <!--最底下的小圆圈--> <ul> <li style="background-color:#c03"></li> <li></li> <li></li> <li></li> </ul> </div>
下面是CSS部分
#box{ position:relative; width:1100px; height:600px; border-top:2px solid #aaa; margin:60px auto; } /*顶上标题*/ #box .top{ position:absolute; top:-45px; left:360px; width:380px; height:90px;; background:url("images/1.jpg")no-repeat; background-position:-6px -520px; } /*大图部分*/ #box .banner{ width:1000px; height:500px; margin:50px auto; overflow:hidden; } /*左右两个选择图标*/ #box .left{ position:absolute; top:360px; left:50px; width:50px; height:70px; background:url("images/2.png")no-repeat; background-position:-4px -80px; } #box .left:hover{ background-color:rgba(2,2,2,0.5);/*背景图片已经有了, 只能选中后单独改变背景的颜色且加透明*/ } #box .right{ position:absolute; top:360px; right:50px; width:50px; height:70px; background:url("images/2.png")no-repeat; background-position:-4px -150px; } #box .right:hover{ background-color:rgba(2,2,2,0.5); } /*文字描述部分*/ #box .des{ position:absolute; bottom:-20px; left:105px; width:890px; height:145px; background:rgba(0,0,0,0.5); } /*文字描述部分-左边*/ #box .des .title{ float:left; width:280px; height:66px; font-size:24px; padding:40px 40px 30px 30px; } /*文字描述部分-右边*/ #box .des .content{ float:right; width:460px; height:20px; font-size:14px; border-left:1px solid #aaa; padding:20px 30px 50px 30px; margin-top:20px; } /*最底下的小圆圈*/ #box ul{ position:absolute; bottom:-60px; left:490px;/*1100/2-120/2=490px*/ width:120px; height:30px; } #box li{ float:left; width:10px; height:10px; margin:6px; background-color:#aaa; border-radius:50%; }
每一个模块都写了注释,分模块进行,总体比较简单,设置了圆角border-radius, 设置了图片定位,以及浮动float
发表评论