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

用ul、li做横向导航相关推荐

css案例学习之div ul li a 实现导航效果
效果代码 <html> <head> <title>无需表格的菜单</title> <style>body{background-colo ...
html ul li做左侧菜单,css中使用ul li ul li ul li ul li 实现四层级联菜单
复制代码代码如下: a { color:Black; /*--a标签的默认颜色为黑色--*/ text-decoration:none; /*--隐藏超链接的下划线--*/ } a:hover { / ...
jquery ul li 操作
删除ul下的li包括节点 $('ul li').remove();$('ul li').each(function(){$(this).remove(); }); $("ul"). ...
ul li横向排列及圆点处理
如何用CSS制作横向菜单让ul li横向排列及圆点处理第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
php中显示li,请C语言大侠们帮忙看看，为什么总显示 array subsc... html中的ul li 用php怎么做？php在html中写代码如......
导航:网站首页 > 请C语言大侠们帮忙看看,为什么总显示 array subsc... html中的ul li 用php怎么做?php在html中写代码如... 请C语言大侠们帮忙看看,为什么 ...
用li写的一个简单的横向导航菜单demo
用ul li写的一个简单的横向导航菜单,很实用: /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ ...
html让ul的li自动居中,css ul li导航菜单居中问题解决方法
昨晚群里一个朋友帮忙解决的问题,之前没有遇到过,题目如下: 不改变html结构,使导航菜单垂直水平居中,导航宽度自适应屏幕100%,高度30px;单项高度28px,宽80px; 兼容:ie6+,ff, ...
ul li 制作导航菜单
ul li 制作导航菜单效果图: 代码段: <%@ Page Language="C#" AutoEventWireup="true" CodeFile ...
html修改li字体,使用导航标签html5更改导航 ul li元素的字体大小
我在css文档中遇到了设置自定义字体大小的问题.这是我的问题.我使用html5的导航标签.我在哪里必须放置font-size属性?使用导航标签html5更改导航> ul> li>元素 ...

用ul、li做横向导航

用ul、li做横向导航相关推荐

最新文章

热门文章