css样式

/* 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>