mi

小米耳机页面

 <style>
       * {
            margin: 0;
            padding: 0;

        }

        body {
            width: 1226px;
            background-color: #f5f5f5;
            margin: 0 auto;
        }

        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .header {
            height: 58px;
            line-height: 58px;
        }

        h2 {
            float: left;
        }

        .type li a {
            float: right;
            margin-left: 30px;
            color: black;
        }

        .type li a:hover {
            color: orange;
            padding: 3px 0;
            border-bottom: 1px solid orange;
        }

        .erji .item {
            float: left;
            width: 234px;
            height: 300px;
            margin-right: 14px;
            margin-bottom: 14px;
            background-color: red;
        }

        .erji {
            margin-right: -14px;
        }

        .erji .item.items1 {
            height: 614px;
        }

        .erji .item.items9,
        .item.items10 {
            height: 143px;
        }
</style>

<body>

    <div class="header clearfix">
        <h2>智能穿戴</h2>
        <ul class="type">
            <li><a href="#">耳机</a></li>
            <li><a href="#">穿戴</a></li>
        </ul>
    </div>
    <div>
        <ul class="erji">
            <li class="item items1"></li>
            <li class="item items2"></li>
            <li class="item items3"></li>
            <li class="item items4"></li>
            <li class="item items5"></li>
            <li class="item items6"></li>
            <li class="item items7"></li>
            <li class="item items8"></li>
            <li class="item items9"></li>
            <li class="item items10"></li>
        </ul>
    </div>

</body>