标签：gray kaola color height li sport left

考拉布局

CSS

<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f5f5f5;
        }
        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

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

        .w {
            width: 1100px;
            margin: 0 auto;
            background-color: #fff;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .w .sport {
            height: 74px;
            line-height: 74px;
        }

        .w .sport h2 {
            float: left;
        }

        .w .sport .hotword li {
            float: left;
            margin-left: 14px;
        }

        .w .sport .hotword li:nth-child(1) {
            color: gray;
        }

        .w .sport .hotword li a {
            color: orange;
        }

        .w .sport .hotword .nike {

            color: gray;
        }

        .w .sport .hotword li a:hover {
            text-decoration: underline;
        }

        .w .more {
            float: right;
            color: gray;
        }

        .w .more:hover {
            text-decoration: underline;
        }

        .w .content .rightshop {
            float: right;
        }

        .w .content .rightshop .hotsell {
            width: 207.4px;
            height: 58px;
            line-height: 58px;
            padding-left: 10px;
            border: 0.1px solid gray;
        }
        .w .content .rightshop  li {
            width: 216.4px;
            height: 117.2px;
            background-color: pink;
            border: 1px solid gray;
        }
        .w .content .loaded {
            float: left;
            width: 330px;
            height: 541px;
            background-color: pink;
        }
        .w .content .shoe .items{
            float: left;
            width: 272.2px;
            height: 268px;
            background-color: pink;
            /* border-left: 1px solid gray; */
            border-top: 1px solid gray;
            border-right: 1px solid gray;
        }
    </style>

HTML

<body>
    <div class="w">
        <div class="sport">
            <h2 >运动户外</h2>
            <ul class="hotword">
                <li>热搜词:</li>
                <li><a href="#">阿迪达斯</a></li>
                <li><a href="#" class="nike">耐克</a></li>
                <li><a href="#">斯凯奇</a></li>
                <li><a href="#">安德玛</a></li>
            </ul>
            <li><a href="#" class="more">更多好货></a></li>
        </div>
        <div class="content">
            <ul class="rightshop">
                <h3 class="hotsell">最新热卖</h3>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <div class="loaded">
                <!-- 左边大图片 -->
            </div>
            <ul class="shoe">
                <li class="items items1"></li>
                <li class="items items2"></li>
                <li class="items items3"></li>
                <li class="items items4"></li>
            </ul>
        </div>
    </div>
</body>

难点在border对盒子大小的影响

标签：gray,kaola,color,height,li,sport,left
From： https://www.cnblogs.com/doud/p/17084433.html

kaola

考拉布局

CSS

HTML

相关文章

赞助商

阅读排行