用ul、li做横向导航

简介: 原文:用ul、li做横向导航1、生成Site.css文件(注:一定要将该文件的编码格式设置为utf-8,否则ie6有可能出现乱码) /* ul li以横排显示 *//* 所有class为menu的div中的ul样式 */div.
原文: 用ul、li做横向导航

1、生成Site.css文件(注:一定要将该文件的编码格式设置为utf-8,否则ie6有可能出现乱码)

 
 
/* ul li以横排显示 */

/* 所有class为menu的div中的ul样式 */
div.menu ul
{
list-style
: none ; /* 去掉ul前面的符号 */
margin
: 0px ; /* 与外界元素的距离为0 */
padding
: 0px ; /* 与内部元素的距离为0 */
width
: auto ; /* 宽度根据元素内容调整 */
}
/* 所有class为menu的div中的ul中的li样式 */
div.menu ul li
{
float
: left ; /* 向左漂移,将竖排变为横排 */
}
/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
div.menu ul li a, div.menu ul li a:visited
{
background-color
: #465c71 ; /* 背景色 */
border
: 1px #4e667d solid ; /* 边框 */
color
: #dde4ec ; /* 文字颜色 */
display
: block ; /* 此元素将显示为块级元素,此元素前后会带有换行符 */
line-height
: 1.35em ; /* 行高 */
padding
: 4px 20px ; /* 内部填充的距离 */
text-decoration
: none ; /* 不显示超链接下划线 */
white-space
: nowrap ; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
div.menu ul li a:hover
{
background-color
: #bfcbd6 ; /* 背景色 */
color
: #465c71 ; /* 文字颜色 */
text-decoration
: none ; /* 不显示超链接下划线 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
div.menu ul li a:active
{
background-color
: #465c71 ; /* 背景色 */
color
: #cfdbe6 ; /* 文字颜色 */
text-decoration
: none ; /* 不显示超链接下划线 */
}

2、前台引用上述CSS样式文件

 
 
< link href ="Styles/Site.css" rel ="stylesheet" type ="text/css" />

3、前台数据

 
 
< div class ="menu" >
< ul >
< li >< a href ="javascript:void(0);" > 主页 </ a ></ li >
< li >< a href ="javascript:void(0);" > 工作日志 </ a ></ li >
< li >< a href ="javascript:void(0);" > 设备运行记录 </ a ></ li >
< li >< a href ="javascript:void(0);" > 其他 </ a ></ li >
</ ul >
</ div >
目录
相关文章
|
机器学习/深度学习 人工智能 数据可视化
什么是条件生成对抗性网络?
什么是条件生成对抗性网络?
320 0
|
前端开发 JavaScript 数据安全/隐私保护
详解React antd中setFieldsValu的简便使用
详解React antd中setFieldsValu的简便使用
418 0
|
11月前
|
存储 小程序 前端开发
如何设计小程序的站内信功能
如何设计小程序的站内信功能
468 0
|
8月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
1003 0
|
存储 安全 算法
Google 如何写设计文档
Google 如何写设计文档
522 0
|
存储 负载均衡 算法
负载均衡案例:如何只用2GB内存统计20亿个整数中出现次数最多的整数
负载均衡案例:如何只用2GB内存统计20亿个整数中出现次数最多的整数
165 2
|
负载均衡 持续交付 Docker
Docker容器编排与微服务架构的整合:最佳实践
微服务架构和Docker容器编排工具的结合为现代应用程序的构建和部署提供了巨大的便利性。本文将深入探讨如何将这两者整合在一起,提供丰富的示例代码和详细的最佳实践,以帮助大家构建可伸缩、可维护和高可用的微服务应用。
QGS
|
Java 数据库连接 Apache
Springboot日志框架logback与log4j2
Springboot日志框架logback与log4j2
QGS
238 0
|
JSON JavaScript 数据格式
layui 树形表格 treeTable使用详细指南,不能折叠解决办法
layui 树形表格 treeTable使用详细指南,不能折叠解决办法
796 0
layui 树形表格 treeTable使用详细指南,不能折叠解决办法
|
XML 存储 API
Flowable入门程序——构建一个命令行程序(二)
Flowable入门程序——构建一个命令行程序
285 0