diiv标签怎样居中导航条

 时间:2024-10-27 16:38:28

1、新建HTML页面打开Dreamweaver CS6,新建一个HTML页面文件,保存在桌面。如图:

diiv标签怎样居中导航条

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>如图:

diiv标签怎样居中导航条

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>如图:

diiv标签怎样居中导航条

4、调整代码,对齐样式使代码更清楚,更容易查找,按照级缩进式缩进代码,方便些注释和修改。如图:

diiv标签怎样居中导航条

5、演示在浏览器打开网页,演示效果。如图:

diiv标签怎样居中导航条

6、总结导航条一般使用li标签分条,并将li的样式取消,重新在CSS里布局。

diiv标签怎样居中导航条
  • 如何结合Hbuilder使用Chrome浏览器?
  • CSS text-shadow 属性怎么使用
  • div+css让一个小div在另一个大div里面垂直居中
  • 怎么让两个div在同一行
  • 怎么用js改变div里面的图片大小
  • 热门搜索
    震惊的近义词 机灵的近义词 轻盈的近义词 拘束的近义词 头发怎么变直 韩国电话怎么打 齐肩短发发型图片 小孩吐是怎么回事 怎么删除输入法 电表怎么看度数图解