第三周总结-CSDN博客

本文链接：https://blog.csdn.net/ghfiy/article/details/115444928

3.29

一、列表

有序列表 ol(order list)

ol父元素，li子元素。
li元素内容前面自动添加有序的数字或字母

无序列表 ul(unorder list)

ul父元素，li子元素

定义列表 dl(defined list)

dl父元素，dt、dd为子元素

适用场景

列表：某一类相关的内容，整合到一起展示
导航：代码如下

    <header>
        <nav>
            <ul>
                <li>
                    <a href=""></a>
                </li>
            </ul>
        </nav>
    </header>

去除有序和无序列表的样式清空或更改

list-style-type:none——去除有序和无序列表的样式清空
注：none还可以取值为：square实心正方形	circle实心圆	disc实心圆(默认值)

设置次盒子内容为图片

```
list-style-image:url("")
```

设置当前列表样式的位置

```
list-style-position:inside;
```
outside 默认值——列表样式显示次盒子区域(ul或ol的padding区域)
inside 列表样式显示主盒子区域(ul或ol的content区域)——注：当ul或ol清除padding后依然显示列表样式

设置有序列表的排序样式

list-style-type:	upper(lower)将排序改为大(小)写字母排序
				    lower(upper)-roman排序为大小写罗马数字		decimal-leading-zero前面数字改01、02样式的排序

二、

盒子阴影(box-shadow)

第一个值：x轴偏移量
第二个值：y轴偏移量
第三个值：阴影模糊值
第四个值：阴影大小
第五个值：颜色

3.30

一、文本

letter-spacing：字间距

中文是字与字的距离，英文是字母之间的距离

text-decoration:

underline(添加下划线) / overline(添加上划线) / line-through(添加贯穿线)

direction:

ltr(left to right-----文本从左往右显示) / rtl(right to left-----文本从右往左显示)

text-shadow:文本阴影

规则与盒子阴影一样

text-indent:首行缩进

text-transform:capitalize(单词首字母大写)

capitalize(单词首字母大写) lowercase(小写字母) uppercase(大写字母) 注:只能适用与英文

line-height:(行高)

当行高的值等于当前文本height值时，文本垂直居中

3.31动画及变形

一、简单动画

简单动画通常称为“过渡 transition”

在一定时间之内，从一个值变化到另一个值

transition-property——过渡的属性		
transition-delay:——过渡效果延迟显示
transition-duration——过渡的时间		
transition-timing-function:linear(匀速)	ease-in(由快到慢)	ease-out(由慢到快)	ease-in-out(由慢到快，再到慢)
transition:all linear 3000ms——简写方式

可以过渡的属性：颜色、尺寸、透明度(opacity)
通常情况下，展示一个标签的从无到有的效果，一般是设置透明度(opacity)
当宽高进行尺寸过渡时起始值和结束值不能auto。

二、复杂动画

定义动画

@keyframes+自定义名称

@keyframes scroll
{
    from{
        left:100px;
        border-radius: 0;
    }
    20%{
        left:100px;
        border-radius: 50px;
    }
    50%{
        left:500px;
        border-radius: 50px;
    }
    70%{
        left: 100px;
        border-radius: 50px;
    }
    to{
        left:100px;
        border-radius: 0;
    }
}

复杂动画

实现动画的步骤：

第一步定义动画

书写格式：@keyframes 动画名称{动画效果(百分率{声明块})} （注：百分率是声明块动画的时间）

第一条是动画的起始效果最后一条是动画的结束效果

如果起始效果和结束效果相同，可用省略号代替
第二步引用动画

书写格式：

animation：动画名称动画时间动画播放次数(infinite循环播放)

要想在HTML中引用动画，需要在class里添加animated+动画名称（html需要提前引用css文件）