div+css制作网页导航栏：效果如下图
方式一：
<!DOCTYPE>
<html>
<head>
<title>网页导航条制作</title>
<style type="text/css">
ul#nav{
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul#nav li{
float: left;
margin: 0px 2px;
padding: 0px;
}
ul#nav li a{
display: block; /*允许在一个元素上设置宽度和高度*/
width: 100px;
height: 28px;
line-height: 28px;
background-color: #ccc;
text-decoration: none;
text-align: center;
}
ul#nav li a:hover{
color: #fff;
background-color: #333;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.sina.com.cn">新浪</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.google.com.sg">Google</a></li>
<li><a href="http://www.duckduckgo.com">DuckDuckGO</a></li>
</ul>
</body>
</html>
方式二：
<style type="text/css">
ul#nav{
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul#nav li{
display: inline;
}
ul#nav li a{
padding: 5px 20px;
margin: 0px 2px;
border: 1px solid #666;
background-color: #ccc;
text-decoration: none;
text-align: center;
}
ul#nav li a:hover{
background-color: #333;
color: #fff;
}
</style>
- 大小: 2.6 KB
分享到：
相关推荐
在制作导航栏时，我们可以使用`<nav>`标签来定义导航区域。然后，通过`<ul>`和`<li>`标签创建无序列表，每个`<li>`代表一个导航链接。为了让导航栏更美观，可以添加CSS（Cascading Style Sheets）样式，比如设置背景...
兼容IE6浏览器的div+css+js制作的简单漂亮的导航条
### Photoshop制作网页导航条知识点详解 #### 一、概述 对于初学者而言，网页导航条的设计不仅是提升网页视觉效果的关键，也是展现个人设计能力的重要环节。本教程将详细介绍如何使用Adobe Photoshop软件，从零开始...
网页制作中的FLASH导航条是提升用户体验和网站美观度的重要元素之一。这些源码集合，如"navi19"、"navi16"、"navi06"等，提供了丰富的选择，使得设计师能够根据自己的需求和网站风格，定制出独特且吸引人的导航条。 ...
1. **基础样式导航条**：最简单的导航条，通常包含水平排列的链接，可以通过添加背景色、边框和hover效果来增强视觉吸引力。 2. **下拉菜单**：这种菜单在鼠标悬停时显示子菜单，常用于多级导航。可以使用CSS的`:...
【横向导航栏】是网页设计中的重要组成部分，它通常位于页面顶部，用于引导用户访问网站的主要部分。在“js+css经典横向导航栏”中，我们主要探讨的是如何结合JavaScript和CSS来创建一个功能丰富、视觉效果良好的...
"CSS精美导航条制作软件"正是一款专为创建美观、功能强大的导航条而设计的工具。这款软件允许用户通过简单的界面和预设的CSS样式来定制自己的导航条，无需深入理解复杂的CSS语法。 CSS（Cascading Style Sheets）是...
1. **菜单_001_zip**: 这个菜单可能是一个基础的水平导航条，利用浮动布局和定位技术，将链接元素水平排列，同时通过CSS实现鼠标悬停时的动态效果，增强用户体验。 2. **menu_002_zip**: 可能包含一个下拉菜单设计...
对于QQ登录导航，我们可能希望让链接水平排列。可以为`<li>`元素设置浮动： ```css nav ul li { float: left; } ``` 同时，为了清除浮动，防止父元素因子元素浮动而高度塌陷，可以添加一个清浮动的元素或者使用...
总之，春天网页菜单是一款为网页设计师量身定制的实用工具，它通过直观的界面和丰富的功能，大大降低了制作高质量导航菜单的难度，让网页开发变得更加高效和愉快。无论你是经验丰富的开发者还是初学者，都可以借助这...
4. 实例分析：压缩包中的源代码可能包含多个章节的实例，每个实例可能涵盖不同的主题，如导航栏、下拉菜单、轮播图、响应式设计等。通过分析这些代码，学习者可以了解如何将HTML、CSS和JavaScript结合，创建出功能...
在网页设计中，导航条和菜单是至关重要的组成部分，它们为用户提供了一种直观的方式来浏览网站内容。本资源“CSS精品菜单 导航条 css制作 代码”专注于使用CSS（层叠样式表）来创建优雅且功能强大的导航元素。下面...
一个标准的导航栏通常包括首页、产品、服务、关于我们、联系我们等链接，这些链接以水平排列的方式展示，有时还会包含下拉菜单或者滑动效果。在CSS中，我们可以定义导航栏的样式，如背景色、字体颜色、边框等，以使...
顶部导航栏和底部区域均采用100%宽度的设计，保证了页面的一致性和完整性。此外，该系列网页还包括以下特征： 1. **页面结构明确**：整个网站被划分为页头、菜单导航栏、中间内容区和页脚四个主要部分。 2. **页面...
硕思闪客菜单是一款功能强大且易用的flash导航条制作工具，本文将指导用户如何使用硕思闪客菜单制作flash导航条，包括创建完全自定义的flash导航条、添加子菜单项、发布flash导航条等步骤。 一、创建完全自定义的...
该过程包括掌握超链接的创办方法、超链接的属性设置方法、图像地图的使用方法、导航栏的使用方法等内容。 通过学习网页设计及制作，可以掌握 FrontPage2000 等工具的使用方法，设计和制作网页的技能，对于网站的...
上下导航栏菜单作为网页设计中的关键元素，能够帮助用户轻松地在网站的各个部分之间导航。本主题将深入探讨如何使用JavaScript编写各种上下导航栏菜单效果，以及它们在实际应用中的重要性。 一、JavaScript基础 在...
在网页设计中，导航条是不可或缺的元素，它帮助用户快速定位并访问网站的不同部分。本文将详细讲解如何使用Flash技术来...通过熟练掌握这些技能，你可以制作出富有吸引力和互动性的网页导航条，提升网站的用户体验。