简单web导航栏

最新推荐文章于 2024-06-18 17:47:58 发布

原创最新推荐文章于 2024-06-18 17:47:58 发布 · 1w 阅读

58 ·

本内容遵循CC 4.0 BY-SA版权协议

Web 专栏收录该内容

2 篇文章

订阅专栏

代码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简单web导航栏</title>
<style type="text/css">
	/*设置整体*/
	*{
		padding: 0;
		margin: 0;
		font-family: "微软雅黑";	
	}
	/*设置header的div区*/
	.header{
		height: 72px ;
    	background: #458fce ;
	}
	/*设置logo的div区*/
	.header .logo{
		color: #fff ;
		font-size: 30px ;
		font-weight:500 ;
    	line-height: 72px ;
    	margin-left: 20px ;
    	display:inline-block ;
    	float: left ;/*左浮动*/
	}
	/*设置li标签里*/
	.header ul li{
		float: left ;
		color: #fff ;
    	display: inline-block ;
    	width: 112px ;
    	height: 72px ; 
    	text-align: center ;
    	line-height:72px ;
    	cursor: pointer ;/*光标显示成小手型*/
	}
	/*细节调整*/
	ul li{
		list-style: none ;/*li的小圆点去掉*/
	}
	.header ul li.first{
		margin-left: 30px ;/*设置“首页”与“原创文字”间距*/
    	background:#74b0e2 ;/*“首页”设置默认背景*/
	}
	
	/*设置a链接标签*/
	a{
		color: #fff ;
    	text-decoration: none ;
	}
	/*设置导航添加hover事件*/
	.header ul li:hover{
		 background:#74b0e2 ;
	}
	/*设置登录、注册按钮*/
	.header .login{
		float: right ; 
    	color: #fff ;
    	line-height: 72px ;
    	margin-right: 20px ;
	}
</style>
</head>
<body>
	<div class="header">
		<div class='logo'>导航栏</div>
		<ul>
			<li class="first"><a href="javascript:void(0)">首页</a></li>
			<li><a href="javascript:void(0)">原创</a></li>
			<li><a href="javascript:void(0)">转载</a></li>
		</ul>
		<div class="login">
		<span><a href="javascript:void(0)">登陆</a></span>  
    	<span>|</span> 
    	<span><a href="javascript:void(0)">注册</a></span>
		</div>
	</div>
</body>
</html>

效果