文章目录
- 一、页面效果展示
- 二、代码实现解析
- 三、完整代码
一、页面效果展示
实现如下效果：
（官网）
（自己实现的效果）
二、代码实现解析
1、导航栏使用 ul-li 来实现，先写出 html 基本框架。
<body>
<!-- 整个导航栏 -->
<div class="nav">
<!-- 导航栏的内容部分 -->
<div class="content">
<!-- 添加图片 -->
<a href="#">
<img src="./img/pdd_logo.png"/>
</a>
<!-- 导航栏 -->
<ul>
<li>
<a href="#"><span>首页</span></a>
</li>
<li>
<a href="#"><span>拼多多商家入驻</span></a>
</li>
<li>
<a href="#"><span>跨境商家入驻</span></a>
</li>
<li>
<a href="#"><span>热点资讯</span></a>
</li>
<li>
<a href="#"><span>社会招聘</span></a>
</li>
<li>
<a href="#"><span>校园招聘</span></a>
</li>
<li>
<a href="#"><span>招采平台</span></a>
</li>
<li>
<a href="#"><span>帮助中心</span></a>
</li>
<li>
<a href="#"><span>举报平台</span></a>
</li>
<li>
<a href="#"><span>分享赚钱</span></a>
</li>
<li>
<a href="#"><span>查快递</span></a>
</li>
</ul>
</div>
</div>
</body>
当前效果如下：
2、给元素添加样式，使用 position: fixed; 将整个导航栏设置为固定定位，使用 top: 0 固定在最上方。
/* 初始化样式 */
* {
padding: 0;
margin: 0;
}
/* 设置整个导航栏.nav的样式 */
.nav {
/* 将导航栏固定在整个页面上方 */
position: fixed;
top: 0;
width: 100%;
height: 105px;
border-bottom: 5px solid red;
}
当前效果如下：
3、调整导航元素内容 .content 的位置，并将图片缩放到合适大小。
.nav .content {
/* 设置宽高 */
width: 1200px;
height: 105px;
/* 居中 */
margin: 0 auto;
}
/* 设置图片显示尺寸和边距 */
.nav .content img {
/* 修改了图片宽度后高度也会按原比例自动变化 */
width: 180px;
/* 边距 */
margin: 21px 0;
}
当前效果如下：
4、由于 ul-li 中的元素是垂直放置的，通过对子元素使用 float: left 让元素水平放置，并将前面的 ul li 小圆点和 a 的自带样式消除，设置 span 中的导航文字的样式。
.nav .content ul {
/* 清除小圆点 */
list-style: none;
/* 设置高度，并让元素垂直居中 */
height: 20px;
line-height: 20px;
}
.nav .content ul li {
/* 设置元素左浮动 */
float: left;
}
.nav .content ul li a {
/* 清除 a 标签自带的样式 */
text-decoration: none;
}
.nav .content ul li a span {
/* 字体颜色 */
color: #6c6c6c;
/* 左右边距 */
margin: 0 10px;
/* 字体大小 */
font-size: 16px;
}
当前效果如下：
5、将 ul-li 放到合适的位置，设置绝对定位 position: absolute 来调整位置，那父元素 .content 就要设置相对定位 position: relative 。
.nav .content {
width: 1200px;
height: 105px;
margin: 0 auto;
/* 新增 */
position: relative;
}
.nav .content ul {
list-style: none;
height: 20px;
line-height: 20px;
/* 新增 */
position: absolute;
right: 24px;
top: 50%;
margin-top: -10px;
}
效果如下，导航条已经基本完成了：
6、可以看到官网中的导航文字中的分割线还没有实现，可以对 ul-li 设置右边框线来实现该效果，并通过 ul li:last-child 选择到最右边的 li 多余的边框线取消掉。
.nav .content ul li {
float: left;
/* 新增 */
border-right: 1px solid #6c6c6c;
}
/* 选择最右边的 li */
.nav .content ul li:last-child {
/* 取消掉最右边的边框线 */
border: none;
}
当前效果如下：
7、官网中的第一个导航文字的样式都不一样，用 ul li:first-child span 为它单独设置一个样式，最后将导航文字两边多余的边距给清除就完成了。
/* 选中第一个span单独设置样式 */
.nav .content ul li:first-child span {
margin-left: 0; /* 清除左边多余边距 */
color: #fc475d;
font-weight: bold; /* 加粗 */
}
.nav .content ul li:last-child span {
margin-right: 0; /* 清除右边多余边距 */
}
最终效果：
三、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.nav {
position: fixed;
top: 0;
width: 100%;
height: 105px;
border-bottom: 5px solid red;
}
.nav .content {
position: relative;
width: 1200px;
height: 105px;
margin: 0 auto;
}
.nav .content img {
width: 180px;
margin: 21px 0;
}
.nav .content ul {
list-style: none;
position: absolute;
right: 24px;
top: 50%;
margin-top: -10px;
height: 20px;
line-height: 20px;
}
.nav .content ul li {
float: left;
border-right: 1px solid #6c6c6c;
}
.nav .content ul li a {
text-decoration: none;
}
.nav .content ul li a span {
color: #6c6c6c;
margin: 0 10px;
font-size: 16px;
}
.nav .content ul li:last-child {
border: none;
}
.nav .content ul li:first-child span {
margin-left: 0;
color: #fc475d;
font-weight: bold;
}
.nav .content ul li:last-child span {
margin-right: 0;
}
</style>
</head>
<body>
<div class="nav">
<div class="content">
<a href="#">
<img src="./img/pdd_logo.png"/>
</a>
<ul>
<li>
<a href="#"><span>首页</span></a>
</li>
<li>
<a href="#"><span>拼多多商家入驻</span></a>
</li>
<li>
<a href="#"><span>跨境商家入驻</span></a>
</li>
<li>
<a href="#"><span>热点资讯</span></a>
</li>
<li>
<a href="#"><span>社会招聘</span></a>
</li>
<li>
<a href="#"><span>校园招聘</span></a>
</li>
<li>
<a href="#"><span>招采平台</span></a>
</li>
<li>
<a href="#"><span>帮助中心</span></a>
</li>
<li>
<a href="#"><span>举报平台</span></a>
</li>
<li>
<a href="#"><span>分享赚钱</span></a>
</li>
<li>
<a href="#"><span>查快递</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
