实验二、实现顶部导航
【实验内容】
本实验主要是通过分析顶部导航栏的布局学习官网常见的顶部导航栏设，利用html和css语言完成顶部导航栏的设计。
【实验目的】
1、学习如何分析页面布局；
2、了解无序标签ul,列表项标签li的基本用法；
3、学习如何使用css绘制三角形图标；
4、学习如何使用css给元素添加hover效果。
【实验步骤】
步骤1 分析页面目标元素布局
步骤2 利用ul,li等标签完成html代码的编写
步骤3 利用css完成页面的美化效果并完成三角形图标的绘制
步骤4 使用css添加元素的hover效果
步骤1 分析页面布局
如下图:
左侧有4个导航栏，右侧有8个导航栏有些导航栏选项有三角小标，有三级小标的选项有二级下拉菜单，二级下拉菜单鼠标放上去文字会变成红色。
步骤2 利用ul，li等标签完成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"> <!-- 这里是引入我们将要编辑的css样式表 --> <link rel="stylesheet" href="index.css"> <title>唯众海购网</title> </head> <body> <div id="topNav"> <!-- nav标签用来定义导航链接的部分 --> <nav> <!-- 根据刚才第一步的分析可以知道这是一个水平导航栏，我们可以采用ul > li 的格式来建立一个导航栏列表 --> <!-- 这里定义一个类名为Nav方便之后用CSS以类名Nav所在的标签为父级标签对导航栏进行样式操作 --> <ul class="Nav"> <li>唯众欢迎你！</li> <li><a>登录</a></li> <li><a>免费注册</a></li> <li><a>手机唯众</a></li> <li><a>每日签到</a></li> <li><a>我的订单</a></li> <li><a>个人中心<i></i></a> <!-- 这里面有个类名为personalCenter的div标签，取名为该类名的原因是，该类名中文翻译为个人中心 --> <!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 --> <div class="personalCenter"> <a href="">我的优惠券</a> <a href="">我的红包</a> <a href="">我的唯众豆</a> <a href="">帐号管理</a> <a href="">我的实名认证</a> <a href="">我的发票抬头</a> <a href="">我收藏的商品</a> <a href="">我关注的品牌</a> <a href="">售后管理</a> </div> </li> <li><a>客户服务<i></i></a> <!-- 这里面有个类名为customerService的div标签，取名为该类名的原因是，该类名中文翻译为客服服务 --> <!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 --> <div class="customerService"> <a href="">联系客服</a> <a href="">帮助中心</a> <a href="">知识产权保护</a> <a href="">规则中心</a> </div> </li> <li><a>充值中心<i></i></a> <!-- 这里面有个类名为payCenter的div标签，取名为该类名的原因是，该类名中文翻译为支付中心 --> <!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 --> <div class="payCenter"> <a href="">话费充值</a> <a href="">游戏充值</a> <a href="">AppStore</a> </div> </li> <li><a>消费者权益<i></i></a> <!-- 这里面有个类名为consumesInterests的div标签，取名为该类名的原因是，该类名中文翻译为消费者权益 --> <!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 --> <div class="consumesInterests"> <a href="">消费者告知书</a> </div> </li> <li><a>更多<i></i></a> <!-- 这里面有个类名为more的div标签，取名为该类名的原因是，该类名中文翻译为更多 --> <!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 --> <div class="more"> <a href="">收藏本站</a> <a href="">新浪微博</a> <a href="">微信公众号</a> <a href="">招商合作</a> </div> </li> <li><a>视频内容</a></li> </ul> </nav> </div> </body> </html>
Html完成后页面如下图：
步骤3 利用css完成页面的美化效果并完成三角形图标的绘制
新建top.css文件,在index.htm中的head标签添加代码引入文件
<link rel="stylesheet" href="top.css">
在top.css文件书写代码如下:
/* ---------------顶部导航栏部分---------------------*/
/* 设置外层包裹标签，方便实现导航条居中 */
#topNav {
display: block;
margin: 0 auto;
}
/* 设置导航栏父级的效果 */
ul.Nav {
/* 设置导航栏类名为Nav的ul列表的定位为相对定位 */
position: relative;
/* 根据官方网页参考可得，大致的导航栏高度为31px */
height: 31px;
/* 设置为100%，让导航栏的ul列表适应屏幕宽度 */
width: 100%;
/* 距离顶部为0像素，使导航栏相对浏览器可视页面置顶，紧贴浏览器可视页面顶部 */
margin-top: 0px;
/* 前端的规范中，ul默认相对左边有40像素的距离，margin-left属性设置为-40像素表示相对于左边向左方向移动40像素的距离，来解决不对齐的问题 */
margin-left: -40px;
/* 根据官网的导航栏背景颜色可知，背景颜色为黑色 */
background-color: black;
/* 设置字体颜色为灰度，16进制表示为999999，这里缩写为999 */
color: #999;
}
/* 对导航栏子级进行设置 */
ul.Nav li {
/* 将li标签的显示设置为行级块模式，这样会让li标签从垂直排列变为水平排列 */
display: inline-block;
position: relative;
/* 行高设置为和父级一样的行高，用于撑开li的高度 */
line-height: 31px;
/* 根据官网的导航栏效果可知，li内的字体相对于border边框有一定的距离，所以我们设置内填充，上下因为有行高了，这里就设置左右内填充12像素 */
padding: 0 12px 0;
cursor: pointer;
}
/* 这里采用nth-child()选择器来设置每个选项之间的间距 */
/* 主要设置第一个选项和第四个选项 ，这样一左一右的设置可以使第一到第4选项分离成左侧的导航栏*/
ul.Nav li:nth-child(1) {
margin-left: 200px;
}
ul.Nav li:nth-child(4) {
margin-right: 140px;
}
/* 这个地方是将i标签用css画成三角形，做倒三角字符 */
ul.Nav li i {
position: relative;
top: 10px;
margin-left: 4px;
width: 0;
height: 0;
border: 4px solid #999;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
/* 加入动画过渡属性 */
transition: all 0.2s ease;
}
/* 对个人中心，客服服务，支付中心，消费者权益，更多 这5个二级下拉菜单进行设置 */
.personalCenter,
.customerService,
.payCenter,
.consumesInterests,
.more {
display: none;
position: absolute;
margin-left: -12px;
width: 100px;
background-color: rgb(253, 253, 253);
box-shadow: 1px 1px 15px rgb(228, 228, 228);
padding: 0 10px 0 10px;
z-index: 10000;
}
.customerService {
width: 90px;
}
.payCenter {
width: 64px;
}
.consumesInterests {
width: 76px;
}
.more {
width: 74px;
left: -18px;
padding: 0 8px 0 8px;
}
/* 对个人中心，客服服务，支付中心，更多 这4个二级下拉菜单的菜单选项进行设置，这里我们用a标签作为单个菜单选项的包裹标签 */
.personalCenter a,
.customerService a,
.consumesInterests a,
.payCenter a,
.more a {
display: block;
width: 100%;
color: inherit;
}
/* 给二级下拉菜单里面的指定选项设置下划线 */
.more a:nth-child(1) {
border-bottom: 1px solid rgb(204, 204, 204);
}
.personalCenter a:nth-child(3) {
border-bottom: 1px solid rgb(204, 204, 204);
}
.personalCenter a:nth-child(6) {
border-bottom: 1px solid rgb(204, 204, 204);
}
.personalCenter a:nth-child(8) {
border-bottom: 1px solid rgb(204, 204, 204);
}
完成头部导航栏的基本样式如下图：
步骤4 使用css添加元素的hover效果
完成基本样式后需要给元素添加hover效果，使鼠标移动上去后文字变色和展开二级菜单，在top.css中添加代码：
/* 当鼠标移动到导航栏的li标签上时会发生字体变白色的效果 */
ul.Nav li:hover {
color: #fff;
}
/* 当鼠标经过导航栏的li标签选项时，i标签发生的变化，原本是要做旋转的动画，为了更具有创意，我做的这个是下坠的动画效果 */
ul.Nav li:hover i {
top: -10px;
border-bottom-color: #999;
border-top-color: transparent;
}
/* 类名.Nav中的第7到第11的li元素是拥有下拉二级菜单栏，鼠标经过li标签的时候，背景变为白色,字体颜色变黑色*/
ul.Nav li:nth-child(7):hover,
ul.Nav li:nth-child(8):hover,
ul.Nav li:nth-child(9):hover,
ul.Nav li:nth-child(10):hover,
ul.Nav li:nth-child(11):hover {
color: rgb(0, 0, 0);
background-color: rgb(253, 253, 253);
}
/* 类名.Nav中的第7到第11的li元素是拥有下拉二级菜单栏，鼠标经过a标签的时候，字体颜色变红色 */
ul.Nav li:nth-child(7) a:hover,
ul.Nav li:nth-child(8) a:hover,
ul.Nav li:nth-child(9) a:hover,
ul.Nav li:nth-child(10) a:hover,
ul.Nav li:nth-child(11) a:hover {
color: rgb(240, 15, 15);
}
/* 类名.Nav中的第7到第11的li元素是拥有下拉二级菜单栏，鼠标经过时显示相应的二级下拉菜单栏 */
ul.Nav li:nth-child(7):hover .personalCenter,
ul.Nav li:nth-child(8):hover .customerService,
ul.Nav li:nth-child(9):hover .payCenter,
ul.Nav li:nth-child(10):hover .consumesInterests,
ul.Nav li:nth-child(11):hover .more {
display: block;
color: rgb(0, 0, 0);
}
完成后的顶部导航栏效果如下：
