【CSS】课程网站头部制作 ② ( 导航栏测量

2023-04-06 13:01| 来源: 网络整理| 查看: 265

文章目录一、导航栏测量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 链接标签 ;

首页课程职业规划 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 标签结构

完整代码 :

课程网站首页课程职业规划 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; }

【本文地址】

公司简介

联系我们