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


<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">
			
    		<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 pageh3>                				 								   										  <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>

返回目录

三、效果

静态效果
CSS实现导航条和导航栏制作以及演示_第1张图片
动态效果
CSS实现导航条和导航栏制作以及演示_第2张图片
返回目录

四、Github链接

https://github.com/k7opi/git
点击

你可能感兴趣的:(CSS)