怎样用DIV和CSS做导航条

一般导航条采用ul li列表布局，这里也不例外，也采用列表标签ul li + CSS布局。

在实际DIV+CSS布局项目中，一般不会只使用一次ul li列表，避免干扰其他地方使用ul li布局，避免对ul li设置样式影响其他地方，所以特地这里对ul设置一个#nav命名（一般导航条以nav或menu为CSS命名，这里选择nav），假如导航条背景宽度100%全屏或固定宽度均可，这里就由ul#nav控制，这里就设置100%全屏宽度蓝色背景。

这里一个技术点，对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排，从而让li并排布局。

然后需要对ul li里的a标签设置display:block的，但a父级li不设置具体宽度，所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。

具体布局高度、颜色值、栏目间距距离均需要通过软件获得

具体案例p css代码

在引人初始化模板基础上进行案例代码布局。

新增各代码如下：

CSS代码：

ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} ul#nav li{display:inline; height:60px} ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px; color:#FFF; font-family: /5FAE/8F6F/96C5/9ED1 font-size:16px} ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/

这里ul和#nav紧贴没有空格，代表#nav只针对ul标签设置，标签只有ul标签使用id=”nav”设置样式才能生效。

以上代码没有在ul外再设置DIV，这样可以节约一个DIV实现同样布局。

HTML代码

 ul id= nav  li a href= http://www.php.com/ 首页 /a /li  li a href= http://www.php.com/html/ HTML教程 /a /li  li a href= http://www.php.com/rumen/ CSS基础 /a /li  li a href= http://www.php.com/css-tool/ CSS开发工具 /a /li  li a href= http://www.php.com/css-texiao/ CSS特效 /a /li  li a href= http://www.php.com/wenji/ CSS问题 /a /li  /ul 

完整HTML源代码：

 !DOCTYPE html  html  head  meta charset= utf-8 /  title 小小简单大方通用导航条 /title  link href= images/style.css rel= stylesheet type= text/css /  /head  body  ul id= nav  li a href= http://www.VeVb.com/ 首页 /a /li  li a href= http://www.VeVb.com/ HTML教程 /a /li  li a href= http://www.VeVb.com/ CSS基础 /a /li  li a href= http://www.VeVb.com/ CSS开发工具 /a /li  li a href= http://www.VeVb.com/ CSS特效 /a /li  li a href= http://www.VeVb.com/ CSS问题 /a /li  /ul  /body  /html 

完整CSS源代码：

@charset utf-8 body, p, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px /5B8B/4F53 ,Arial, Helvetica, sans-serif} /* /5B8B/4F53 代表 宋体 */ ol, ul ,li{list-style:none} img {border: 0; vertical-align:middle} body{color:#000000;background:#FFF; text-align:center} .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px} a{color:#000000;text-decoration:none} a:hover{color:#BA2636} .red ,.red a{ color:#F00} .lan ,.lan a{ color:#1E51A2} .pd5{ padding-top:5px} .dis{display:block} .undis{display:none} ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} ul#nav li{display:inline; height:60px} ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px; color:#FFF; font-family: /5FAE/8F6F/96C5/9ED1 font-size:16px} ul#nav li a:hover{background:#0095BB}

这样就是一份完整的导航条了，用我们的CSS和DIV来实现的，有兴趣的朋友可以深度研究一下。

相关阅读：

HTML里的checkbo怎么使用

链接样式怎么用CSS设置

怎么用css写虚线边框

以上就是怎样用DIV和CSS做导航条的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。