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.