前端练习项目——品优购 Day4 nav导航栏制作_运动鞋销售网站导航栏的制作-优快云博客

本文链接：https://blog.youkuaiyun.com/Acc222222/article/details/119168656

本文详细介绍了网页布局的整体结构，包括大盒子、版心以及左右两侧的盒子设计。左侧盒子分为全部商品标题和具体分类两部分，使用了HTML的`<div>`、`<ul>`、`<li>`等元素，并通过CSS进行样式定义，实现了下划线对齐、鼠标悬停效果等交互。右侧版心则展示了相关选项，同样运用了浮动布局和鼠标事件处理。整个布局注重用户体验，通过CSS调整元素的尺寸、颜色和位置，使得界面清晰易用。

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

1.整体结构分析

整体是一个大盒子，大盒子里有一个版心，版心里有左右两个盒子。左盒子是全部商品，右盒子是相关选项。注意左盒子也是两个部分：1.全部商品分类标题 2.全部商品的具体分类（这俩是一个盒子里的！）

2.整体大盒子制作（nav）

.nav {
    height: 46px;
    border-bottom: 2px solid #b1191a;
}

注意有一个下划线，用border-bottom制作

3.版心左侧全部商品（dropdown）板块制作

dropdown分为两个模块：上面的是全部商品，下面的是具体分类，其中全部商品模块把盒子占全，具体分类在下面。

.nav .dropdown {
    float: left;
    width: 210px;
    height: 46px;
    background-color: #b1191a;
}

由于全部商品板块跟相关选项板块需要挨在一起，因此需要左浮动。

（1）全部商品标题制作（dt）

<div class="dt">全部商品分类</div>

.dropdown .dt {
    width: 100%;
    height: 100%;
    /* 长宽与父盒子相同 */
    border-bottom: 2px solid #b1191a;
    /* 与大盒子相同，加上下划线，否则dd盒子无法与右侧下划线对齐（会差2px） */
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}

首先，长宽与父盒子相同（起标题作用），然后需要有一个下划线使下边的盒子对齐。然后就是标准的调整字体位置和大小的代码。

（2）具体分类制作（dd）

看到一行一行的文字，就想到应该用ul li a的结构制作。

<div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">手机、数码、通信</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">电脑、办公</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">家居、家具、家装、厨具</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">男装、女装、童装、内衣</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">个护化妆、清洁用品、宠物</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">户外运动、钟表</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">汽车、汽车用品</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">母婴、玩具乐器</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">食品、酒类、生鲜、特产</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">医疗保健</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">图书、音像、电子书</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li><a href="#">彩票、旅行、充值、票务</a><span class="iconfont youjiantou">&#xe603;</span></li>
                        <li class="lastli"><a href="#">理财、众筹、白条、保险</a><span class="iconfont youjiantou">&#xe603;</span></li>
                    </ul>
                </div>

其中右箭头用字体图标制作。

整体大盒子的CSS代码：基本就是给高宽，给个背景颜色

.dropdown .dd {
    width: 210px;
    height: 465px;
    background-color: #c81623;
    /* border-bottom: 1px solid #c81623;
    美化最后一个li */
}

li的CSS代码：其中的margin-left与padding-left仅仅是美化作用。由于字数不确定，因此li不要设置width。 7.29更新：由于li没有设置宽度，因此不需要设置为CSS3盒子

dropdown .dd ul li {
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
    /* 仅仅是美化作用，由于没有指定宽度，因此不用使用CSS3盒子 */
}

a的CSS代码：因为字体是在a里写的，因此应该用a的CSS代码调整字体属性

.dropdown .dd ul li a {
    font-size: 14px;
    color: #fff;
}

字体图标span的CSS代码：因为图标要靠在右侧，因此可以使用右浮动。还有一点：span虽然是行内元素，但是行内元素可以用margin调整左右间距（上下不行）。同样，字体图标拥有字体的属性

.dropdown .dd ul li span {
    float: right;
    margin-right: 2px;
    color: #fff;
    font-size: 16px;
}

接下来讨论一个重点问题：鼠标事件。

当鼠标经过盒子时，要触发一系列事件：

.dropdown .dd ul li:hover {
    background-color: #fff;
}

li的背景颜色要变为白色。

.dropdown .dd ul li:hover a {
    color: #c81623;
}

字体要变为红色。这里注意两点：1.字体是写在a里的，因此应该用a修改字体颜色。2.由于是鼠标经过li时触发事件，而不是经过a，因此是li:hover而不是a:hover，也就是经过谁触发事件，谁用hover。 li:hover后要接a，表示经过li后对a进行操作。

.dropdown .dd ul li:hover span {
    color: #c81623;
}

与a同理，字体图标变成红色。（也是经过li对span操作）

4.版心右侧相关选项模块制作

与导航栏一个思路，用ul li a模式

<div class="navitems">
                <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></li>
                    <li><a href="#">拍卖</a></li>
                    <li><a href="#">有趣</a></li>
                </ul>
            </div>

这里选择对a进行操作。

.navitems ul li a {
    display: block;
    float: left;
    height: 46px;
    line-height: 46px;
    padding: 0 25px;
    font-size: 16px;
}

首先，a转换为块级元素，然后使用左浮动把元素排成一行。调整高度，字体居中。紧接着是用padding撑大盒子。原因：用padding是内部撑大盒子，而margin是与外部拉开距离。使用padding可以增大被点击的范围，而margin实际上没有撑大盒子，所以不会增加被点击范围。这样可以增强用户体验。