考拉布局

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对盒子大小的影响

巴特西

kaola

考拉布局

CSS

HTML

最新文章

热门文章