一个蓝色主题的导航条结构案例，本CSS小实例，采取DIV CSS实现。同时不必图片做靠山，直接运用布景致完成，鼠标经由过程悬停对应栏目称说是对应背景蓝色变深。
导航条一小块成就截图
通常导航条接纳ul li列表布局，这里也不破例CSS5实例也采用列表标签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设置宽度高度等款式收效。
详细结构高度、颜色值、栏目间距隔绝距离均重要通过软件得到(置信参预CSS5培训同学都能应用软件失去粗略稳重的花色值)
二、详细案例div css代码
在引人CSS5初始化模板根本前途行案例代码组织。
新增各代码如下：
1、CSS代码：
ul#nav{width:100%;height:60px;bac公斤round:#00A2CA;margin:0auto}
ul#navli{display:inline;height:60px}
ul#navlia{display:inline-block;padding:020px;height:60px;line-height:60px; color:#FFF;font-family:"\5FAE\8F6F\96C5\9ED1";font-size:16px}
ul#navlia:hover{bac公斤round:#0095BB}/*设置装备摆设鼠标滑过或悬停时更动的后台色彩*/
这里ul和#nav紧贴不有空格，代表#nav只针对ul标签配置，标签只有ul标签应用id=”nav”设置技俩本事收效。以上代码没有在ul外再设置DIV，多么能够华侈一个DIV实现异样构造。
2、HTML代码
首页HTML教程CSS基础底细CSS开荒器材CSS特效CSS问题
3、造诣截图
CSS+DIV机关容易委琐实用通用导航条在浏览器中造诣截图
4、残缺HTML源代码：
html>
小小简单小气通用导航条CSS5实例首页HTML教程CSS根底CSS开拓工具CSS殊效CSS问题
5、完整CSS源代码：
@charset"utf-8";
/*CSS5-CSS初始化模板-*/
body,div,ul,li{margin:0;padding:0;font-style:normal;font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif}
/*\5B8B\4F53代表宋体，更多中笔墨体转Unicode///jiqiao/325.shtml*/
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,.reda{color:#F00}
.lan,.lana{color:#1E51A2}
.pd5{padding-top:5px}
.dis{display:block}
.undis{display:none}
ul#nav{width:100%;height:60px;background:#00A2CA;margin:0auto}
ul#navli{display:inline;height:60px}
ul#navlia{display:inline-block;padding:020px;height:60px;line-height:60px; color:#FFF;font-family:"\5FAE\8F6F\96C5\9ED1";font-size:16px}
ul#navlia:hover{bac千克round:#0095BB}
