实例章节
1.双竖线菜单
（1）html框架
<div id="menu">
<a href="#">home</a>
<a href="#">contact</a>
<a href="#">web dev</a>
<a href="#">map</a>
</div>
(2)设置容器css
(2)设置容器css
#menu{
120px;
background:#ccc;
font-family:arial;
font-size:14px;
padding:8px;
margin:0 auto;//水平居中
}
（3）设置菜单项的css样式
竖直排列 要从行内元素变为块级元素
#menu a,#menu a:visited{
dispaly:block;
padding:4px 8px;
color:#000;文字样式
text-decoration:none;
margin：8px 0；项目间的空隙
border-left：8px solid #9ab；左右两侧的竖线
border-right：8px solid #9ab；
}
（4）出现的问题
最上面的菜单项 margin和menu容器的padding各有8个像素，加在一起为16个像素
单独设置第一个菜单项和最有一个菜单项css
#menu a#firest，#menu a#last{
margin:0;
}
再设置鼠标指针经过的效果
#menu a：hover{
color：#f00;
border-left:8px solid #000;
border-right:8px solid #000;
}
在ie中鼠标指针进入矩形范围时，不触发效果的解决办法是在a 和a:visited中增加height：1em
css中有first-child属性
2.立体菜单
（1） html结构
<body>
<div id="menu">
<a href="#">home</a>
<a href="#">contact</a>
<a href="#">web dev</a>
</div>
<body>
（2） menu容器的设置
#menu{
font-family：arial；
font-size：14px；
}
（3）菜单项设置
#menu a,#menu a:visited
{
text-decoration:none;
text-align:center;
color:#fff;
display:block;块
10em;宽度
padding:0.25em;内边距
margin:0.5em auto;菜单项间间隔
背景色
border:2px solid #fff; 边框粗细
border-color:#def #678 #345 #cde;边框颜色显示突起效果
position:relative;相对定位
}
上边框和左边框使用浅色，下边框和右边框使用深色，就会出现凸起的视觉效果。鼠标经过时，按钮凹陷样式，按钮向下右方平移2个像素，设置按钮所在的盒子相对定位，指以定位元素自身 所在的位置为基准，平移指定的距离。 #menu a:hover{
top:2px;
left:2px;
border-color:#345 #cde #def #678;
}
凹陷的视觉效果 上下边框的颜色交换，左右边框的颜色交换
3.箭头菜单
（1）利用css制作三角形效果
css盒子的height和width设置为0 然后设置边框较粗，并且左右边框的颜色不同于背景色。其余3条边框的颜色 和背景相同。
（2）放置三角形
增加两个小盒子，分别放置在菜单项的两端，各用于显示一个三角形
制作方法：
例子：<div id="menu">
<a href="#">
<span class="left"></span>
home
<span class="right"></span>
</a>
</div>
</div>
(3)基本设置
#menu{
font-family:arial;
font-size:16px;
140px;
margin:0 auto;
border:solid 1px #ccc;
}
设置普通状态的样式
#menu a,#menu a:visited{
text-decoration:none;
text-align:center;
color:#c00;
display:block;
padding:4px;
border:solid 1px #fff; 边框与背景颜色相同
position:relative;
}
（4）箭头效果
#menu a:hover{
border-color:#c00;
}
#menu a:hover span{
display:block;
position:absolute;
height:0;
0;
overflow:hidden;
border:solid 8px #fff;
top:4px;
}
再单独设置两边的span
#menu a:hover span.left{
border-left-color:#c00;
left:8px;
}
#menu a:hover span.right{
border-right-color:#c00;
right:8px;
}
如果ie中不能用 要设置每个菜单项的宽度
溢出overflow:hidden;
4.带说明信息的菜单
在3的基础上，制作说明信息菜单
基本思路：在html结构中增加一个span元素用于放置说明内容
代码：<div id="menu">
<a href="#">
<span class="left"></span>
home
<span class="right"></span>
<span class="intro">这里是说明信息菜单项</span>
</a>
</div>
默认隐藏 当鼠标经过时再显示span
设置方法
#menu{
font-family:arial;
font-size:16px;
140px;
margin:0 auto;
border:solid 1px #ccc;
}
设置普通状态的样式
#menu a,#menu a:visited{
text-decoration:none;
text-align:center;
color:#c00;
display:block;
padding:4px;
border:solid 1px #fff; 边框与背景颜色相同
position:relative;
width：130px；
}
#menu a span{
display:none;
}
#menu a:hover{
border-color:#c00;
}
#menu a:hover span{
display:block;
position:absolute;
height:0;
0;
overflow:hidden;
border:solid 8px #fff;
top:4px;
}
再单独设置两边的span
#menu a:hover span.left{
border-left-color:#c00;
left:8px;
}
#menu a:hover span.right{
border-right-color:#c00;
right:8px;
}
//显示说明信息
#menu a:hover span.intro{
color:#000;
font-size:12px;
display:block;
position:absolute;绝对定位以a元素为定位基准
left:150px;
top:0px;
100px;
height:auto;
padding:5px;
border:1px dashed #234;
}
本章注意：1.相邻盒子的margin在竖直方向相遇时的塌陷现象，水平方向没有该现象
2.在一系列盒子排列后，对头尾盒子样式单独设置
3.通过粗边框的颜色设置可以产生出斜角效果。
4.为了防止鼠标指针经过时造成边框的跳动，可以添加于背景色相同的边框
5.相对定位的含义是以自身原来所在位置为基准进行偏移
6.包含块得定义方法，绝对定位以包含块为基准进行偏移
7.为了使某个盒子绝对定位，它的上一级元素可以设为相对定位，从而变成“包含块”；