前端项目实战：网易云静态页面——导航栏
文章目录
- 一、实现目标
- 二、顶部实现（背景为黑色部分）
-
- 1. 内容布局
- 2. 左边部分
-
- 网易云logo
- 左边的列表
- 列表元素高亮
- 指向每个列表元素的小红色三角
- “下载客户端”后的hot标志
- 3. 右边部分
-
- 登陆
- 创作者中心
- 搜索
- 三、底部实现（背景为红色部分）
- 四、总代码
-
- 1. html
- 2. basic.css
- 3. reset.css
一、实现目标
建立如下图所示文件夹及文件：
index_test.html是我们html的主要代码
basic.css是我们的细节样式
reset.css是重置样式（将某些个标签进行统一设置）
image用来存放我们要用的图片
image中的图片为：
整体框架：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网易云导航栏</title><link rel="stylesheet" href="./css_test/basic.css"><link rel="stylesheet" href="./css_test/reset.css">
</head>
<body><div class="top"><div class="topbar"><div class="top-left"></div><div class="top-right"></div></div></div><div class="bottom"></div>
</body>
</html>
top用来实现导航栏顶部，topbar是用来实现top里的内容，bottom用来实现导航栏底部，top-left用来实现顶部左边部分内容，top-right用来实现顶部右边内容部分。
二、顶部实现（背景为黑色部分）
1. 内容布局
/* basic */
.top {height: 70px;background-color: #242424;/* 源代码中应该还有一个1px的边框，所以height应该是69px，这里直接用border-box把边框的长度算在height里 */box-sizing: border-box;border-bottom: 1px solid #000;
}.topbar {width: 1100px;height: 69px;/* 设置行高，让topbar的子元素继承行高，进而让其子元素内容垂直居中 */line-height: 69px;margin: 0 auto;background-color: antiquewhite;
}
页面如下：
在top-left和top-right中分别加入文字left、right，然后设置topbar为浮动布局，让left和right在一行排列，并且根据浮动布局的特性让它们分别处于内容的左右两端。
/* basic */
.topbar {/* 浮动布局 */display: flex;/* 让left和right分别处于内容的左右端 */justify-content: space-between;width: 1100px;height: 69px;/* 设置行高，让topbar的子元素继承行高，进而让其子元素内容垂直居中 */line-height: 69px;margin: 0 auto;background-color: antiquewhite;
}
页面如下：
至此，内容布局完成，下面来做网易云logo。
2. 左边部分
网易云logo
更改html代码：
<div class="top-left"><h1 class="logo"><a href="#">网易云音乐</a></h1></div>
重置h1，a属性：
/* reset */
body,h1{padding: 0;margin: 0;
}a{text-decoration: none;color: #000;
}
网页如下：
原网页中这个logo并没有文字，它是一张图片。所以添加如下代码使文字消失
/* basic */
.topbar .top-left .logo a{/* 将a变为块级元素，因为text-indent对行内元素无效 */display: block;text-indent: -9999px;
}
下面我们将logo标志作为logo元素的背景：
/* basic */
.topbar .top-left .logo{background-image: url(../images/topbar.png);/* 前面我们也看到了这个logo是那张图里的一部分，所以我们需要确定logo这部分图片的位置以及它的宽度来获取这部分图片而不参杂图片中的其他成分*/width: 157px;
}
同时删除topbar的背景色，页面如下：
左边的列表
更改html中的内容
<h1 class="logo"><a href="#">网易云音乐</a></h1><ul class="list"><li><a href="#" class="item">发现音乐</a></li><li><a href="#" class="item">我的音乐</a></li><li><a href="#" class="item">关注</a></li><li><a href="#" class="item">商城</a></li><li><a href="#" class="item">音乐人</a></li><li><a href="#" class="item">下载客户端</a></li></ul>
重置ul、li
/* reset */
body,h1,ul,li{padding: 0;margin: 0;
}a{text-decoration: none;color: #000;
}li{list-style: none;
}
继续添加样式：
/* basic */
.topbar .top-left{/* 浮动布局，让logo和列表排列在同一行上 */display: flex;
}.topbar .top-left .list{/* 浮动布局，让list的每个li排列在同一行上 */display: flex;
}.topbar .top-left .list .item{color: #ccc;/* 每个a的文本内容距离a的左右边框20px */ padding: 0 20px;
}
此时页面如下：
此时发现logo与列表靠的太近了，修改一下：
.topbar .top-left .list{/* 浮动布局，让list的每个li排列在同一行上 */display: flex;padding-left: 20px;
}
页面如下：
列表元素高亮
可以看到在原网页中，当鼠标移动到“发现音乐”、“我的音乐”等上时背景颜色变暗，字体变白。且就算不移动到上面，也有一个元素是高亮的，不过那要用到js，这里就简单地做一个静态的。
<ul class="list"><li><a href="#" class="item active">发现音乐</a></li><li><a href="#" class="item">我的音乐</a></li><li><a href="#" class="item">关注</a></li><li><a href="#" class="item">商城</a></li><li><a href="#" class="item">音乐人</a></li><li><a href="#" class="item">下载客户端</a></li></ul>
/* basic */
.topbar .top-left .list .item:hover,
.topbar .top-left .list .item.active{color: #fff;background-color: #000;
}
页面如下：
可以看到每个列表元素的背景只有那么一点高度，这是因为我们我们设置文字颜色和背景颜色样式都是在a标签里的，而a标签是一个行内元素，不能设置宽高，所以背景的高度是由其内的文字撑起来的，这里我们将其转换成块级元素，继承父元素的高度即可。
/* basic */
.topbar .top-left .list .item{color: #ccc;/* 每个a的文本内容距离a的左右边框20px */ padding: 0 20px;display: block;
}
页面如下：
指向每个列表元素的小红色三角
/* basic */
.topbar .top-left .list .item{color: #ccc;/* 每个a的文本内容距离a的左右边框20px */ padding: 0 20px;display: block;/* 限制红色小三角的移动空间 */position: relative;
}.topbar .top-left .list .item.active::after{content: "";position: absolute;background: url(../images/topbar.png) -226px 0;/* 引入图片后一定要设置宽高，不然图标无法显示出来 */width: 12px;height: 7px;/* 居中 */left: 0;right: 0;margin: auto;/* 让红色小三角从top的底部往下移一点点*/
}
页面如下：
“下载客户端”后的hot标志
<ul class="list"><li><a href="#" class="item active">发现音乐</a></li><li><a href="#" class="item">我的音乐</a></li><li><a href="#" class="item">关注</a></li><li><a href="#" class="item">商城</a></li><li><a href="#" class="item">音乐人</a></li><li><a href="#" class="item icon-hot">下载客户端</a></li></ul>
.topbar .top-left .list .icon-hot::after{content: "";position: absolute;background: url(../images/topbar.png) -190px 0;width: 28px;height: 19px;/* 到这里上面已经出现了hot标志，下面进行偏移调整到合适的位置 */top: 21px;left: 100px;/* 到这里时，hot标志太靠近“下载客户端了”，调整一下间距 */margin-left: 10px;
}
页面如下：
到这里topbar的左边内容部分就完成了。
3. 右边部分
<div class="top"><div class="topbar"><div class="top-left"><h1 class="logo"><a href="#">网易云音乐</a></h1><ul class="list"><li><a href="#" class="item active">发现音乐</a></li><li><a href="#" class="item">我的音乐</a></li><li><a href="#" class="item">关注</a></li><li><a href="#" class="item">商城</a></li><li><a href="#" class="item">音乐人</a></li><li><a href="#" class="item icon-hot">下载客户端</a></li></ul></div><div class="top-right"><div class="search">搜索</div><div class="author">创作者中心</div><div class="login">登陆</div></div></div></div>
此时页面如下：
下面添加css样式让三个div浮动到同一行排列
/* basic */
.topbar .top-right{display: flex;padding-right: 20px;font-size: 12px;
}
登陆
<div class="login"><a href="#">登陆</a></div>
首先观察一眼原网页的“登陆”。
当我们鼠标进入“登陆”这个div时，颜色变亮，移动到“登陆”字体上时颜色又变浅且有下划线。
/* basic */
/* 登陆 */
.topbar .top-right .login a{color: #787878;
}.topbar .top-right .login:hover a{color: #fff;
}.topbar .top-right .login a:hover{color: #787878;text-decoration: underline;
}
页面如下：
创作者中心
<div class="author"><a href="#">创作者中心</a></div>
/* basic */
/* 创作者中心 */
.topbar .top-right .author a{/* 为了设置宽高，将a设置为块级元素 */display: block;box-sizing: border-box;color: #ccc;width: 90px;height: 32px;/* 调整三个div的间距 */margin: 0 20px;/* 边框 */border: 1px solid #4F4F4F;border-radius: 20px;/* 使文字跑到边框的中心处*/line-height: 32px;text-align: center;
}/* 鼠标移动到创作者中心处文字和边框高亮 */
.topbar .top-right .author:hover a{color: #fff;border-color: #fff;
}
页面如下：
此时发现这个创作者中心跑到上面去了，这是因为把a标设置为了块级元素的原因。
此时我们在bar-right里添加一行代码即可：
.topbar .top-right{display: flex;padding-right: 20px;font-size: 12px;/* 让其子元素居中 */align-items: center;
}
页面如下：
搜索
<div class="search"><input type="text"></div>
/* reset */
input{outline: none; border: none;
}
/* basic */
/* 搜索 */
.topbar .top-right .search{/* 让input输入框浮动到search椭圆框的中间 */display: flex;align-items: center;/* 让input输入框到search框的最后 */justify-content: flex-end;/* 此时input还有一点点在search外面，调整一下使其在search内部 */padding-right: 10px;/* 加入搜索图标后，图标有一部分被挡住了，在下面设置一下input框的长度 */background: url(../images/topbar.png) 0 -99px;/* search椭圆框基本设置 */width: 158px;height: 32px;border-radius: 30px;background-color: #fff;
}.topbar .top-right .search input{width: 118px;
}
页面如下：
突然发现左边列表文字有点大了，调整一下：
.topbar .top-left .list{/* 浮动布局，让list的每个li排列在同一行上 */display: flex;padding-left: 20px;font-size: 12px;
}/* 调整以后发现hot标志又离得远一些了，再调整一下left */.topbar .top-left .list .icon-hot::after{content: "";position: absolute;background: url(../images/topbar.png) -190px 0;width: 28px;height: 19px;/* 到这里上面已经出现了hot标志，下面进行偏移调整到合适的位置 */top: 21px;left: 80px;/* 到这里时，hot标志太靠近“下载客户端了”，调整一下间距 */margin-left: 10px;
}
页面如下：
再填补一下搜索框的文字
<div class="search"><input type="text" placeholder="音乐/视频/电台/用户"></div>
同时修改文字的大小
.topbar .top-right .search input{width: 118px;font-size: 12px;
}
页面如下：
三、底部实现（背景为红色部分）
<div class="bottom"><div class="botbar"><ul class="list"><li><a href="#" class="item">推荐</a></li><li><a href="#" class="item">排行榜</a></li><li><a href="#" class="item">歌单</a></li><li><a href="#" class="item">主播电台</a></li><li><a href="#" class="item">歌手</a></li><li><a href="#" class="item">新碟上架</a></li></ul></div></div>
页面如下：
添加样式（这里我发现顶部左边列表文字又调小了0.0，自己又去.topbar .bar-left .list里改成了14px）。
/* basic */
/* bottom */
.bottom{/* 背景设置 */height: 35px;background-color: #C20C0C;border-bottom: 1px solid #a40011;box-sizing: border-box;/* 让子元素继承行高，使list元素中的文字居中 */line-height: 35px;
}.botbar{/* 与顶部列表对齐*/padding-left: 183px;box-sizing: border-box;width: 1100px;margin: 0 auto;
}.botbar .list{/* 让list子元素浮动到一行排列 */display: flex;
}.botbar .list .item span{/* span是行内元素，不能设置宽高，将其转换为块级元素 */display: block;/* 调整间距 */padding: 0 13px;margin: 7px 17px;height: 20px;/* 居中 */line-height: 20px;color: #fff;font-size: 12px;
}
页面如下：
再来实现高亮部分：
<ul class="list"><li><a href="#" class="item active"><span>推荐</span></a></li><li><a href="#" class="item"><span>排行榜</span></a></li><li><a href="#" class="item"><span>歌单</span></a></li><li><a href="#" class="item"><span>主播电台</span></a></li><li><a href="#" class="item"><span>歌手</span></a></li><li><a href="#" class="item"><span>新碟上架</span></a></li></ul>
同时将list子元素的边框改为圆角
.botbar .list .item span{/* span是行内元素，不能设置宽高，将其转换为块级元素 */display: block;/* 调整间距 */padding: 0 13px;margin: 7px 17px;height: 20px;/* 居中 */line-height: 20px;color: #fff;font-size: 12px;border-radius: 21px;
}.botbar .list .item:hover span,
.botbar .list .item.active span{background-color: #9B0909;
}
最终页面如下：
到这里网易云导航栏就制作完成啦！
有不足的地方还望大家多多指正
四、总代码
1. html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网易云导航栏</title><link rel="stylesheet" href="./css_test/basic.css"><link rel="stylesheet" href="./css_test/reset.css">
</head>
<body><div class="top"><div class="topbar"><div class="top-left"><h1 class="logo"><a href="#">网易云音乐</a></h1><ul class="list"><li><a href="#" class="item active">发现音乐</a></li><li><a href="#" class="item">我的音乐</a></li><li><a href="#" class="item">关注</a></li><li><a href="#" class="item">商城</a></li><li><a href="#" class="item">音乐人</a></li><li><a href="#" class="item icon-hot">下载客户端</a></li></ul></div><div class="top-right"><div class="search"><input type="text" placeholder="音乐/视频/电台/用户"></div><div class="author"><a href="#">创作者中心</a></div><div class="login"><a href="#">登陆</a></div></div></div></div><div class="bottom"><div class="botbar"><ul class="list"><li><a href="#" class="item active"><span>推荐</span></a></li><li><a href="#" class="item"><span>排行榜</span></a></li><li><a href="#" class="item"><span>歌单</span></a></li><li><a href="#" class="item"><span>主播电台</span></a></li><li><a href="#" class="item"><span>歌手</span></a></li><li><a href="#" class="item"><span>新碟上架</span></a></li></ul></div></div>
</body>
</html>
2. basic.css
/* basic */
.top {height: 70px;background-color: #242424;/* 源代码中应该还有一个1px的边框，所以height应该是69px，这里直接用border-box把边框的长度算在height里 */box-sizing: border-box;border-bottom: 1px solid #000;
}.topbar {/* 浮动布局 */display: flex;/* 让left和right分别处于内容的左右端 */justify-content: space-between;width: 1100px;height: 69px;/* 设置行高，让topbar的子元素继承行高，进而让其子元素内容垂直居中 */line-height: 69px;margin: 0 auto;
}.topbar .top-left .logo a{/* 将a变为块级元素，因为text-indent对行内元素无效 */display: block;text-indent: -9999px;
}.topbar .top-left .logo{background-image: url(../images/topbar.png);width: 157px;
}.topbar .top-left{/* 浮动布局，让logo和列表排列在同一行上 */display: flex;
}.topbar .top-left .list{/* 浮动布局，让list的每个li排列在同一行上 */display: flex;padding-left: 20px;font-size: 14px;
}.topbar .top-left .list .item{color: #ccc;/* 每个a的文本内容距离a的左右边框20px */ padding: 0 20px;display: block;/* 限制红色小三角的移动空间 */position: relative;
}.topbar .top-left .list .item:hover,
.topbar .top-left .list .item.active{color: #fff;background-color: #000;
}.topbar .top-left .list .item.active::after{content: "";position: absolute;background: url(../images/topbar.png) -226px 0;/* 引入图片后一定要设置宽高，不然图标无法显示出来 */width: 12px;height: 7px;bottom: -2px;/* 居中 */left: 0;right: 0;margin: auto;
}.topbar .top-left .list .icon-hot::after{content: "";position: absolute;background: url(../images/topbar.png) -190px 0;width: 28px;height: 19px;/* 到这里上面已经出现了hot标志，下面进行偏移调整到合适的位置 */top: 21px;left: 80px;/* 到这里时，hot标志太靠近“下载客户端了”，调整一下间距 */margin-left: 10px;
}.topbar .top-right{display: flex;padding-right: 20px;font-size: 12px;/* 居中 */align-items: center;
}/* 登陆 */
.topbar .top-right .login a{color: #787878;
}.topbar .top-right .login:hover a{color: #fff;
}.topbar .top-right .login a:hover{color: #787878;text-decoration: underline;
}/* 创作者中心 */
.topbar .top-right .author a{/* 为了设置宽高，将a设置为块级元素 */display: block;box-sizing: border-box;color: #ccc;width: 90px;height: 32px;/* 调整三个div的间距 */margin: 0 20px;/* 边框 */border: 1px solid #4F4F4F;border-radius: 20px;/* 使文字跑到边框的中心处*/line-height: 32px;text-align: center;
}/* 鼠标移动到创作者中心处文字和边框高亮 */
.topbar .top-right .author:hover a{color: #fff;border-color: #fff;
}/* 搜索 */
.topbar .top-right .search{/* 让input输入框浮动到search椭圆框的中间 */display: flex;align-items: center;/* 让input输入框到search框的最后 */justify-content: flex-end;/* 此时input还有一点点在search外面，调整一下使其在search内部 */padding-right: 10px;/* 加入搜索图标后，图标有一部分被挡住了，在下面设置一下input框的长度 */background: url(../images/topbar.png) 0 -99px;/* search椭圆框基本设置 */width: 158px;height: 32px;border-radius: 30px;background-color: #fff;
}.topbar .top-right .search input{width: 118px;font-size: 12px;
}/* bottom */
.bottom{/* 背景设置 */height: 35px;background-color: #C20C0C;border-bottom: 1px solid #a40011;box-sizing: border-box;/* 让子元素继承行高，使list元素中的文字居中 */line-height: 35px;
}.botbar{/* 与顶部列表对齐*/padding-left: 183px;box-sizing: border-box;width: 1100px;margin: 0 auto;
}.botbar .list{/* 让list子元素浮动到一行排列 */display: flex;
}.botbar .list .item span{/* span是行内元素，不能设置宽高，将其转换为块级元素 */display: block;/* 调整间距 */padding: 0 13px;margin: 7px 17px;height: 20px;/* 居中 */line-height: 20px;color: #fff;font-size: 12px;border-radius: 21px;
}.botbar .list .item:hover span,
.botbar .list .item.active span{background-color: #9B0909;
}
3. reset.css
body,h1,ul,li{margin: 0;padding: 0;
}a{text-decoration: none;color: #000;
}ul,li{list-style: none;
}input{outline: none;border: none;
}