多语言展示
当前在线:771今日阅读:91今日分享:37

用UL+LI+CSS制作横排导航

操作软件:Adobe Dreamweave CS6,通用其他版本。目的:掌握无序列制作横向导航。
工具/原料
1

Adobe Dreamweave CS6

2

CSS

方法/步骤
1

第一步,打开软件Adobe Dreamweave CS6,创建一个新的HTML,如图,

2

第二步,在工作区域(body)用标签 ul 和 li 输入导航的内容,如图,

3

第三,编辑样式CSS。在标签之间写入样式表。如图,

4

第四,紧接上一步。由于无线序列具有默认样式,如图前面的圆点(如图),所以先写去除默认样式的样式。样式为:ul,li { list-style:none; list-style-type:none; padding:0; margin:0;} /*清除ul,li的默认样式*/

5

第五,由于默认的无序列表是竖排的,所以需要为其添加浮动,同时编辑宽度和距离等样式。添加样式为:  ul li { float:left; width:80px; height:30px; background:#900; line-height:30px; text-align:center; margin-right:2px; color:#fff;} 效果如图,

6

第六,如果需要为导航添加链接(如图),同时获得鼠标滑过效果,即需要对 'a'为标签编写样式。样式为:   ul li a { display:block; height:30px; text-decoration:none; color:#fff;} ul li a:hover { background:#999;} 最终预览效果,如图,

7

完整代码:无标题文档 

注意事项

制作横向导航首选

推荐信息