html+css布局综合练习

最新推荐文章于 2025-07-01 16:20:22 发布

smile_pbb

最新推荐文章于 2025-07-01 16:20:22 发布

阅读量1.5k

点赞数 18

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/smile_pbb/article/details/136804194

前端专栏收录该内容

17 篇文章

订阅专栏

该博客围绕前端页面开发展开，先介绍准备工作，引入reset.css消除默认样式、引入index.less方便嵌套。接着详细阐述顶部、头部、主导导航区、内容区域等各部分的HTML和Less代码，还对各区域进行总结，如版心高度、字体样式、精灵图使用等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、准备工作

1.引入reset.css

主要是消除一些默认的样式

/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
    margin: 0;
    padding: 0;
}

ul,ol {
    list-style: none;
}

img {
    /* 底部留白 */
    display: block;
	border:0;
}

b,strong {
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    /* 父元素字号的百分比 */
    font-size: 100%;
    font-weight: normal;
}

i,em {
    /* 不倾斜 */
    font-style: normal;
}

u,ins,s,del {
    /* 去掉中划线和下划线 */
    text-decoration: none;
}

table {
    border: 1px solid #999;
    /* 相当于是cellspacing */
    border-spacing: 0;
    /* 1px边框 */
    border-collapse: collapse;
}

td,th {
    border: 1px solid #999;
}

input,button {
    /* 去掉轮廓线 */
    outline: none;
    border:none;
}

/* 风格设置 */
body {
    font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    color: #333;
}

a {
    text-decoration: none;
    color: #666;
}

a:hover {
    color:#DD302D;
    text-decoration: none;
}

.leftfix {
    float: left;
}

