仿写京东导航条效果

时间：5年前阅读：4228

我想，大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计。这些导航条基本上来说都是用CSS来做的。下面我们将仿写京东导航条效果用CSS设计的网站导航条。希望你会喜欢。

1、直接上代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>无标题文档</title>    
<style type="text/css">    
*{    
	padding: 0;    
	margin: 0;    
}    
	#daohang{    
		width: 630px;    
		height: 40px;    
		margin: 20px auto;    
	}    
	#daohang a{    
		font-size: 15px;    
		text-decoration: none;    
		font-family: 微软雅黑;    
		color: white;    
		background: #E23E3F;    
		display: block;    
		width: 85px;    
		height: 40px;    
		/*字体加粗*/    
		font-weight: 700;    
		/*文字排整齐方式，水平居中*/    
		text-align: center;    
		/*行高 垂直居中*/    
		line-height: 40px;    
		/*浮动：左浮动*/    
		float: left;    
	}    
	/*鼠标移动到的伪类选择器*/    
	#daohang a:hover{    
		background: #A00101;    
	}    
	#daohang a.di1{    
		background: #A00101;    
	}    
	</style>    
</head>    
<body>    
<p id="daohang">    
<a href="" class="di1">首页</a>    
<a href="">服装城</a>    
<a href="">食品</a>    
<a href="">团购</a>    
<a href="">夺宝岛</a>    
<a href="">闪购</a>    
<a href="">金融</a>    
</p>    
</body>    
</html>

上面代码效果静态图片展示（动态的效果自已下载代码去试）

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

仿写京东导航条效果

网友评论