2019-04-17

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>京东汽车</title>
  <style>
     /* 公共样式 */
     *{
        margin:0;
        padding:0;
     }
     li{
        list-style:none;
     }
     a{
        text-decoration:none;
     }
     .nav{
        width:1200px;
        /* border:1px solid #000; */
        /*水平居中*/
        margin:20px auto;
     }
     /* 。nav清楚浮动 */
     .nav:after{
        content:"";
        display:block;
        clear:both;
     }
     .nav_logo,.nav_list{
        float:left;
     }
     .nav_list{
        overflow:hidden;/*清除浮动*/
        margin-left:88px;
        background:red;
        height:38px;
        line-height:38px;

     }
     .nav_list>li{
        float:left;
        width:165px;
        /* border:1px solid #000; */
        text-align:center;
     }
     .nav_list>li>a{
        color:#fff;
     }
     .car{
        /* border:1px solid #000;  */
        width: 200px;
        margin: 0 auto;
        height:25px;
    }
    .car>p{
        border-bottom:1px solid #000;
        width:40px;
        display:inline-block;
        margin-bottom:5px;
    }
    .d1{
        width:1200px;
        margin:0 auto;

    }
    .d2>ul>li{
        width:225px;
        float:left;
        height:239px;
        
        
        
        text-align:center;
    }
    .d1>div>img{
        float:left;
    }
    .d2>ul{
        border-top:1px solid #000;
        border-bottom:1px solid #000;
        overflow:hidden; 
        height:480px;

    }
    .d2>ul>li>p{
        text-align:left;
        padding-left:15px;
    }
    .d2>ul>li>span{
        display:block;
        text-align:left;
        padding-left:15px;
    }
    .d2>ul>li>after:nth-child(),
    .d2>ul>li>after:nth-child(2),
    .d2>ul>li>after:nth-child(3),
    .d2>ul>li>after:nth-child(4),
    .d2>ul>li>after:nth-child(5),
    .d2>ul>li>after:nth-child(6),
    .d2>ul>li>after:nth-child(7),
    .d2>ul>li>after:nth-child(){
        border-right:1px solid #000;
    }
  </style>
 </head>
 <body>
 <div class='nav'>
    <a href="" class='nav_logo'>
        <img src='images/logo.png'>
    </a>
    <ul class='nav_list'>
        <li><a href="#">全款购车</a></li>
        <li><a href="#">定金购车</a></li>
        <li><a href="#">新车</a></li>
        <li><a href="#">二手车</a></li>
        <li><a href="#">平行进口车</a></li>
        <li><a href="#">全部品牌</a></li>
    </ul>
 </div>
 <div class="car">
    <p></p>
    <i>平行进口车</i>
    <p></p>
 </div>
 <div class="d1">
 <div >
    <img src="images/ad.png">
 </div>
 <div class="d2">
    <ul>
        <li>
            <img src="images/1.jpg">
            <p>
            撒大声道撒点大四啊打啊好快大四看打架打
            </p>
            <span>￥10000.00</span>
        </li>
        <li>
            <img src="images/1.jpg">
            <p>
            撒大声道撒点大四啊打啊好快大四看打架打
            </p>
            <span>￥10000.00</span>
        </li>
        <li>
            <img src="images/1.jpg">
            <p>
            撒大声道撒点大四啊打啊好快大四看打架打
            </p>
            <span>￥10000.00</span>
        </li>
        <li>
            <img src="images/1.jpg">
            <p>
            撒大声道撒点大四啊打啊好快大四看打架打
            </p>
            <span>￥10000.00</span>
        </li>
        <li>
            <img src="images/1.jpg">
            <p>
            撒大声道撒点大四啊打啊好快大四看打架打
            </p>
            <span>￥10000.00</span>
        </li>
        <li>
            <img src="images/1.jpg">
            <p>
            撒大声道撒点大四啊打啊好快大四看打架打
            </p>
            <span>￥10000.00</span>
        </li>
        <li>
            <img src="images/1.jpg">
            <p>
            撒大声道撒点大四啊打啊好快大四看打架打
            </p>
            <span>￥10000.00</span>
        </li>
        <li>
            <img src="images/1.jpg">
            <p>
            撒大声道撒点大四啊打啊好快大四看打架打
            </p>
            <span>￥10000.00</span>
        </li>
    </ul>
 </div>
 </div>
 </body>
</html>
2019-04-17

推荐阅读更多精彩内容