.rightfix {
    float: right;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

2.引入index.less

此练习项目中使用了less.因为嵌套起来比较方便

二、顶部

1.html代码

<div class="top">
        <!-- 版心 -->
        <div class="container clearfix">
            <!-- 左侧部分 -->
            <div class="welcom leftfix">
                <span class="leftbar">商品汇欢迎您</span>
                <span>请</span>
                <a href="#">登陆</a>
                <a href="#">免费注册</a>
            </div>


            <!-- 右侧部分 -->
            <div class="topbar rightfix">
                <ul class="list clearfix">
                    <li><a href="#" class="first_li">我的订单</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>
                    <li><a href="#">合作招商</a></li>
                    <li><a href="#" class="last_li">商家后台</a></li>
                </ul>
            </div>
        </div>
    
    </div>

2.less代码

//版心样式
.container {
    width: 1190px;
    margin: 0 auto;
}

// 顶部代码
.top {
    background-color: #ececec;
    height: 30px;
    line-height: 30px;

    // 左半部分样式
    .welcom {
        height: 30px;
        font-size: 0;

        .leftbar {
            margin-right: 28px;
            font-size: 12px;
        }
        span,a {
            font-size: 12px;
        }
        a:first-of-type {
            padding-right: 10px;
            border-right: 1px solid #666;
        }
        a:last-of-type {
            padding-left: 10px;
        }
    }

3.总结：

3.1 版心高度

版心的作用主要是为了限制宽度，尽可能的适配所有的屏幕都能显示出整个网页的内容。
版心不建议给高度，因为高度是由内容撑开的.除了版心都要设置一个高度

3.2 字体间距离

1.文件被span和a标签包裹，他们都是行内元素，行内元素不能设置宽高，但是可以设置margin和padding。但是只能左右方向不能上下方向。

三、头部

1.html代码

    <div class="header">
        <div class="container clearfix">
            <!-- 左边图片 -->
            <div class="logo leftfix">
                <img src="./images/logo.png" alt="商品汇">
            </div>

            <!-- 右边搜索 -->
            <div class="search rightfix">
                <form action="#" method="post">
                    <input type="text" />
                    <button></button>
                </form>
            </div>
            
        </div>
        
    </div>

2.less代码

.header {
    height: 120px;
    .search {
        font-size: 0px;
        form {
            margin-top: 42px;
            
            input {
                height: 34px;
                width: 508px;
                border: 1px solid #DD302D;
                // 主要是为了让输入框和按钮对齐
                vertical-align: middle;
                font-size: 12px;
            }
            
            button {
                height: 36px;
                width: 80px;
                // 主要是为了让输入框和按钮对齐
                background-color: #DD302D;
                vertical-align: middle;
                background-image: url("../images/serch_icon.png");
                background-repeat: no-repeat;
                // 28是水平移动 6是垂直移动
                background-position:28px 6px;
            }
        }
    }
        
}

3.总结:

3.表单元素的文字默认样式

input中输入的文字和button按钮的文字，不受font-szie:0的影响。因为他们有默认的文字样式

四、主导导航区

1.html代码

   <!-- 主导航栏 -->
    <div class="main-nav">
        <div class="container clearfix">
            <div class="all-types leftfix">全部商品分类</div>
            <div class="main-nav-list leftfix">
                <ul>
                    <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="#">PLUS会员</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>
    </div

2.less代码

// 主导航栏样式
.main-nav {
    border-bottom: 1px solid #DD302D;
    line-height: 48px;
    .all-types {
        height: 48px;
        width: 190px;
        background-color: #DD302D;
        text-align: center;
        color: white;
        font-size: 16px;
    }
    .main-nav-list {
        ul > li {
            float: left;
            margin: 0 10px;
            font-size: 16px;
            color: #333333;
            font-family: "PingFang SC";
            font-weight: 500;
        }
    }
}

五、内容区域

1.html代码

<div class="main-content">
        <div class="container clearfix">
            <!-- 左侧部分 -->
            <div class="banner-list leftfix">
                <ul>
                    <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></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>
                    <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="center-content leftfix">
                <img src="./images/banner主图.png" alt="">
            </div>

            <!-- 右侧部分 -->
            <div class="other-content leftfix">
                <!-- 上半部分 -->
                <div class="top-content">
                    <div class="title-content">
                        <span><b>尚品快报</b></span>
                        <span>更多 &gt</span>
                    </div>
                    <div></div>
                    <ul>
                        <li><a href="#">[特惠] 毛衣+直筒裤，才是YYDS</a></li>
                        <li><a href="#">[特惠] 超大容量的满足感来啥子</a></li>
                        <li><a href="#">[特惠] 每日一件，衣柜满到塞不下</a></li>
                        <li><a href="#">[特惠] 媳妇再买，我就疯给他看</a></li>
                    </ul>

                </div>

                <!-- 下半部分-精灵图部分 -->
                <div class="bottom-content">
                   <ul class="clearfix">
                    <li>
                        <div></div>
                        <span>话费</span>
                    </li>
                    <li>
                        <div></div>
                        <span>火车票</span>
                    </li>
                    <li>
                        <div></div>
                        <span>加油卡</span>
                    </li>
                    <li>
                        <div></div>
                        <span>白条</span>
                    </li>
                   </ul>
                   <ul class="clearfix">
                    <li>
                        <div></div>
                        <span>电影票</span>
                    </li>
                    <li>
                        <div></div>
                        <span>酒店</span>
                    </li>
                    <li>
                        <div></div>
                        <span>理财</span>
                    </li>
                    <li>
                        <div></div>
                        <span>机票</span>
                    </li>
                   </ul>
                   <ul class="clearfix">
                    <li>
                        <div></div>
                        <span>礼品卡</span>
                    </li>
                    <li>
                        <div></div>
                        <span>彩票</span>
                    </li>
                    <li>
                        <div></div>
                        <span>游戏</span>
                    </li>
                    <li>
                        <div></div>
                        <span>众筹</span>
                    </li>
                   </ul>
                </div>

            </div>
        </div>
    </div>

2.less代码

.main-content {
    margin-top: 10px;
    // 左边样式
    .banner-list {
        width: 190px;
        height: 458px;
        background-color: #F4F4F4 ;
        // 这里设置行间距，没有使用padding和margin，是因为个人认为设置li的高来设置行间距敝比较方便
        li {
            height: 28px;
            line-height: 28px;
            font-size: 14px;
            padding-left: 16px;
        }
        li:hover {
            background-color: #DD302D;
            a {
                color: white
            }
        }
    }
    // 中间样式
    .center-content {
        width: 690px;
        height: 458px;
        margin: 0 10px;
    }

    // 右边样式
    .other-content {
        width: 288px;
        height: 456px;
        
        // 上半部分文字样式
        .top-content {
            width: 290px;
            height: 158px;
            border: 1px solid #D9D9D9;
           
            // 最上边文字的样式
            .title-content {
                height: 14px;
                line-height: 14px;
                font-size: 0px;
                margin-top: 15px;
                padding-left: 14px;


                span:first-child {
                    font-size: 14px;
                    font-weight: 400;
                }
                span:last-child {
                    font-size: 12px;
                    position: relative;
                    left: 168px;
                    color: #999999
                }
            }

            // 横线的样式
            div:nth-of-type(2){
                height: 10px;
                width: 262px;
                margin: 0 auto;
                border-bottom: 1px solid #D9D9D9;
            }
            ul {
                width: 262px;
                position: relative;
                top:8px;
                margin-left: 14px;
                color: #666666;
                
                li {
                    height: 26px;
                    line-height: 26px;
                }
                a {
                    color: #666;
                }
                
                li:hover {
                    background-color: #dd002d;
                }
                a:hover {
                    color: white;
                }
            }
            
            
        }

        //下半部分精灵图
        .bottom-content {
            width: 290px;
            height: 290px;
            margin-top: 10px;
            overflow: hidden;
            // 第一行精灵图
            ul  {
                margin-top: 16px;
                li {
                    float: left;
                    width: 48px;
                    height: 70px;
                    margin:0 11px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500px;
                    div {
                        width: 48px;
                        height: 48px;
                        background-image: url('../images/精灵图-侧边功能.png');
                    }
                              
                }
                li:first-child {
                    margin-left: 16px;
                }
                li:nth-child(2) > div {
                    background-position: -48px 0;
                } 
                li:nth-child(3) > div{
                    background-position: -96px 0;
                } 
                li:nth-child(4) > div {
                    background-position: -144px 0;
                }            
            }

            // 第二行精灵图
            ul:nth-child(2) {
                margin: 22px 0;
                li:first-child > div {
                    background-position: 0px -48px;
                }
                li:nth-child(2) > div{
                    background-position: -48px -48px;
                }
                li:nth-child(3) > div {
                    background-position: -96px -48px;
                }
                li:nth-child(4) > div{
                    background-position: -144px -48px;
                }
            }

            // 第三行精灵图
            ul:nth-child(3) {
                margin: 22px 0;
                li:first-child > div {
                    background-position: 0px -96px;
                }
                li:nth-child(2) > div{
                    background-position: -48px -96px;
                }
                li:nth-child(3) > div {
                    background-position: -96px -96px;
                }
                li:nth-child(4) > div{
                    background-position: -144px -96px;
                }
            }

        }
    }
}

3.总结：

1.设置文字上下间距

设置行上下距离，这里使用的是li元素，通过设置li高度来控制行间距比较方便。把行间距设置在li的高度中一步到位，比文字高度 + 边距个人感觉方便

2.调整边距不影响hover背景填空

调整li左边距离的时候没用margin而是padding，是因为，如果使用margin设置li的hover属性的时候，背景颜色不能充满li，所有用的padding

3.a标签默认字体样式

在li和a标嵌套设hover的时候，背景一改，a标签的字体颜色也要改，改字体颜色的受，不能改li 需要改a的字体颜色，因为a的字体有默认样式，不能继承li的字体样式

4.精灵图

1.精灵图的好处就是：多个小的图片集合成一张图片，页面在加载图片的时候，不需要发送多个请求来下载不同的图片，只需要发送一个图片请求即可
2.使用精灵图的时候，需要把精灵图当作背景图来设置，不要直接使用img来引入

六、图片列表区域

1.html代码

    <div class="pic-list">
        <div class="container clearfix">
            <div><img src="./images/seckill.png" alt=""></div>
            <div><img src="./images/banner1.png" alt=""></div>
            <div><img src="./images/banner2.png" alt=""></div>
            <div><img src="./images/banner3.png" alt=""></div>
            <div><img src="./images/banner4.png" alt=""></div>
        </div>
    </div>

2.less代码

.pic-list {
    margin-top: 10px;

    .container {
        div {
            float: left;
            width: 239px;
            height: 190px;
            background-color: gray;
        }
        div:first-child {
            width: 190px;
        }
        div:nth-child(2) {
            margin: 0px 10px;
        }
        div:nth-child(4) {
            margin-left: 14px;
            margin-right: 10px;
        }
        
    }
    
}

七、家用电器文字列表

1.html代码

    <div class="dq-banner">
        <div class="container">
            <span>家用电器</span>
            <ul class="rightfix clearfix">
                <li><a href="#">热门</a></li>
                <!-- 中间的竖线 -->
                <div></div>
                <li><a href="#">大家电</a></li>
                <div></div>
                <li><a href="#">生活电器</a></li>
                <div></div>
                <li><a href="#">厨房电器</a></li>
                <div></div>
                <li><a href="#">应季电器</a></li>
                <div></div>
                <li><a href="#">空气/净水</a></li>
                <div></div>
                <li><a href="#">高端电器</a></li>
            </ul>
        </div>
    </div>

2.less代码

.dq-banner {
    margin-top: 48px;
    height: 30px;
    line-height: 30px;
    font-size: 0px;
    
    span {
       font-size: 20px;
       font-weight: 500px;
       color: #000000;
    }
    ul {
        overflow: hidden;
        li {
            height: 24px;
            line-height: 24px;
            font-size: 16px;
            float:left;
            
        }
        a {
            padding: 0px 10px;
        }

        div {
            float: left;
            width: 1px;
            height: 13px;
            background-color: #000;
            margin-top: 7px;
        }
    }
    
}

3.总结：

这里文字中间的竖线，使用了单独的div表示，因为感觉网页上的竖线很短，如果使用文字的边框感觉总是高一点

八、图文混合区域

1.html代码

    <div class="minxs-list">
        <div class="container clearfix">
            <!-- 第一列 -->
            <div>
                <!-- 上半部分文字 -->
                <ul>
                    <li class="clearfix">
                        <div>节能补贴</div>
                        <div>4K电视</div>
                    </li>
                    <li class="clearfix">
                        <div>空气净化器</div>
                        <div>IH电饭煲</div>
                    </li>
                    <li class="clearfix">
                        <div>滚筒洗衣机</div>
                        <div>电热水器</div>
                    </li>
                </ul>

                <!-- 下半部分图片 -->
                <div><img src="./images/编组.png" alt=""></div>
            </div>

            <!-- 第二列图片 -->
            <div><img src="./images/appliance_banner07.png" alt="#"></div>
            
            <!-- 第三列 -->
            <div>
                <div><img src="./images/微波炉.png" alt=""></div>
                <div><img src="./images/空气炸锅.png" alt=""></div>
            </div>

            <!-- 第四列 -->
            <div><img src="./images/冰箱.png" alt=""></div>

            <!-- 第五列 -->
            <div>
                <div><img src="./images/电饭煲.png" alt=""></div>
                <div><img src="./images/电饭煲2.png" alt=""></div>
            </div>
        </div>
    </div>

2.less代码

	.minxs-list {
    height: 434px;
    
    .container {
        > div {
            border-top: 1px solid #DD302D;
            float: left;
        }
        // 第一列
        div:first-child {
            height: 432px;
            width: 230px;
            background-color: #f4f4f4;
            overflow: hidden;
           
            // 上半部分文字
            ul  {
                width: 190px;
                height: 108px;
                margin: 20px auto 0px;
        
                li > div {
                    width: 90px;
                    height: 25.5px;
                    line-height: 25.5px;
                    text-align: center;
                    float: left;
                    font-size: 16px;
                    font-weight: 500px;
                    color:#666;
                    border-bottom: 1px solid #d9d9d9;
                    margin-right: 5px;
                                        
                }
                li:nth-child(2) {
                    margin:14.5px 0px;
                }
            }

            // 下半部分图片
            > div {
                width: 192px;
                height: 242px;
                margin: 30px auto 0px;
            }
            
        }

        // 第二列
        div:nth-child(2) {
            width: 340px;
            height: 432px;
        }

        // 第3，4，5列通用参数
        div:nth-child(3),div:nth-child(4), div:nth-child(5){
            height: 432px;
            width: 206px;
        }

        // 第3、5列的上下图片参数
        div:nth-child(3),div:nth-child(5) {
            > div {
                width: 206px;
                height: 215px;
            }
            div:first-child {
                border-bottom: 1px solid #E2E2E2;
            }
        }
        div:nth-child(4) {
            border-left: 1px solid #E2E2E2;
            border-right: 1px solid #E2E2E2;
        }
    }
    
}