大家好，又见面了，我是你们的朋友全栈君。
制作成品模型图：
代码：
一、写代码前需要准备的：
万事先写（css）结构，把结构搭建好再开始写（css）样式；制作导航条一般需要用到<ul><li></li><ul>标签结构
二、知识点：
1、ul是块级元素所以在进行水平居中时用的是margin:0 auoto; text-align:center;水平居中作用于行内元素。
2、overflow: hidden;用于解决高度塌陷，高度塌陷指的是没有了高。
3、增加白色边框时增加了1px，所以宽度增加了8px，之前的960px变成了968px，只有在每个自己的内部减个1px才行
即每个.nav ul li a的宽度由之前的120px变成了119px。
4、.nav ul li a:hover 鼠标滑过超链接时的状态显示。
5、.nav ul li.last li和last之间的点没有空格，这个运用到了权重值的知识点，如果写.list权重值小于.nav ul li
即10<12是无法优先显示的，所以加了在.list前加了.nav ul li以权重值更大优先作用让最后一个白色边框条消失。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/154988.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...