CSS制作简单的横向菜单
来源:互联网 发布:linux运维最佳实践 编辑:程序博客网 时间:2024/05/16 07:49
1.先写一个列表,建立菜单的结构
<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><div class="menu"> <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></span></span></span>2.隐藏标签li的默认样式
<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>.menu ul {list-style-type:none;}</style></span></span></span>3.使菜单列表横向,需要加入一个非常重要的属性“float:left”,这是菜单横向的关键所在
<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>.menu ul {list-style-type:none;}.menu ul li {float:left;}</style></span></span></span>4.调整外部DIV和菜单标签li的宽度,并且取消链接的下划线,使菜单ul和外部的DIV的边界属性值为0
<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>.menu {width:100%;}.menu ul {padding:0px; list-style-type:none;}.menu ul li {float:left; width:100px;}.menu ul li a {text-decoration:none;}</style></span></span></span>
5.大多数浏览器对于链接样式的字体颜色为蓝色,我们可以设置为自己喜欢的颜色。之后我们可以设置菜单的整体样式,将菜单背景色设置为红色,字体颜色设置为白色,字体大小设为14px,字体类型根据自己的喜好
<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微软雅黑";}.menu ul {padding:0px; list-style-type:none;}.menu ul li {float:left; width:100px; height:35px; line-height:35px;}.menu ul li a {text-decoration:none; color:#fff;}</style></span></span></span>效果图如下:
可以看出字体没有居中,加入text-align:center使字体居中
<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微软雅黑";}.menu ul {padding:0px; list-style-type:none;}.menu ul li {float:left; width:100px; height:35px; line-height:35px; text-align:center;}.menu ul li a {text-decoration:none; color:#fff;}</style></span></span></span>6.最后,我们所要设置的就是鼠标移入菜单(:hover)、鼠标点击菜单(:active)、鼠标选中菜单(:focus)的样式,这就需要用到CSS的伪类
<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微软雅黑";}.menu ul {padding:0px; list-style-type:none;}.menu ul li {float:left; width:100px; height:35px; line-height:35px; text-align:center;}.menu ul li a {text-decoration:none; color:#fff;}.menu ul li a:hover {background:#fff; color:#000;}.menu ul li a:active {background:#fff; color:#000;}.menu ul li a:focus {background:#fff; color:#000;}</style></span></span></span>
效果图如下:
有木有觉得菜单选中的样式很丑,所以我们需要在标签a的样式表中加入一个重要的属性display:block
<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微软雅黑";}.menu ul {padding:0px; list-style-type:none;}.menu ul li {float:left; width:100px; height:35px; line-height:35px; text-align:center;}.menu ul li a {text-decoration:none; color:#fff; display:block;}.menu ul li a:hover {background:#fff; color:#000;}.menu ul li a:active {background:#fff; color:#000;}.menu ul li a:focus {background:#fff; color:#000;}</style></span></span></span>最终效果如下:
7.最终的代码
<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>横向菜单</title><style>.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微软雅黑";}.menu ul {padding:0px; list-style-type:none;}.menu ul li {float:left; width:100px; height:35px; line-height:35px; text-align:center;}.menu ul li a {text-decoration:none; color:#fff; display:block;}.menu ul li a:hover {background:#fff; color:#000;}.menu ul li a:active {background:#fff; color:#000;}.menu ul li a:focus {background:#fff; color:#000;}</style></head><body><div class="menu"> <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></span></span></span>
1 0
- CSS制作简单的横向菜单
- CSS制作横向菜单
- 用CSS制作横向菜单
- div+css制作的水平三级横向弹出菜单
- 如何用CSS制作横向菜单?
- 如何用CSS制作横向菜单?
- 如何用CSS制作横向菜单?
- 如何用CSS制作横向菜单?
- 如何用CSS制作横向菜单?
- 如何用CSS制作横向菜单?
- 如何用CSS制作横向菜单
- 如何用DIV+CSS制作横向菜单?
- 如何用CSS制作横向菜单?
- 如何用CSS制作横向菜单
- 用列表ul制作css横向菜单
- 如何使用CSS制作横向菜单
- 如何用div+css制作横向菜单
- 用UL制作横向CSS导航菜单
- 关于DPI、DP、PX等概念
- 面向对象的思想(自我总结篇)
- firefox php 验证码图片 多次请求问题 待解决
- leetcode -- Rotate Array -- 重点
- CSS 1.0~3.0选择器(下)
- CSS制作简单的横向菜单
- 前端之Android入门(4):MVC模式(中)
- JAVA发送HttpClient请求及接收请求结果过程
- eclipse 字符集 编码 设置
- 详解如何在Ubuntu中安装JYTHON
- 在iOS 8中使用UIAlertController
- JS KeyCode对照表及使用
- iOS开发~UITextView光标不在起始位置问题
- DUBBO启动错误