一个简单实用的DIV+CSS布局的联系小功能

webdev2014

浏览: 699684 次

最近访客更多访客>>

u012363178

仙丹灵药

hellodota

WIN2333

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1653)

社区版块

存档分类

2014-04 ( 64)
2014-03 ( 97)
2014-02 ( 113)
更多存档...

html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>联系小功能能</title> 
<link href="css/contact.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=""></script>
<!--[if IE 6]>
<script src="" type="text/javascript"></script>
<script type="text/javascript">
   EvPNG.fix('div, ul, img, li, input, a, span'); 
</script>
<![endif]-->
</head>
<body>
<div class="top_daohang">
		<ul>
				<li>
					<a href="#" title="提示一" class="topindex">首页</a>
				</li>
				<li>
					<a href="#" title="提示二" class="toplx">联系我们</a>
				</li>
				<li>
					<a href="#"  title="提示三" target="_blank"  class="toplc">建站流程</a>
				</li>
				<li>
					<a href="#"  title="提示四" class="toptc">建站套餐</a>
				</li>
		</ul>
</div>
</body>
</html>

CSS代码：

*{
	margin:0;
	padding:0;
}
body{
	background:none repeat scroll 0 0 #FFFFFF;
	color:#444444;
	font-family:'宋体',arial,sans-serif;
	font-size:12px;
}
.top_daohang{
	border-bottom:1px solid #F1D2C3;
	border-left:1px solid #F1D2C3;
	border-radius:0 0 0 10px;
	overflow:hidden;
	position:absolute;
	right:0;
	text-align:right;
	top:6px;
	width:404px;
	z-index:1000;
}
.top_daohang ul li{
	float:right;
	overflow:hidden;
}
.top_daohang li a{
	background-color:#F6F6F6;
	display:inline-block;
	font-size:13px;
	height:22px;
	line-height:22px;
	opacity:0.5;
	padding-left:35px;
	padding-right:20px;
}
.top_daohang li a:hover{
	color:#000000;
	opacity:1;
	transition:color 0.25s linear 0.1s;
}
.topindex{
	background:url("images/Home.gif") no-repeat scroll 14px center rgba(0,0,0,0);
	font-weight:bold;
}
.toplx{
	background:url("images/com.gif") no-repeat scroll 14px center rgba(0,0,0,0);
}
.toplc{
	background:url("images/lc.gif") no-repeat scroll 14px center rgba(0,0,0,0);
}
.toptc{
	background:url("images/tc.gif") no-repeat scroll 14px center rgba(0,0,0,0); 
}

效果如下图所示：