网页设计大赛第十七天

设置垂直菜单导航栏：

1.用ul无序列表构建菜单
2.清除默认样式 *{margin:0;padding:0;}
清除ul的样式 ul{list-style：none}，能去掉前面的默认小圆点
去掉a标签的下划线 a{text-decoration：none} 在导航栏中经常用
height: 30px;line-height: 30px;可使文字垂直居中。

3.如果用为文字前面增加像素，最好用缩进的方式来实现
{text-indent：xx px}（文本缩进,用text-indent替换padding-left，是为了防止菜单长度增加。例如：padding-left:10px; 会导致宽度也增加10px ）

4.ul li a{}因为a标签是最内部的元素， 所以对a标签设置就可以了，又因为a为内联元素，而块状元素才可以设置宽度、 高度，所以要把a设置为块级元素：ul li a{display:block;}
*{ } （用于全局设置）

设置水平菜单导航栏
在垂直菜单导航栏样式基础上修改：
1、设置li为左浮动
2、将ul限制宽度去掉
3、设置文本居中，text-align:center,将之前的text-indent（文本缩进）属性删掉
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

1. 为元素创建四个相同的圆角
(1) 这一步可选，输入 -webkit-border-radius: r ，这里的 r 是圆角的半径大小，表示为长度（带单位）。
(2) 输入 border-radius: r ，这里的 r 是圆角的半径大小， 使用与第(1)步中相同的值。 这是该属性的标准短形式语法。

2. 为元素创建一个圆角
(1) 这一步可选，输入 -webkit-border-top-left-radius: r ，这里的 r 是左上方圆角的半径大小，表示为长度（带单位）。
(2) 输 入 border-top-left-radius: r，这里的 r 使用与第 (1) 步中相同的值。这是该属性的标准长形式语法。注意这些步骤仅演示了如何创建左上方圆角， 此外， 还可以单独创建其他方位的圆角，
步骤如下。
‰ 创建右上方圆角：用 top-right 替换第 (1) 步和第 (2) 步中的 top-left 。
‰ 创建右下方圆角：用 bottom-right 替换第 (1) 步和第 (2) 步中的 top-left 。
‰ 创建左下方圆角：用 bottom-left 替换第 (1) 步和第 (2) 步中的 top-left 。

3. 创建椭圆形圆角
(1) 这一步可选，输入 -webkit-border-radius: x / y ，其中 x 是圆角在水平方向上的半径大小， y 是圆角在垂直方向上的半径大小，均表示为长度（带单位）。
(2) 输入 border-radius: x / y ，其中 x 和y 跟第 (1) 步中的值相等。
4. 使用 border-radius 创建圆形
(1) 输入 -webkit-border-radius: r ，这里的 r 是元素的半径大小（带长度单位）。要创建圆形，可以使用短形式的语法， r 的值应该等于元素高度或宽度的一半。
(2) 输入 border-radius: r ，这里的 r 是元素的半径大小（带长度单位），跟第 (1) 步中的 r 相等这是标准的无前缀语法。

 

在a：hover中加入height以后再设置margin为负的数值，可使样式改变向上变化

 

js中在动画开始之前将其清理一下，以免后来叠加