DIV+CSS导航学习笔记
本文共 4386 字，大约阅读时间需要 14 分钟。
学习简单导航制作，常见导航有如下样式：
- w3school导航
- 网易首页导航
以上两种分别可以用ul和div来制作，直接上代码：
test.html：
Test Page
headline.css：
@CHARSET "UTF-8";ul { list-style-type: none; float: top; margin: 0; padding: 0;}li { float: left; /* 用于将多个放在同一行 */}ul a:link, ul a:visited { display: block; font-weight: bold; color: #FFFFFF; background-color: #bebebe; width: 120px; text-align: center; padding: 4px; text-decoration: none; text-transform: upperCase;}ul a:hover, ul a:active { background-color: red;} div.css：
@CHARSET "UTF-8";body { padding: 0; margin: 5px;}.container { width: 960px; margin: 0 auto;}.headline { padding-bottom: 15px;}.navi { padding: 0; margin-top: 15px; overflow: auto;}.navi-part { overflow:auto; float: left; /* 用于将多个div放在同一行 */ margin: 5px;}a { text-decoration: none; color: black;}a:hover { color: red;}.logo { padding-left: 0; width: 100px; height: 100px; margin-top: 20px; margin-bottom: 20px;}.clear { clear: both;} width: 960px; margin: 0 auto;用于将页面居中，float: left; , 用于将多个div放在同一行 。
最后的结果如下：
导航1：
导航2：
转载：http://blog.csdn.net/foreverling/article/details/50144229
你可能感兴趣的文章
将图片转成base64字符串并在JSP页面显示的Java代码
查看>>
js 面试题
查看>>
sqoop数据迁移（基于Hadoop和关系数据库服务器之间传送数据）
查看>>
腾讯云下安装 nodejs + 实现 Nginx 反向代理
查看>>
Javascript 中的 Array 操作
查看>>
java中包容易出现的错误及权限问题
查看>>
AngularJS之初级Route【一】（六）
查看>>
服务器硬件问题整理的一点总结
查看>>
SAP S/4HANA Cloud: Revolutionizing the Next Generation of Cloud ERP
查看>>
Mellanox公司计划利用系统芯片提升存储产品速度
查看>>
白帽子守护网络安全，高薪酬成大学生就业首选！
查看>>
ARM想将芯片装进人类大脑 降低能耗是一大挑战
查看>>
Oracle数据库的备份方法
查看>>
Selenium 自动登录考勤系统
查看>>
关于如何以编程的方式执行TestNG
查看>>
智能照明造福千家万户 家居智能不再是梦
查看>>
物联网如何跳出“看起来很美”？
查看>>
浅谈MySQL 数据库性能优化
查看>>
《UNIX/Linux 系统管理技术手册（第四版）》——1.10 其他的权威文档
查看>>
灵动空间 创享生活
查看>>