先看效果
仿的@
下面看html的代码
<!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>ul菜单</title>
<style type="text/css">
.one{width:860px; height:30px; background-color:#b7151c;}/*设置大的DIV的背景颜色,宽度,高度*/
.one a{
display:block; /*设置A为块状*/
text-decoration:none; /*去除A的下划线*/
line-height:30px; /*设置A的行高*/
padding:0 10px 0 10px; /*设置padding,上下为0,左右为10PX*/
color:#FFF; /*设置A连接的字体为白色*/
font-weight:bold; /*设置A的字体为粗体*/
}
.one a:hover{backgrount-color:#990005; background-color:#990005;} /*鼠标经过的背景色为红色*/
.one ul{ list-style:none;} /*去除UL前面的点*/
.one li{ float:left;} /*让LI靠左浮动*/
</style>
</head>
<body>
<div class="one">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">业界</a></li>
<li><a href="#">云计算</a></li>
<li><a href="#">移动</a></li>
<li><a href="#">研发</a></li>
<li><a href="#">程序员杂志</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">下载</a></li>
</ul>
</div>
</body>
</html>