CSS实战（4）

banner部分 start

因为不属于公共部分，所以样式我们写在index.css 中。

html部分

    <!--大banner-->
    <div class="banner604">
    <a href="#">
    </a>
    </div>
    <div class="w main clearfix">
    <div class="slider">
    <a href="#"><img src="images/slider1.jpg" alt=""></a>
    <ul class="circle">
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
    <div class="arrow">
    <a href="javascript:;" class="arrow-l"><</a>
    <a href="javascript:;" class="arrow-r">></a>
    </div>
    </div>
    <div class="news">
    <div class="jd-news">
    <div class="dt">
    <h3>京东快报</h3>
    <a href="#">更多></a>
    </div>
    <div class="dd">
    <ul>
    <li><a href="#"><span> 2.14情人节 鲜花低至99元</span></a></li>
    <li><a href="#"><span>礼遇情人节 鲜花低至99元</span></a></li>
    <li><a href="#"><span>开小白卡，领3重情人节好礼</span></a></li>
    <li><a href="#"><span>每日享折扣 京东品质游</span></a></li>
    <li><a href="#"><span>每日享折扣 京东品质游</span></a></li>
    </ul>
    </div>
    </div>
    <div class="lifeservi">
    <div class="dt">
    <h3>生活服务</h3>
    </div>
    <div class="dd">
    <ul>
    <li class="lifeservi-icon1">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon2">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon3">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon4">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon5">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon6">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon7">
    <a href="#" class="song">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon8">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li> <li class="lifeservi-icon9">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon10">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon11">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    <li class="lifeservi-icon12">
    <a href="#">
    <i></i>
    <span>话费</span>
    </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>

css 部分

    @charset "UTF-8";
    .banner604 {
    /*子绝父相*/
    position: relative;
    /*相对定位占位置，所以不能给高，孩子不会撑开因为是脱标的*/
    }
    .banner604 a {
    position: absolute;
    top: 0;
    left: 0;
    /*和父亲一样宽，不然字有多大就显示多大*/
    width: 100%;
    height: 604px;
    /*大盒子居中对齐  加一个top center*/
    background: url(../images/banner.jpg) no-repeat top center;
    }
    .main {
    /*用内容撑开，所以删掉高度*/
    /*height: 800px;*/
    position: relative;
    }
    .slider {
    width: 730px;
    height: 453px;
    background-color:pink;
    margin: 12px 0 0 220px;
    float: left;
    /*以最近的父亲为准，不是main而是slider*/
    position: relative;
    }
    .circle {
    position: absolute;
    bottom: 8px;
    left: 50%;
    margin-left: -66px;
    }
    .circle li {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #3E3E3E;
    /*多个块级元素在一行上肯定要用浮动*/
    float: left;
    text-align: center;
    line-height: 18px;
    color: #fff;
    margin: 0 2px;
    cursor: pointer;
    }
    .circle li.current {
    background-color: #B61B1F;
    }
    .arrow-l, .arrow-r {
    position: absolute;
    width: 28px;
    height: 62px;
    top: 50%;
    margin-top:-31px;
    color: #fff;
    font: 500 18px/62px "宋体";
    text-align: center;
    background: rgba(0,0,0,.3);
    }
    .arrow-l{
    left: 0;
    }
    .arrow-r {
    right: 0;
    }
    .arrow-l:hover,.arrow-r:hover {
    background: rgba(0,0,0,.4);
    color: #fff;
    }
    .news {
    width: 248px;
    height: 451px;
    border: 1px solid #E4E4E4;
    float: right;
    margin-top: 12px;
    }
    .jd-news{
    height: 200px;
    border-bottom: 1px dashed #E4E4E4;
    }
    .jd-news .dt,.lifeservi .dt {
    height: 43px;
    border-bottom: 1px dotted #E8E8E7;
    line-height: 43px;
    }
    .jd-news .dt h3,.lifeservi .dt h3{
    float: left;
    font: 14px/43px "microsoft yahei";
    color: #666;
    padding-left: 15px;
    }
    .jd-news .dt a {
    float: right;
    font: 13px/43px "宋体";
    margin-right: 15px;
    }
    .jd-news .dd ul{
    padding:8px 0 0 15px;
    }
    .jd-news .dd li {
    line-height: 28px;
    }
    .jd-news .dd li span {
    font-weight: 700;
    margin-right: 5px;
    }
    .lifeservi {
    height: 251px;
    /*为了照顾浏览器*/
    width: 248px;
    overflow: hidden;
    }
    .lifeservi ul {
    width: 252px;
    }
    .lifeservi .dd li {
    width: 62px;
    height: 70px;
    border: 1px solid #E4E4E4;
    float: left;
    margin: -1px 0 0 -1px;
    }
    .lifeservi  li a {
    display: block;
    height: 70px;
    text-align: center;
    padding-top: 44px;
    position: relative;
    }
    .lifeservi  li  i {
    position: absolute;
    top: 12px;
    left: 18px;
    width: 25px;
    height: 25px;
    background: url(../images/icon_lifeserv.png) no-repeat right top;
    }
    .lifeservi-icon2 a i {
    background-position: right -25px;
    }
    .lifeservi-icon3 a i {
    background-position: right -50px;
    }
    .lifeservi-icon4 a i {
    background-position: right -75px;
    }.lifeservi-icon5 a i {
    background-position: right -100px;
    }.lifeservi-icon6 a i {
    background-position: right -125px;
    }.lifeservi-icon7 a i {
    background-position: right -150px;
    }.lifeservi-icon8 a i {
    background-position: right -175px;
    }.lifeservi-icon9 a i {
    background-position: right -200px;
    }.lifeservi-icon10 a i {
    background-position: right -225px;
    }
    .lifeservi-icon11 a i {
    background-position: right -250px;
    }
    .lifeservi-icon12 a i {
    background-position: right bottom;
    }
    .lifeservi-icon7 .song {
    background: url(../images/song.png) no-repeat right top;
    }

行内元素（如i,em,span,a）无大小，给大小不起效果，处理方式：
①转行内块
②转成块级元素
③加绝对定位
④加浮动
四种选其一，之后便可给行内元素大小。
行内元素也不要给上下padding.