霍者博客

网页设计师修炼练习题014

图一 (点击上图查看原始图的原始尺寸)

图二 点击上图查看原始图的原始尺寸

要求:100%还原上图的样子,默认为图一,鼠标划过时,显示图二效果。

知识点:

display:block

 :hover




实现效果代码如下:

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>网页设计师修炼练习题014</title>
<style type="text/css">
*{
color: #333;
text-decoration: none;
font-family: "微软雅黑";
font-size: 12px;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.nav {
line-height: 38px;
height: 38px;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #CCC;
}
.nav ul li {
width: 125px;
float: left;
}
.nav ul li a {
display: block;
text-align: center;
font-size: 14px;
}
.nav ul li a:hover {
background-color: #F94F06;
color: #FFF;
}
</style>
</head>
<body>
<div class="nav">
<ul>
   <li><a href="http://www.huozheweb.com">网站首页</a></li>
    <li><a href="http://www.huozheweb.com">关于我们</a></li>
    <li><a href="http://www.huozheweb.com">产品中心</a></li>
    <li><a href="http://www.huozheweb.com">生产能力</a></li>
    <li><a href="http://www.huozheweb.com">新闻中心</a></li>
    <li><a href="http://www.huozheweb.com">人才招聘</a></li>
    <li><a href="http://www.huozheweb.com">在线留言</a></li>
    <li><a href="http://www.huozheweb.com">联系我们</a></li>
    </ul>
</div>
</body>
</html>

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/435.html,标题:网页设计师修炼练习题014

【我来说两句】
分享到:

相关文章:



评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。