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>效果图如下：
2、开始写样式，首先清除所有元素的内外边距 *{ padding: 0; margin: 0; }
3、然后给最外面的盒子添加样式，设置导航条高度为50px,设置上下边框样式，代码如下： .gcs-nav{ height: 50px; border-top: 3px solid #FF8500; border-bottom: 1px solid #ccc; margin-top: 20px; padding-left: 100px; }效果图如下：
4、清除li元素前面的小点，并设置左浮动，代码如下： .gcs-nav ul li{ list-style: none; float: left; }效果图如下：
5、给a标签设置颜色，高度，行高，内边距，字体大小，并设置鼠标悬停样式，代码如下： .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; }效果图如下：
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>
