css如何制作类似新浪网的水平导航栏
1、写html,首先添加一个大的div盒子，在里面放一个ul列表，li里面放a标签，用来放菜单内容，代码如下： <div class="gcs-nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻客户端</a></li> <li><a href="#">手机</a></li> <li><a href="#">财经频道</a></li> </ul> </div>效果图如下：
4、清除li元素前面的小点，并设置左浮动，代码如下： .gcs-nav ul li{ list-style: none; float: left; }效果图如下：
6、最后，放上完整的源代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .gcs-nav{ height: 50px; border-top: 3px solid #FF8500; border-bottom: 1px solid #ccc;margin-top: 20px; padding-left: 100px; } .gcs-nav ul li{ list-style: none; float: left; } .gcs-nav a{ text-decoration: none; color: #4c4c4c; display: inline-block;height: 50px; line-height: 50px; padding:0 20px; font-size: 14px; } .gcs-nav a:hover{ color: #ff8400; background: #edeef0; background: lightgray; } </style> </head> <body> <div class="gcs-nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻客户端</a></li> <li><a href="#">手机</a></li> <li><a href="#">财经频道</a></li></ul> </div> </body></html>