css案例学习之div ul li a 实现导航效果
2015-11-30 15:22
806 查看
效果
![](http://images2015.cnblogs.com/blog/422101/201511/422101-20151130152145218-103383537.png)
![](http://images2015.cnblogs.com/blog/422101/201511/422101-20151130152150780-579660377.png)
代码
改造一下
li加一个float属性
效果
![](http://images2015.cnblogs.com/blog/422101/201511/422101-20151130153635858-299534069.png)
![](http://images2015.cnblogs.com/blog/422101/201511/422101-20151130152145218-103383537.png)
![](http://images2015.cnblogs.com/blog/422101/201511/422101-20151130152150780-579660377.png)
代码
<html> <head> <title>无需表格的菜单</title> <style> body{ background-color:#dee0ff; } #navigation { width:150px; font-family:Arial; font-size:14px; text-align:right } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } #navigation li { border-bottom:1px solid #9F9FED; /* 添加下划线 */ } #navigation li a{ display:block; height:1em; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #151571; /* 左边的粗边 */ border-right:1px solid #151571; /* 右侧阴影 */ } #navigation li a:link, #navigation li a:visited{ background-color:#1136c1; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-left:12px solid yellow; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul> </div> </body> </html>
改造一下
li加一个float属性
<html> <head> <title>无需表格的菜单</title> <style> body{ background-color:#dee0ff; } #navigation { /*width:150px;*/ font-family:Arial; font-size:14px; text-align:right } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } #navigation li { border-bottom:1px solid #9F9FED; /* 添加下划线 */ float:left; } #navigation li a{ width: 120px; display:block; height:1em; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #151571; /* 左边的粗边 */ border-right:1px solid #151571; /* 右侧阴影 */ } #navigation li a:link, #navigation li a:visited{ background-color:#1136c1; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-left:12px solid yellow; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul> </div> </body> </html>
效果
![](http://images2015.cnblogs.com/blog/422101/201511/422101-20151130153635858-299534069.png)
![](http://images2015.cnblogs.com/blog/422101/201511/422101-20151130153644062-618546295.png)
相关文章推荐
- css初始化
- 单选框、多选框样式美化
- css案例学习之按钮超链接
- css 各种问题
- #学习笔记#(2)引用外部CSS
- css使用背景图片制作搜索框
- [TagCss]列表元素写法规范
- 欢迎使用css3
- WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现
- WPF自定义控件与样式(10)-进度控件ProcessBar自定义样
- WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu
- div css 多行文本 最后一行自动显示省略号
- WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式
- WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
- 【css】盒子模型 之 弹性盒模型
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
- css自适应media规则
- WPF自定义控件与样式(2)-自定义按钮FButton
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
- LESS CSS 框架简介