How to use DIV and CSS to make a navigation bar
给大家做一个小列子，采用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来实现的，有兴趣的朋友可以深度研究一下。
相关阅读：
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1389
52
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
