CSS-制作菜单导航栏
时间：2023-09-09 21:36:01 | 来源：网站运营
时间：2023-09-09 21:36:01 来源：网站运营
CSS-制作菜单导航栏：首先看一下效果图
接下来就跟着我一步一步的用CSS来实现这样的效果。（采用外联式）
在本地创建一个文件夹 resume 然后创建一个HTML网页文件（index.html），将以下的内容写入，
因为要制作一个菜单导航栏，于是给<div>标签赋值“topNavBar”，同理，也为左侧的logo赋值，效果如图
非常普通（简陋）的HTML展示，接下来就开始一步一步的做。
制作导航栏
第一步：先将导航栏的内容横向排列，这里用到“浮动”
<li style= "float: left;">对每一个&lt;li&gt;标签都进行浮动（为了代码易懂，先使用内联式CSS）效果图第二步：浮动之后发现内容和无序列表的小圆点重叠了，于是需要改变列表样式
<ul style="list-style: none;">效果图 小圆点消失了第三步：这个时候发现列表前有一块空白，这是因为除了<div><span>标签外，所有的标签都有浏览器默认样式，这个时候就需要用的开发者工具来查询一下默认样式的数值，方便我们去改动。
①F12；②选中&lt;ul&gt;；③查看默认样式数值<ul style="list-style: none;margin: 0;padding: 0;">效果图 空白消失了 第四步：当用到“浮动”后，需要写一个类，并加一个伪类，首先给所有“浮动”元素的父系标签内加一个类
<ul style="list-style: none;margin: 0;padding: 0;" class="clearfix">然后在CSS外部链接表内加一个伪类
<!--重点：使用“浮动”有三步：
- 给所有“浮动”元素使用 "float: left;"
- 给“浮动”元素的父系元素添加一个类" class="clearfix" "
- 给clearfix类添加一个伪类（上图所示）
第五步：整理一下CSS样式，将之前的内敛样式全部放入外部链接表（style.css）中
效果图第六步：使用工具测量一下样例中字体的像素大小（没有工具，可以使用截图功能）
得到高度为10px再使用取色工具得到字体的颜色（没有工具，依然可以使用截图功能，不过这里可以推荐一个很小的工具：ColorPix）
可以看到左边对应的颜色编号由于是一个<a>标签链接，所以默认会带有链接下划线，这时需要做一个取消下划线处理
text-decoration: none;CSS样式效果图第六步：所有的内容都黏在一起，我们需要把它分开，这个时候需要去原网站上测量一下字间距
宽度为36px所以在标签左右两侧各加一个外边距，并且字体加粗
li{margin-left: 18px;margin-right: 18px;}a{font-weight: bold;}效果图第七步：到这一步时，logo和导航栏处于上下关系，如果要把它们横向摆放呢？
没错，还是“浮动”
1.给所有浮动元素加float2.给父系元素加clearfix3.加入伪类（重复则不需要添加）效果图第八步：可以看到原网站中导航栏，当鼠标悬停时，会有一个横杠动画，下面来完成这一步
a:hover{ border:4px solid #E8676B;}:hover 就是鼠标悬停，给其加了一个边框，但是当鼠标悬停时，发现标签会动，因为边框有默认的宽度，所以在其一开始就加入一个边框并透明即可
a{ border: 4px solid transparent;}原网站中只有下划线，于是各加一个bottom
border-bottom: 4px solid transparent;border-bottom: 4px solid #E8676B;又发现下划线紧贴着导航框，于是给<a>标签加一个上下的内边距
padding-top: 10px;padding-bottom: 10px;使用F12查到<li>和<a>标签的高度不同，于是
a{display: block;}制作LOGO
第一步：测量logo的大小，并查找字体，取色，取消空格
效果图第二步：测量上边距离，两边形成水平
F12查看标签高度 增加内边距
第三步：整体下移
第四步：body默认外边距删掉
第五步：上下左右边距补充
上右下左
OK 制作完成！来看看效果图
在线咨询
