导航条菜单的制作(笔记)
2015-11-07 16:13
281 查看
垂直菜单的制作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Menu</title> <style type="text/css"> *{ margin: 0; padding: 0; font-size: 14px; } ul{ list-style: none; width: 100px; } a{ text-decoration: none; display: block; height: 30px; line-height: 30px; width: 100px; background-color: #ccc; margin-bottom: 1px; text-indent: 10px; } a:hover{ background-color: #f60; color: #fff; } </style> </head> <body> <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html>
水平菜单的制作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Menu</title> <style type="text/css"> *{ margin: 0; padding: 0; font-size: 14px; } ul{ list-style: none; } li{ float: left; } a{ text-decoration: none; display: block; height: 30px; line-height: 30px; width: 100px; background-color: #ccc; margin-bottom: 1px; text-align: center; } a:hover{ background-color: #f60; color: #fff; } </style> </head> <body> <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html>
相关文章推荐
- [19]结构体
- [20]枚举
- ANT教程之二 ANT环境安装设置
- C# 字符串操作--减少垃圾回收压力
- C# 字符串操作--减少垃圾回收压力
- [18]指针
- windows下安装numpy模块不成功解决办法
- Android之Socket通信、List加载更多、Spinner下拉列表
- D3D绘制2D图像例子
- [18]字符串
- ANT教程之一 ANT简介
- 乔里斯基分解(Cholesky decomposition)
- c语言链表
- [转]iOS容易造成循环引用的三种场景,就在你我身边!
- 回溯算法 Backtrack
- 继承 完整的初始化方法和便利构造器
- OC加强知识点笔记-内存管理,@class,NSString 内存管理
- [17]数组
- 页面验证信息提示
- 杭电ACM1009