kaola

考拉布局

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>

img

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

posted @   Dou-D  阅读(224)  评论(0)  编辑  收藏  举报
相关博文：
·  margin塌陷
·  JS面向对象练习
·  CSS实际案例，布局结构
·  CSS - 3
·  前端开发3
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手