CSS实现导航条和导航栏制作以及演示

最新推荐文章于 2025-07-24 10:28:31 发布

k7opi

最新推荐文章于 2025-07-24 10:28:31 发布

阅读量855

点赞数 4

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_44721908/article/details/96882202

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用CSS实现固定顶部导航栏和左侧导航栏的实例。通过浮动、定位等属性，确保了导航栏在页面滚动时的位置不变，并巧妙地隐藏了滚动条。

目录
1、css文件
 2、主页
 3、效果
 4、Github链接

一、CSS文件

123.css

@charset "utf-8";
/* CSS Document */
.top {
    float: left;
    width: 100%;    
    max-width: 900px;   
    min-width: 800px;
    }
.top ul {    
    width: 100%;    
    list-style-type: none;    
    display: inline-block;    
    background-color: #333;    
    }
.top li {    
    float:left;
    }
.top li a {
    width: 120px;    
    display: block;    
    color: white;    
    text-align: center;    
    padding: 14px 16px;    
    text-decoration: none;
    } 
    /*鼠标移动到选项上修改背景颜色 */
.top li a:hover {    
    background-color: #111;
    }
.top ul {
    position: fixed;    
    top: 0;    
    width: 100%;
    }
.dh {
    list-style-type: none;    
    margin: 0;    
    padding: 0;     
    width: 173px;    
    background-color: antiquewhite;    
    height: 100%; /* 使导航栏全屏高度 */    
    position: fixed;     
    top: 100px;    
    float: left;    
    }
.dh li {
    text-align: center;
    }
.dh li a {
    display: block;    
    width: 140px;    
    padding: 16px;    
    color: #000;    
    text-decoration: none;
    }
.dh li a:hover {
    background-color: #555;    
    color: white;
    }
.active {
    background-color: #4CAF50;    
    color: white;
    }
.text {
    position: fixed;    
    height: 630px;    
    width: 1000px;    
    margin-top: 100px;    
    margin-left: 173px;     
    padding-top: 10px;    
    padding-left: 30px;    
    overflow: hidden;
    }
/*隐藏滚动条*/
.text1 {    
	overflow-y: scroll;/*隐藏超过高度的文字，且用滚动的方式显示隐藏的文字*/    
	height: 630px;    
	width: 1017px; /*子块比父块宽17px可以达到隐藏滚动条的效果（滚动条宽17px）*/
	}

返回目录

二、主页

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>首页</title>    
    <link href="123.css" rel="stylesheet" type="text/css" >
</head>
<body>
    <div class="top">
    	<ul>
    		<li><a href="index.html">首页</a></li>
    		<li><a href="usercenter.html">用户中心</a></li>
    		<li><a href="news.html">最新动态</a></li>
    		<li><a href="about.html">关于网站</a></li>
    		<li><a href="talk.html">联系我们</a></li>
    		<li><a href="map.html" style="float:right">网站地图</a></li>
    	</ul>
    </div>
    <div>
    	<ul class="dh">
			<!--这里用active来确定哪个被选中-->
    		<li><a href="index.html" class="active">首页</a></li>
    		<li><a href="usercenter.html">用户中心</a></li>
    		<li><a href="news.html">最新动态</a></li>
    		<li><a href="about.html">关于网站</a></li>
    		<li><a href="talk.html">联系我们</a></li>
    		<li><a href="map.html">网站地图</a></li>
    	</ul>
    </div>
    <div class="text">
    	<div class="text1">
    	<h2>首页</h2>
    	<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>                				 								   										  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
    	<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>                		         																			<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	<p>Some text..</p>
    	</div>
    </div>
    </body>
    </html>