本文介绍了一种使用CSS进行网页导航栏设计的方法,通过浮动布局和伪类实现鼠标悬停效果。文章详细解释了如何设置导航栏的高度、背景颜色及文字样式等。
*{ margin:0; font-size:14px;}
ul{ list-style:none; height:50px; border-bottom:5px solid #000}
li{ float:left; margin-top:20px;}
a{ text-decoration:none; display:block; height:30px; line-height:30px; width:100px; background-color:#CCC; margin-bottom:1px; color:#000; text-align:center;}
a:hover{ background-color:#F30; color:#FFF; margin-top:-10px; height:40px; line-height:40px;}
</style>
<body>
<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>
</ul>
</body>
扫一扫
1847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
