文章目录

• 一、 导航栏测量
• • 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;

}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！