纵向二级菜单Word格式.docx
《纵向二级菜单Word格式.docx》由会员分享，可在线阅读，更多相关《纵向二级菜单Word格式.docx（17页珍藏版）》请在冰点文库上搜索。
divid="
menu"
>
<
ul>
li>
首页<
/li>
网页版式布局<
div+css教程<
div+css实例<
常用代码<
站长杂谈<
技术文档<
资源下载<
图片素材<
/ul>
/div>
从预览的效果上看，四周都有很大的空隙，而且每一行前边还有个点，这是因为标签的默认样式造成的，下面我们需要创建样式表把标签的默认样式给清除掉。
任意选择一个列表项，点击下面状态栏上的<
，选择全部的ul，新建CSS规则，类型为ID，规则选择器为#menuul
生成的CSS代码如下：
#menuul{
margin:
0px;
padding:
list-style-type:
none;
}
下面我们定义一下全局的字体，字号，行距等，点击css样式面板上的新建按钮，在弹出的窗口中选择器类型选择标签，名称选择body，然后在css编辑器中设置如下图所示属性
body全局样式定义后，下面我们给#menu定义一个灰色的1px边框及宽度，然后把li定义下背景色和下边框及内边距等
接下来定义li的背景色为浅灰色及下边框和内边距
这些属性设置完后，一个简单的纵向列表菜单初具模型了。
因为导航菜单，需要链接到其它页面，下边把这些导航加上链接，然后在定义a的状态和鼠标划过状态。
要添加链接，先选择要添加链接的文字，然后在属性页面链接上输入要链接的页面址，这里输入个#，是个虚拟链接，不指向任何页面。
创建a的样式后，下面我们增加个交互效果，当鼠标划过链接文字时，让文字颜色变成红色，这时就需要用到a:
hover这个伪类了
二、标签的默认样式
大多数标签都有自己的默认样式，比如body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。
正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。
但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。
另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。
body,ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd{margin:
font-size:
12px;
font-weight:
normal;
}
ul{list-style:
img{border-style:
把上述代码复制粘贴到文件中的CSS部分即可，这些公用的代码每个网页文件都会用到的，用到的时候粘贴就可以了。
这样就很简单把常用标签的默认样式给清除掉了，如果需要边距的话再重新定义，也避免了各个浏览器对标签默认样式解析差异造成页面显示不一样的问题。
三、css派生选择器
CSS初学者不知道使用子选择器是影响他们效率的原因之一。
派生选择器可以帮助你节约大量的class定义。
上边的例子中应用了些派生选择器如下的css代码
#menuul{list-style:
#menuulli{background:
#eee;
0px8px;
height:
26px;
line-height:
border-bottom:
1pxsolid#CCC;
#menuul和#menuulli即为派生选择器，如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。
#menuulli是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。
四、css选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。
用逗号将需要分组的选择器分开。
在下面的例子中，我们对所有的标题元素进行了分组。
所有的标题元素都是绿色的，p段落、div分区、span都是20像素字体。
h1,h2,h3,h4,h5,h6{
color:
green;
}
p,div,span{
font-size:
20px;
五、纵向二级列表
二级菜单即指当鼠标放到一级菜单上后，会弹出相应的二级菜单，移去鼠标后自动消失，我们接着上边的例子进行修改，注意粉红色代码是新添加的，添加的位置是处于一级<
中又嵌套了一个<
，注意理解二级菜单的写法，具体代码如下：
ahref="
@#"
/a>
#"
自适应宽度<
固定宽度<
新手入门<
视频教程<
常见问题<
上面的代码只添加了两个菜单的二级菜单，同学们可以自行添加其他的二级菜单。
接下来修改css样式表，先修改#menuulli，给其增加一个position:
relative;
属性
然后定义ID为menu下ul下里的li内的ul样式如下：
定义display:
none后，默认状态下将隐藏
定义#menuulliul的position:
absolute;
left:
100px;
top:
，那么它将以相对于它父元素li的上为0，左为100的位置显示。
最后我们设置当鼠标划过后显示下级菜单的样式
#menuulli:
hoverul这个样式比较难理解，它的意思是定义ID为menu下ul下li，当鼠标划过时ul的样式，
这里设置为display:
block，指的是鼠标划过时显示这块内容，这也实现我们今天想要的效果。
其中的:
hover和前边说的链接一样，同属于伪类。
这个例子到这里就做出来了。
预览观看效果。
六、相对定位和绝对定位（前面的练习例子要多练习体会）
定位标签：
position
包含属性：
relative（相对）absolute（绝对）
1.position:
如果对一个元素进行相对定位，首先它将出现在它所在的位置上。
然后通过设置垂直或水平位置，让这个元素"
相对于"
它的原始起点进行移动。
（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。
因此，移动元素会导致它覆盖其他框）
2.position:
absolute;
表示绝对定位，位置将依据浏览器左上角开始计算。
绝对定位使元素脱离文档流，因此不占据空间。
普通文档流中元素的布局就像绝对定位的元素不存在时一样。
（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。
z-index的值越高，它显示的越在上层。
）
3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角
4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。
另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右
升级会员 