css制作导航栏
2014-11-10 13:21
141 查看
下面是用css如何制作一个导航栏:
html代码如下:
css代码如下:
总结:
css常用的选择器:
1.类名选择器 “.”
2.Id选择器 “#”
3.标签选择器 “h1,h2....”
PS:在对于某一块样式进行渲染时,最好层次结构清晰一点,准确定位。
效果如下:
html代码如下:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <title>css导航条</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="nav"> <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> <li><a href="#">旅游</a></li> </ul> </div> </body> </html>
css代码如下:
body .nav ul{ list-style-type: none; /*去掉原点*/ } body .nav ul li{ float:left; /*导航栏变为水平*/ } body .nav ul li a{ width: 80px; height: 28px; line-height: 28px; /*line-height和height值相等,字垂直方向居中*/ background: rgb(0, 139, 255); color: white; font-size: 12px; display: block; text-align: center; text-decoration: none; } body .nav ul li a:hover{ /*链接点击的时候样式设置*/ width:78px; height:26px; line-height:28px; border:1px solid red; color:red; background:#FFF; }
总结:
css常用的选择器:
1.类名选择器 “.”
2.Id选择器 “#”
3.标签选择器 “h1,h2....”
PS:在对于某一块样式进行渲染时,最好层次结构清晰一点,准确定位。
效果如下:
相关文章推荐
- <CSS基础>导航栏制作教程
- CSS导航栏菜单制作大全
- Jquery、css制作炫酷导航栏
- CSS导航栏制作
- 简单 纯css 多级导航菜单 制作教程1 - 使用ul li 制作导航栏
- CSS 用浮动制作一个导航栏
- css制作导航栏小三角形箭头 .clearance-product-title span.active:after ,.clearance-product-title span:hover:afte
- 巧妙使用checkbox制作纯css动态导航栏
- 第8天:CSS制作导航栏
- CSS+JS制作导航栏点击选中效果
- css制作简单的导航栏
- 使用html和css制作水平导航栏nav
- css制作导航栏上浮动小图标
- 通栏导航栏的制作,综合使用CSS属性,代码不超过30行
- CSS制作一个简单网页的下拉导航栏
- 使用CheckBox的属性制作纯css动态导航栏
- 用css+js制作可自动伸缩导航栏
- css实现导航栏的制作
- 网页制作中十个最好的CSS hacks