• 中文
    • English
  • 注册
  • 查看作者
  • 6:CSS模拟百度知道的导航栏

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 百度知道 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			*{
    				margin:0;
    				padding:0;
    			}
    			div {
    			
    				height:40px;
    				 background-color:#76EE00;
    			
    			}
    			li {
    				float:left;
    				width:200px;
    				height:40px;
    				line-height:40px;
    				text-align:center;
    				list-style: none;
    				
    			}
    			
    			a:hover {
    				background-color:#9AFF9A;
    			}
    		
    			a {
    				text-decoration: none;
    				color:#FFFFFF;
    				width:200px;
    				height:40px;
    				font-weight:600;
    				display:block;	
    		
    			}
    			
    			ul {
    				
    				width:1000px;  /* 必须设置具体的宽度,否则margin:0 auto,不生效 */
    				margin:0 auto;
    			 }
    			
    		
    
    		</style>	
    	</head>
    	<body>
    		<div>
    			<ul>
    				<li >
    				
    					<a href="#"> 首页 </a>
    				</li>
    				<li>
    					<a href="#"> 课程 </a>
    				</li>
    				<li>
    					<a href="#"> 论坛 </a>
    				</li>
    				<li>
    					<a href="#"> 博客 </a>
    				</li>
    				<li>
    					<a href="#"> 关于 </a>
    				</li>
    			</ul>
    		</div>
    	</body>
    </html>

    山东省·济宁市
  • 0
  • 0
  • 0
  • 1.4k
  • 十二

    请登录之后再进行评论

    登录
    单栏布局 侧栏位置: