CSS基础-14-水平导航栏（示例及详细创建过程）

文章目录

1. 内联列表实现
2. 浮动列表实现
3. 添加边框
- 3.1 思路
- 3.2 实际效果
4. 添加分割线
5. 固定导航栏

1. 内联列表实现

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
<style>
ul
{
    /* 不显示列表前的标记 */
	list-style-type:none;
	margin:0;
	padding:0;
}
li
{
  /* 将块元素转变为内联元素 */
  display:inline;
}
</style>
</head>
 
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

效果

2. 浮动列表实现

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world </title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li
{
	float:left;
}
a
{
	display:block;
	padding: 14px 16px;
	text-decoration: none;
 
}
</style>
</head>
 
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

效果

3. 添加边框

3.1 思路

添加整体边框

 ul {
    ……
    background-color: #333;
}

给主页添加一个不同的效果

 .active {
    background-color: #4CAF50;
}

添加鼠标悬停效果，排除首页

 li a:hover:not(.active) {
    background-color: #aaaaaa;
}

3.2 实际效果

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
li {
    float: left;
}
 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
li a:hover:not(.active) {
    background-color: #aaaaaa;
}
 
.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
 
<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

效果

4. 添加分割线

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
li {
    float: left;
    /* 右侧添加一个边框 */
    border-right:1px solid #bbb;
}
/* 最后一个li不添加右边框 */
li:last-child {
    border-right: none;
}
 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
li a:hover:not(.active) {
    background-color: #dddddd;
}
 
.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
 
<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

效果

5. 固定导航栏

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style>
body {margin:0;}
 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    /* 固定导航栏 */
    position: fixed;
    top: 0;
    width: 100%;
}
 
li {
    float: left;
}
 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
li a:hover:not(.active) {
    background-color: #dddddd;
}
 
.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
 
<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
 
<h2>标题</h2>
 
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
 
</body>
</html>

效果

posted on 2022-04-26 22:42 运维开发玄德公阅读(84) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS基础-13-垂直导航栏（详细创建过程）

· CSS基础-18-表单示例

· 制作导航栏并用CSS美化

· CSS——导航栏

· 静态页面的导航栏制作

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

CSS基础-14-水平导航栏（示例及详细创建过程）

文章目录

1. 内联列表实现

2. 浮动列表实现

3. 添加边框

3.1 思路

3.2 实际效果

4. 添加分割线

5. 固定导航栏

导航

统计

合集

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>hello world</title>
	<style>
	ul
	{
	/* 不显示列表前的标记 */
	list-style-type:none;
	margin:0;
	padding:0;
	}
	li
	{
	/* 将块元素转变为内联元素 */
	display:inline;
	}
	</style>
	</head>

	<body>
	<ul>
	<li><a href="#home">主页</a></li>
	<li><a href="#news">新闻</a></li>
	<li><a href="#contact">联系</a></li>
	<li><a href="#about">关于</a></li>
	</ul>

	</body>
	</html>