怎么用DIV+CSS代码实现简单导航条

2024-04-02 19:04:59 886人浏览薄情痞子

摘要

这篇“怎么用DIV+CSS代码实现简单导航条”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“

这篇“怎么用DIV+CSS代码实现简单导航条”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么用DIV+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";  body, div, ul, li{margin:0; padding:0;font-style: nORMal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}  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{bac千克round:#0095BB}

以上就是关于“怎么用DIV+CSS代码实现简单导航条”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网JavaScript频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 怎么用DIV+CSS代码实现简单导航条

本文链接: https://www.lsjlt.com/news/91131.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341