如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
diiv标签怎样居中导航条
来源：互联网
2023-03-16 19:15:31 289
网页设计中，通常都要求水平居中，垂直居中，这样看起来美观，也符合网页设计的基本要求，那如何实现导航条的居中呢？
用HTML5 CSS3即可实现，请看详细经验。
工具/原料
- Dreamweaver CS6，计算机
- html5，css3
方法/步骤
1、新建HTML页面
打开Dreamweaver CS6，新建一个HTML页面文件，保存在桌面。
如图：
2、输入HTML代码，在页面显示
在HTML代码中，输入想要显示的代码，如：
div class="menu"> !-- class选择器 -->
div class="nav">
ul> !-- ul标签 -->
li>a href="#">导航1/a>/li> !-- li标签 -->
li>a href="#">导航2/a>/li>
li>a href="#">导航3/a>/li>
li>a href="#">导航4/a>/li>
li>a href="#">导航5/a>/li>
/ul>
/div>
/div>
如图：
3、编写CSS控制
在head便签之内，写入CSS控制：
style>
body
{
text-align:center; /* 文字居中 */
}
ul
{
list-style-type:none; /* ul前面的点 */
}
*
{
margin:0px 0px; /* 到边框的距离 */
}
.menu
{
background: #029789; /* 导航条背景的颜色 */
}
.nav
{
margin:0 auto; /* 导航栏文字的位置 */
width:800px; /* 和文字宽度有关，不能小于文字宽度的总和 */
height:80px; /* 导航栏的宽度 */
}
.nav a
{
float:left; /* 导航栏的位置配置 */
width:140px; /* 选中的文字块的长度 */
line-height:80px; /* 选中的文字块的宽度 */
text-decoration: none; /* 去掉连接下划线 */
font-size:45px; /* 字体大小 */
color: #FFFFFF; /* 字体颜色 */
}
.nav li a:hover
{
background-color: #1094f2; /* 选中的文字块的颜色 */
text-decoration:none; /* 选中时去掉连接下划线 */
}
.nav li a:link{
text-decoration:none; /* 连接被点之后没有下划线 */
}
/style>
如图：
4、调整代码，对齐样式
使代码更清楚，更容易查找，按照级缩进式缩进代码，方便些注释和修改。
如图：
5、演示
在浏览器打开网页，演示效果。
如图：
6、总结
导航条一般使用li标签分条，并将li的样式取消，重新在CSS里布局。
注意事项
- 原创不易，感谢支持！
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：如何在javascript里定义变量 下一篇：如何在HTML里添加视频
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 437 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)