Home >Web Front-end >HTML Tutorial >How to use DIV and CSS to make a navigation bar

How to use DIV and CSS to make a navigation bar

php中世界最好的语言
php中世界最好的语言Original
2017-11-21 10:25:353267browse

给大家做一个小列子,采用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.php.cn/">首页</a></li> 
<li><a href="http://www.php.cn/">HTML教程</a></li> 
<li><a href="http://www.php.cn/">CSS基础</a></li> 
<li><a href="http://www.php.cn/">CSS开发工具</a></li> 
<li><a href="http://www.php.cn/">CSS特效</a></li> 
<li><a href="http://www.php.cn/">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写虚线边框

The above is the detailed content of How to use DIV and CSS to make a navigation bar. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn