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:#00A2CA;margin: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代码
- " target="_blank">http://www.xxx.com/">首页
- HTML" target="_blank">http://www.xxx.com/html/">HTML教程
- CSS" target="_blank">http://www.xxx.com/rumen/">CSS基础
- CSS" target="_blank">http://www.xxx.com/css-tool/">CSS开发工具
- CSS" target="_blank">http://www.xxx.com/css-texiao/">CSS特效
- CSS" target="_blank">http://www.xxx.com/wenji/">CSS问题
3、效果截图