用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
>