用UL制作横向CSS导航菜单
更新时间:2023-08-09 19:52:01 阅读量: IT计算机 文档下载
- ul横向排列css推荐度:
- 相关推荐
第一步、编写横向菜单的HTML代码架构
请将以下代码添加到HTML文档的导航栏区域中。
<ul id="menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""
第二步、编写CSS代码
1、设置公共样式
请将以下CSS代码添加到HTML文档的<head>...</head>标签范围中。
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>
大家都知道,<ul>中的各条目<li>默认都是纵向排列的,我们需要定义CSS来让其横向排列起来。
Tips:因为我们现在将导航栏拉出来独立讲解,所以需要设置一些公共样式,如果您在 body 或其他地方已经重设了默认效果,以上代码可以去掉
2、让文字横排
大家都知道,<ul>标签下的项目<li>默认是纵向排列的,我们需要定义额外的CSS属性让其横向排列。
<style type="text/css">
#menu li {
float:left; /* 往左浮动 */
}
</style>
3、设置链接样式:
<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
padding:8px 50px; /* 设置内边距 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>
我们用内边距(即填充padding)的方式,让每个菜单变得宽一些,如果你的菜单是中英文混排的,建议设置单个菜单的高宽,这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式:
<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置高度 */
line-height:30px; /* 设置行高,将行高和高度设置同一个值,可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>
4、链接悬停效果:
通过以上几步的综合作用,一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果,让导航栏更美观。当然,如果要让导航栏更炫丽,你可以在CSS悬停属性上定义背景图片。
<style type="text/css">
#menu li a:hover {
background:#146C9C; /* 变换背景色 */
color:#fff; /* 变换文字颜色 */
}
</style>
这里的代码一个缺陷,最右边会多出来一个边框,由于 :first-child 伪类不被IE系列
浏览器所支持,我们只能单独写一个样式,将最后一个边框去掉,同时要给 HTML 代码增加一个额外选择符。
<ul id="menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href="" type="text/css">
#menu li st {
border-right:0; /* 去掉左侧边框 */
}
</style>
好了,到这里一个简单的横向导航菜单就制作完成了,是不是很简单? 下面给出完整代码:
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif;
}
#menu, #menu li {
list-style:none;
padding:0;
margin:0;
}
#menu li {
float:left;
}
#menu li a {
display:block;
/* 如果是中英文混排的文字,建议用固定宽度
width:150px;
height:30px;
line-height:30px;
text-align:center;
*/
padding:8px 50px;
background:#3A4953;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li a:hover {
background:#146C9C;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li st {
border-right:0; /* 去掉左侧边框 */
}
</style>
<ul id="menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href="
"></a></li>
<li><a href="" >
正在阅读:
用UL制作横向CSS导航菜单08-09
水中总硬度的测定_2008_08-17
保险业反洗钱培训考试题库105-16
经管院社会实践总结06-05
直流断路器灭弧装置的设计03-29
建筑分项工程施工工艺标准--无粘结预应力筋工工艺标准(435-1996)03-18
d-link707p中文说明书 - 图文04-15
兰州大学《西方经济学》作业题11-11
- 供应商绩效评价考核程序
- 美国加州水资源开发管理历史与现状的启示
- 供应商主数据最终用户培训教材
- 交通安全科普体验教室施工方案
- 井架安装顺序
- 会员积分制度
- 互联网对美容连锁企业的推动作用
- 互联网发展先驱聚首香港
- 公司文档管理规则
- 机电一体化系统设计基础作业、、、参考答案
- 如何选择BI可视化工具
- 互联网产品经理必备文档技巧
- 居家装修风水的布置_家庭风水布局详解
- 全省基础教育信息化应用与发展情况调查问卷
- 中国石油--计算机网络应用基础第三阶段在线作业
- 【知识管理专题系列之五十八】知识管理中如何实现“场景化协同”
- 网络推广方案
- 中国石油--计算机网络应用基础第二阶段在线作业
- 汽车检测与维修技术专业人才培养方案
- 详解胎儿颈透明层
- 横向
- 菜单
- 导航
- 制作
- CSS