纯CSS制作三级菜单,可扩展无限
注明:如果要想要在IE6无限级的话需要写多一些JS,其他游览器都可以使用同段js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript下拉菜单</title>
<style type="text/css">
body,ul,li{margin:0; padding:0; font-size:12px; list-style:none;}
#navigation {
margin:20px; height:auto;
}
#navigation li {
position:relative;width:130px; height:40px;border-bottom:1px solid #999999;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
background:#c5dbf2;
padding-left:10px;
}
#navigation li a:hover {
&n
相关文档:
样式选择符命名
选择符以类型分,同类放一起,类的定义顺序以HTML中实际的顺序为参考,以方便查找为主, 使用类似下面的规则:
[模块前缀 | 类型 | 作用]_[名称]_[状态 | 位置]
约定模块、类型、状态、位置等的所使用的单词或其缩写,保持上面的顺序,尽量保持在两到三个单词说清用途。
通用名词缩写
设置
set
......
适用于只有一行文字的情况.
.ellipsis{
text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记(...)*/
width:200px; height:50px;
overflow:hidden;
white-space:nowrap;
}
text-overflow是CSS3的属性,IE6以上版本、Safari、chrome 支持。它可以带2个参数:
clip [不显示省略标记(...),而是 ......
margin 外边距
border 边框
padding 内边距
也就是说 设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面
而且在IE6 一下的版本中 存在这padding 计算错误的BUG
CSS 的宽度属性本来是不包含padding的 但是 在ie下面有的时候宽度是包含padding 所以 建议在不熟悉CSS 在定位 ......
A
absolute 绝对的   ......
一、什么是DIV+CSS?
“DIV + CSS” 是最新WEB标准的一个典型的应用。
一般来说,网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)等。 结构主要包括例如DIV在内的一系列的HTML(XHTML)标签,表现主要包括CSS(层叠样式表:Cascading Style Sheets), 行为主要包括例如对象模 ......