一个DIV+CSS代码布局的简单导航条

2019-09-09 郑州网站建设  

一个蓝色主题的导航条结构案例,本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: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{bac公斤round:#0095BB}/*设置装备摆设鼠标滑过或悬停时更动的后台颜色*/ 

这里ul和#nav紧贴不有空格,代表#nav只针对ul标签配置,标签只有ul标签应用id=”nav”设置技俩本事收效。以上代码没有在ul外再设置DIV,多么能够华侈一个DIV实现异样构造。

2、HTML代码

<ul id="nav"> 

<li><a href="//www.css5.com.cn/">首页</a></li> 

<li><a href="//www.css5.com.cn/html/">HTML教程</a></li> 

<li><a href="//www.css5.com.cn/css/">CSS基础底细</a></li> 

<li><a href="//www.css5.com.cn/tools/">CSS开荒器材</a></li> 

<li><a href="//www.css5.com.cn/texiao/">CSS特效</a></li> 

<li><a href="//www.css5.com.cn/wenti/">CSS问题</a></li> 

</ul> 

3、造诣截图

CSS+DIV机关容易委琐实用通用导航条在浏览器中造诣截图

4、残缺HTML源代码:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>小小简单小气通用导航条 CSS5实例</title> 

<link href="images/style.css" rel="stylesheet" type="text/css" /> 

<!-- css5.com.cn --> 

</head> 

<body> 

<ul id="nav"> 

<li><a href="//www.css5.com.cn/">首页</a></li> 

<li><a href="//www.css5.com.cn/html/">HTML教程</a></li> 

<li><a href="//www.css5.com.cn/css/">CSS根底</a></li> 

<li><a href="//www.css5.com.cn/tools/">CSS开拓工具</a></li> 

<li><a href="//www.css5.com.cn/texiao/">CSS殊效</a></li> 

<li><a href="//www.css5.com.cn/wenti/">CSS问题</a></li> 

</ul> 

</body> 

</html> 

5、完整CSS源代码:

@charset "utf-8"; 

/* CSS5-CSS初始化源码-css5.com.cn */ 

body, div, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 

/* \5B8B\4F53 代表 宋体,更多中笔墨体转 Unicode //www.css5.com.cn/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 ,.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} 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1507.html转载请标明出处,谢谢合作!
标签:
  • 一个
  • 代码
  • 简单
  • 布局
  • 导航
  • DIV+CSS