当前位置：网站首页 > 资源显示

html导航菜单，demo1

发布时间：2017/5/2 21:50:33 / 浏览：710

完整代码（代码框可以往下拉高显示）：

<!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">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #999999;
}
body,td,th {
	font-family: "微软雅黑";
	font-size: 13px;
}
.topnav{
	padding-top: 30px;
	float: left;
	height: 58px;
	width: 550px;
	background-color: #FFF;
}
.topnav a{
	font-size: 16px;
	line-height: 28px;
	font-weight: bold;
	color: #777576;
	text-decoration: none;
	display: block;
	float: left;
	height: 28px;
	width: 40px;
	text-align: center;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 0px;
}
.topnav .line{
	background-image: url(images/aline.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	float: left;
	height: 28px;
	width: 3px;
}
.topnav .on,.topnav a:hover{
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #2fae85;
	color: #2fae85;
	text-decoration: none;
}
</style>
</head>
<body>
<div class="topnav">
     <a href="#" class="on">首页</a><div class="line"></div>
     <a href="#">图片</a><div class="line"></div>
     <a href="#">文字</a><div class="line"></div>
     <a href="#">热评</a><div class="line"></div>
     <a href="#">推荐</a><div class="line"></div>
     <a href="#">微圈</a><div class="line"></div>
     <div class="deldf"></div>                        
   </div>
</body>
</html>

附件资源（免费）

您尚未登录，暂时无法查阅资源！立即登录

插播广告区

发表评论

您尚未登录，暂时无法发表评论。立即登录

暂无任何评论

推荐资源更多 >>

付费资源更多 >>

广告区