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

最新推荐文章于 2022-12-02 20:20:38 发布

escdelete

最新推荐文章于 2022-12-02 20:20:38 发布

阅读量646

点赞数

分类专栏： HTML、CSS、javascript

本文链接：https://blog.csdn.net/escdelete/article/details/17058523

版权

HTML、CSS、javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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); 
}

效果如下图所示：

escdelete

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单实用的DIV+CSS布局的联系小功能

html代码联系小功能能 EvPNG.fix('div, ul, img, li, input, a, span'); 首页联系我们建站流程建站套餐 CSS代码：*{ margin:0; pa
复制链接

扫一扫