CSS如何实现网页导航栏置顶
发布网友
发布时间：2022-04-22 03:12
共4个回答
懂视网
时间：2022-04-28 15:46
本篇文章给大家带来的内容是关于css实现垂直导航栏和水平导航栏的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
垂直导航栏的样式
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
ul {
list-style-type:none;
margin:0;
padding:0;
}
a:link, a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
</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>水平导航栏的样式
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
}
a:link, a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
</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>相关推荐：
css实现类似图片画廊的图片排序（完整代码）
css如何实现水纹扩散的动画效果（纯代码）
热心网友
时间：2022-04-28 12:54
1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none;是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容，可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。
3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏，overflow: hidden;代码的意思是超出高度和宽度的部分自动隐藏，float: left;使导航栏水平显示。
6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
热心网友
时间：2022-04-28 14:12
一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下：
<div class="nav">这里是导航所在的DIV容器。</div>CSS代码：
position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
top:0; /* 距离窗口顶部距离 */
left:0; /* 距离窗口左边的距离 */
width:100%; /* 宽度设置为100% */
height:40px; /* 高度 */
z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
设置方式，原理及大致内容请看css代码注释。
热心网友
时间：2022-04-28 15:47
