Web技术开发(五)

1. 初始状态

2. 更改ul样式

去掉小黑点，并且让菜单变成横排，通常一个样式占用一行。

ul{
    list-style-type: none;
}
li{
    float: left;
}

3. 隐藏二级菜单

ul ul{
    display: none; <!--表示被另一个ul包含的ul-->
}

4. 鼠标移动显示

ul>li:hover ul{
    display: block;
}

5. 调整二级菜单为竖排

给第一级ul指定类名为.menu,同时还须指定直接的父子关系，使二级ul不受影响。

.menu > li {
    float: left;
}
<ul class="menu">

6. 添加背景颜色

当元素设置为float后，在正常流里无内容，高度为0，如果要保留父空间，可以添加div元素

p,div都是块元素，对于块元素显示时要求占用一整行。例：

当页面首先有一张图片时，块元素只能从图片下新一行开始显示；
当图片被定义为float时，正常流内无内容，但图片依然正常显示，而块元素则可以从图片右侧空间开始显示

clear:both表示左右两边都不允许有内容，原本是要在float元素右侧，由于这一规则，自动把内容撑开。

.menu {
    background-color: gray;
}
.clearfix {
    clear: both;
}
<div class = "clearfix"></div>

7. 使用after添加内容

通常不要添加没有意义的语句放在ul内容中，因此我们定义一个伪类，达到同样的效果。

.menu: after{content: "after content"}
.menu: before{content: "before content"}
.menu: after{
    content: "";
    clear: both;
    display: block;
}

代码的含义就是在使用类选择符menu的元素后添加新的空内容。

8. 修正二级菜单位置

现在的子菜单显示的时候会改变一级菜单的位置，因此要将二级菜单从正常流中取走。

ul ul{
    display: none;
    position: absolute;
}

或

.menu ul {
    display: none;
    position: absolute;
}

9. 进一步装饰

9.1 改变字体颜色及去除字体下划线

.menu a{
    text-decoration:none;
    color:white;
}

9.2 加大字体边框

.menu li{                
    padding: 10px 20px;
}

9.3 定义所有ul的样式

包括改变ul的背景颜色，box-shadow是给元素块添加周边阴影效果。

对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

ul{
    list-style-type: none;
    background-color: #111; 
    box-shadow: hoff voff radius color;
}

9.4 给菜单添加圆角、渐变及阴影效果

.menu{
    border-radius:100px;
    background: linear-gradient(#444,#111);    
    box-shadow: 4px 4px 8px 4px gray;
    padding:0 30px;
    margin:10px;
}

9.5 设置鼠标移动时项目有阴影及渐变效果

.menu li:hover{
    background: linear-gradient(hsl(200,100%,40%),hsl(200,100%,20%));
    box-shadow: 4px 4px 8px 4px gray;
}

9.6 调整二级菜单的位置为绝对位置

.menu ul{
    display: none;
    position: absolute;
    top:2.3em;
}

9.7 去除二级菜单名字前空格

*{  padding:0;
    margin:0;
 }

以及设置二级菜单的移动效果

.menu>li:hover ul{
    display:block;    
    left:0;
    box-shadow: 4px 4px 8px 4px gray;
}