文章目录
一、 导航栏测量1、 左侧边界2、 文本测量3、 底部边框测量 二、 导航栏代码编写1、 HTML 标签结构2、 CSS 样式3、最终显示效果 三、 完整代码1、 HTML 标签结构2、 CSS 样式一、 导航栏测量
1、 左侧边界
导航栏 最左侧位置 , 距离 logo 盒子 有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航栏之间的距离设置成 60 像素即可 ;
该边距可以设置为 logo 盒子的 右外边距为 60 像素 , 也可以设置为 导航栏盒子 的 做外边距为 60 像素 ;
这里设置为 logo 盒子的 右外边距为 60 像素 :
.logo {/* 靠左侧浮动 */float: left;/* 设置与 导航栏盒子 的外边距 */margin-right: 60px;}
2、 文本测量
选择 " 横排文字 " 工具 , 点击文字内容 ;
在文字工具中 , 会显示文字大小 18 像素 , 点击右侧的颜色 , 还会弹出 " 拾色器 ( 文本颜色 ) " 对话框 , 其中显示了文本颜色 #050505 ;
3、 底部边框测量
底部边框 2 像素 , 使用吸管工具吸取颜色 , 可得到颜色值 #00a4ff ;
二、 导航栏代码编写
1、 HTML 标签结构
导航栏使用 无序列表 实现 ,
div 块级盒子 中 , 存放一个 ul 无序列表 ,
无序列表的 li 中 , 存储一个 a 链接标签 ;
<!-- 导航栏盒子 - 使用无序列表实现 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div>
2、 CSS 样式
导航栏使用了 无序列表 , 无序列表的默认样式是 垂直排列 , 且左侧有小圆点 ;
先清除默认的列表样式 :
/* 清除列表默认样式 ( 主要是前面的点 ) */li {list-style: none;}
导航栏要设置左浮动 , 才能与 logo 盒子放在一行中 ;
/* 导航栏设置 左浮动 */.nav {float: left;}
导航栏中的无序列表 , 需要设置左浮动 , 才能将 块级元素 从左右到进行排列 ;
/* 导航栏内部 的 无序列表 设置左浮动 */.nav ul li {/* 设置 无序列表项 从左到右排列 */float: left;}
无序列表中 , 链接标签的样式 , 设置如下样式 ;
/* 设置无序列表中的链接样式 */.nav ul li a {/* 显示模式 块级元素 */display: block;/* 高度 40 像素 , 总高度 42 像素 , 有 2 像素的下边框 */height: 40px;/* 上下内边距 0 像素 , 左右内边距 10 像素 */padding: 0 10px;/* 右外边距 20 像素 */margin-right: 20px;/* 行高 = 内容高度 垂直居中 */line-height: 40px;/* 字体大小 */font-size: 18px;/* 字体颜色 */color: #050505;/* 取消链接下方的横线 */text-decoration: none;/* 调试时使用的背景 */background: skyblue;}
鼠标经过导航链接时 , 还要设置一个下边框 :
/* 鼠标经过链接时的样式 */.nav ul li a:hover {/* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */border-bottom: 2px solid #00a4ff;}
3、最终显示效果
此时 , 鼠标经过 导航栏的 首页 选项 ;
三、 完整代码
1、 HTML 标签结构
完整代码 :
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8" /> <title>课程网站</title><link rel="stylesheet" href="style.css"></head><body><!-- 头部模块 - 开始 --><div class="header w"><!-- 最左侧的 logo 标题 --><div class="logo"><!-- 图片 --><img src="images/logo.png" alt=""></div><!-- 导航栏盒子 - 使用无序列表实现 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div></div><!-- 头部模块 - 结束 --></body></html>
2、 CSS 样式
/* 清除标签默认的内外边距 */* {padding: 0;margin: 0;}/* 清除列表默认样式 ( 主要是前面的点 ) */li {list-style: none;}/* 设置总体背景 */body {background-color: #f3f5f7;}/* 插入图片自适应 */img {width: 100%;}/* 版心宽度 1200 像素 , 在浏览器中居中对齐 */.w {width: 1200px;margin: auto;}/* 头部盒子样式 */.header {/* 高度 42 像素 */height: 42px;/* 设置颜色 方便调试 */background-color: pink;/* 上下设置 20 像素外边距 , 左右自动居中 */margin: 30px auto;}.logo {/* 靠左侧浮动 */float: left;/* 设置与 导航栏盒子 的外边距 */margin-right: 60px;}/* 导航栏设置 左浮动 */.nav {float: left;}/* 导航栏内部 的 无序列表 设置左浮动 */.nav ul li {/* 设置 无序列表项 从左到右排列 */float: left;}/* 设置无序列表中的链接样式 */.nav ul li a {/* 显示模式 块级元素 */display: block;/* 高度 40 像素 , 总高度 42 像素 , 有 2 像素的下边框 */height: 40px;/* 上下内边距 0 像素 , 左右内边距 10 像素 */padding: 0 10px;/* 右外边距 20 像素 */margin-right: 20px;/* 行高 = 内容高度 垂直居中 */line-height: 40px;/* 字体大小 */font-size: 18px;/* 字体颜色 */color: #050505;/* 取消链接下方的横线 */text-decoration: none;/* 调试时使用的背景 */background: skyblue;}/* 鼠标经过链接时的样式 */.nav ul li a:hover {/* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */border-bottom: 2px solid #00a4ff;}
