css+div做图片中的导航条的方法：
思路：对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排，从而让li并排布局。然后需要对ul li里的a标签设置display:block的，但a父级li不设置具体宽度，所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。
1、CSS代码：
ul#nav{ width:100% height:60px background:#00A2CAmargin:0 auto}
ul#nav li{display:inline height:60px}
ul#nav li a{display:inline-block padding:0 20px height:60px line-height:60px
color:#FFF font-family:"\5FAE\8F6F\96C5\9ED1" font-size:16px}
ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/
2、HTML代码
<ul id="nav">
<li><a href="http://www.xxx.com/">首页</a></li>
<li><a href="http://www.xxx.com/html/">HTML教程</a></li>
<li><a href="http://www.xxx.com/rumen/">CSS基础</a></li>
<li><a href="http://www.xxx.com/css-tool/">CSS开发工具</a></li>
<li><a href="http://www.xxx.com/css-texiao/">CSS特效</a></li>
<li><a href="http://www.xxx.com/wenji/">CSS问题</a></li>
</ul>
3、效果截图
是，有些图片是挺有难度滴，这个需要慢慢体会，去练习，CSS不会这个还好说点，找个教程看看就会了，但是PS这个东西，你看再多的教程如果自己不动手也是不行滴，审美观是需要慢慢培养滴，所以呢，静下心来，慢慢做，相信就可以，不相信就不可以。祝你好运置顶的优点1.减少跳出率：如果是从搜寻引擎而来的访客，对我们网站不熟，文章读完、资料找到后，没有个吸引注意力的设计，通常就直接离开了。那么如果浮动导览列恰巧有个访客有兴趣的主题，就有机会留住这位客人了。
2.随时提供导航：不是每个上网的人都很熟悉网站的构造、摆设位置等，那么这个浮动导览列只要项目设计得好，就能让这位迷途羔羊的网路生手有一个很好的重点指引。
3.节省操作：导览列置顶可以省去按「回到顶端」这个按钮，网页可以少安装、执行一个区块，而且「回到顶端」按钮有时会遮住一些文字。
实现方法导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种，这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现
注意：dispaly:fixed；会使元素脱离文档，不占据文档空间。所以页面会有一些跳动，这时可以给相邻元素加上nav所占高度的margin-top或padding-top即可
（1）“导航栏下拉至一定高度后固定在顶部的特效”，也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码：
将这个js放到要实现效果的页面里面去，然后我们要修改的是第三行的.nav，“nav“改成你自己页面导航栏的class；第七行的”100“为下拉到100个像素的时候触发特效，可以自行修改至合适的高度。
（2）然后在css文件里面增加这个属性：
这样就差不多完成了。
讲下这个js的意思，判断下拉到一定高度的时候，给导航栏的div插入一个”fixednav“属性，然后给”fixednav“加上固定在顶部的参数。
