网页的重构

never_.

已于 2023-10-01 18:14:09 修改

阅读量243

点赞数

文章标签：重构

于 2023-10-01 18:08:28 首次发布

本文链接：https://blog.csdn.net/m0_75168728/article/details/133466004

版权

一、常用的html标签

1.标题标签

h1,h2,...h6

2.段落标签

p标签

3.无序标签

无序列表ul，列表元素li，ul只和li一起使用，不要加入其他标签

有序列表ol，列表元素li

4.超链接标签（锚点标签）

a标签

属性：

href：指定跳转的网页的地址

5.图片标签

img标签

属性：

src：指定图片的路径

alt：当图片加载不成功时，会显示alt属性的内容，加载成功则不显示

6.div标签

无语义标签，用来实现网页的布局（一般在整体区域将多个标签划分区域）

7.span标签

无语义标签，，一般在一个标签li将其再次划分区域

8.id属性

唯一值

9.class属性

可以将标签分类

二、表格与表单元素

1.表格

（1）作用

主要用来展示数据

（2）标签

表格元素的容器使用table标签

其他表格元素的标签：thead（表头），tbody（表体），th（单元格），tr（单元行），td（表体单元格）等

<body>

    <table>

        <!-- 表头 -->

        <thead>

            <th>序号</th>

            <th>姓名</th>

            <th>学历</th>

        </thead>

        <!-- 表体 -->

        <tbody>

            <tr>

                <td>1</td>

                <td>李华</td>

                <td>高中</td>

            </tr>

             <tr>

                <td>2</td>

                <td>明明</td>

                <td>本科</td>

            </tr>

        </tbody>

    </table>

（3）属性

border：表示表格边框的宽度

若<table border="1">

结果如下：

若<table border="10">

效果如下：

（4）合并单元格

1）横向合并单元格

colspan属性：表示单元格所占的列数

eg1.

效果如下;

2）纵向合并单元格

rowspan属性：指定单元格要占的行数

eg2.

效果如下：

eg3.将上面两例合并

效果如下：

2.表单

（1）作用

向后台服务器提交数据

（2）标签

1）表单元素容器使用form标签

2）常用的标签

①input标签

表示一个文本框

input:type="text" 效果为文本输入框

再添加placeholder属性，其内容在文本框内，但是当用户输入后会被覆盖，删除全部的输入又会显示出来

input:type="password" 效果为密码输入框，即输入的数据会进行加密

效果如下：

input:type="radio"

单选框

可以添加lable标签来设置选项

<label for="">是</label>

        <input type="radio" name="" id="">

        <label for="">否</label>

        <input type="radio" name="" id="">

由图可知，此时两个选项均可以选，但这不符合需求

可以在input标签里添加name标签，将两个input标签的name值设置成一样的，就可以只选一个了

<label for="">是</label>

        <input type="radio" name="choice" id="">

        <label for="">否</label>

        <input type="radio" name="choice" id="">

input:type="checkbox" 复选框，点击该框，会出现打勾

input:type="submit" 提交按钮，默认为提交

经过后续设计，可以将表单数据提交给后台

但可以添加value属性，来修改文字内容

eg.修改为登录按钮

input:type="button" 普通按钮，默认没有功能也没有默认值，按钮名字要自己设定

②lable

用来描述文本框

效果如下：

for属性

给input标签添加id属性，然后在lable添加for属性，并将id值赋给for，则当点击lable内容时，可以让input标签的文本框获取焦点

当鼠标单击用户名时，光标会自动出现在用户名的文本框中

同理，当点击密码时，光标会出现在密码的的文本框

select：可以添加选择

option属性，指定选择的选项

action：向后台提交数据的选项

三、CSS选择器与常用属性

1.概述

CSS全称层叠样式表，控制网页的样式（html控制网页的内容）

2.语法

选择器{

属性名：属性值；

}

3.选择器

（1）元素选择器

属性：h1,img,p

元素{

属性：值

}

（2）类选择器

通过给标签增加class属性，然后在head标签内，创建style标签，在style 标签内使用，不同标签可以有相同的class值，故类选择器可以一次修改多个标签的内容的样式

.class值{

属性：值
}

（3）id选择器

通过给标签增加id属性，然后在head标签内，创建style标签，在style 标签内使用。一个标签只能有唯一一个id值，故id选择器只能修改一个标签内容的样式

（4）通配符选择器

对所有标签内容的样式进行修改

属性：属性值

}

（5）层级选择器

语法：

.selector1 selector2

<style>

.box1 p{

color: red;

}

</style>

</head>

<body>

<h1>hello</h1>

<p>world</p>

</div>

</div>

</body>

（6）组合选择器

selector1,selector2

<body>

<h1>hello h1</h1>

<h2>hello h2</h2>

<h3>hello h3</h3>

</div>

</div>

</body>

将h1与h2字体变成红色

<style>

h1,h2{

color: red;

}

</style>

将class值为box1的div里的h1，h2字体变成红色

<style>

.box1 h1,.box1 h2{

color: red;

}

</style>

（7）伪类选择器

增加行为

.selector:hover

鼠标移入时改变样式

eg1.

<body>

<h1>hello h1</h1>

<h2>hello h2</h2>

<h3>hello h3</h3>

</div>

</div>

</body>

当鼠标移入box1时，背景颜色变为红色

<style>

.box1:hover{

background: red;

}

</style>

原来效果为下：

将鼠标移入box1的内容氛围里后变成如下效果：

eg2.新建按钮，当鼠标移动到按钮时，按钮变成绿色

<style>

.btn:hover{

background-color: green;

}

</style>

</head>

<body>

</body>

（8）伪元素选择器

在标签内容中增加元素

注：该添加的内容无法在网页中被选择到，即子啊网页中，长按鼠标可选中网页内容，但该添加的元素不会被选中
selector::before 在元素之前加内容

selector::after 在元素之后加内容

eg1.在h1内容的前面添加内容

<style>

h1::before{

content: "123";

}

</style>

</head>

<body>

<h1>Hello</h1>

</body>

由图可知，123无法被选中

eg2.

</head>

<body>

<h1 class="line">Hello h1</h1>

</body>

在h1和h2前后都添加元素，并将该添加的元素改为红色

<style>

.line::before{

content: "----";

color: red;

}

.line::after{

content: "----";

color: red;

}

</style>

或使用组合选择器

<style>

.line::before,.line::after{

content: "----";

color: red;

}

</style>

注意：

在CSS2里，伪类选择器和伪元素选择器都是一个冒号

在CSS3里，伪元素选择器多一个冒号

但是，浏览器两者都兼容，所以，冒号是一个还是两个效果都一样

（9）选择器的权重

1）相同的选择器，后面的会覆盖前面的

<style>

h1{

background-color: green;

}

h1{

background-color: red;

}

</style>

2）不同选择器：ID（100）>class（10）>element（1）

当选择器之间矛盾时，会选择权重高的选择器执行

<style>

.line{

color: red;

}

h1{

color: green;

}

</style>

</head>

<body>

<h1 class="line">Hello h1</h1>

</body>

eg1.该例使用了类选择器和元素选择器，且二者产生矛盾，但是类选择器权重高，所以执行类选择器的内容，效果如下：

但是，若选择器之间不矛盾，则都执行，如下：

<style>

.line{

color: red;

}

h1{

background-color: green;

}

</style>

3）层级选择器：按权重累加计算

<style>

.box #text{

color: green;

}

#box2 h1{

color: red;

}

</style>

</head>

<body>

<h1 class="title titile2" id="text">hello </h1>

</div>

</body>

第一个使用了类选择器和id选择器

第二个使用了id选择器和元素选择器，但是前者的选择器权重之和大于第二个，故执行第一个，效果如下：

4）设置最高权重

若想将某句修改设置成最高权重，可以在内容后面增加一句 !important

<style>

.box #text{

color: green;

}

#box2 h1{

color: red ! important;

}

</style>

</head>

<body>

<h1 class="title titile2" id="text">hello </h1>

</div>

</body>

原来执行第一个修改，但设置了最高权重后，第二个执行

4.CSS的常用属性

（1）字体大小：font-size

在chrom浏览器中，最小大小为12px

（2）字体颜色：color

（3）宽度：width

（4）高度：height

将宽度或高度的任意一个修改大小而另一个不修改，默认图片按照该比例变化，或设置其中一个的值为auto

（5）背景色：background-color（在vscode中可以用快捷键bgc打出）

（6）文本水平居中：text-align

（7）文本行高（垂直居中）：line-height

<head>

<style>

.text{

color: black;

font-size: 11px;

background-color: #e23b3b;

text-align:center;

line-height: 70px;

img{

width: 600px;

}

</style>

</head>

<body>

<h1 class="text">Hello</h1>

</body>

效果如下：

5.引入css的方法

（1）嵌入样式

在head标签中，增加style标签，再在style中增加属性

（2）内联样式（行内样式）

直接在标签内增加style属性，内联样式权重高于嵌入样式，但是内联样式难以维护，故不使用该样式

<h1 style="color: red;">hello </h1>

（3）外部样式

实际开发大部分都使用外部样式

直接创建css文件，在css文件内指明标签属性，然后在head标签内使用link标签引入待文件

在css文件中：

h1{

color: green;

}

在html文件中：

<head>

</head>

<body>

<h1>world</h1>

</body>

效果如下

6.盒子模型

（1）概念

将html看做是盒子，来实现网页布局

（2）有关盒子模型的css属性

1）边框：border-width;border-style;border-color

外边距：margin(-top\-rigth\-bottom\-left)

表示边框与网页边界的距离

内边距：padding(-top\-rigth\-bottom\-left)

表示边框内的内容与边框边界的距离

简写：

border的属性可以一次性写在一行，格式：

boreder:width值 style值 color

外边距同理，也可见简写，格式：

margin:top值 right值 bottom值 left值

（上右下左）

不指定的可以用0表示，外边距的左右边距设置成auto表示自动居中

若只指定两个值，默认第一个指的是上下边距（一般为上边距），第二个指左右边距（一般为左边距）

若只写一个0，表示上下左右都为0

padding与margin同理

注意：

修改内边距时，元素也会改变，即边框大小会改变，因为元素实际的大小遵循一个公式：

元素实际宽度=border-left+border-rigth+width+padding-left+padding-right

元素实际高度=border-top+border-bottom+heigth+padding-top+padding-bottom

因此，可以设置属性box-size:border-box;来固定边框，使其不再改变，此时，元素实际宽度=width,实际高度=heigth

border-style值	描述
none	定义无边框
dotted	定义点状边框
dashed	定义虚线
solid	定义实现
double	定义双线

eg1.

</head>

<style>

.test{

/* 表示方框范围的长宽 */

width: 100px;

height: 100px;

/* 表示边框的属性 */

border: 10px solid red;

}

</style>

</head>

<body>

<div class="test">hello</div>

</body>

eg2.给方框设置左边距与上边距

<style>

margin-left: 100px;

margin-top: 50px;

<style>

或者：

margin:50px 0 0 100px ;

或

margin:50px 100px ;

三者效果相同

eg3.修改内边距，同时，可见边框的大小发生了改变

padding-top: 30px;

padding-left: 50px;

eg4.设置属性，来固定边框大小，可见边框大小变回了原来大小

box-sizing: border-box;

全部代码如下：

<head>

<style>

.test{

/* 表示方框范围的长宽 */

width: 100px;

height: 100px;

/* 表示边框的属性 */

border: 10px solid red;

margin:50px 100px ;

padding-top: 30px;

padding-left: 50px;

box-sizing: border-box;

}

</style>

</head>

<body>

<div class="test">hello</div>

</body>

2）元素边距初始化

因为css边框的一些属性有默认值，如即使将margin设置成0，边框也不会完全贴在网页的边界，还是会空出一部分位置，这就是默认值，

<style>

.test{

/* 表示方框范围的长宽 */

width: 100px;

height: 100px;

/* 表示边框的属性 */

border: 1px solid red;

margin:0px;

padding-top: 30px;

padding-left: 5px;

box-sizing: border-box;

}

</style>

</head>

<body>

<div class="test">hello</div>

</body>

所以可自己进行元素边距初始化，使边框完全按照自己的要求变化

只要在style标签里，加上通配符选择器，把内外边距初始化成0即可，如下：

<style>

margin: 0px;

padding: 0px;

}

.test{

/* 表示方框范围的长宽 */

width: 100px;

height: 100px;

/* 表示边框的属性 */

border: 1px solid red;

margin:0px;

padding-top: 30px;

padding-left: 5px;

box-sizing: border-box;

}

</style>

</head>

<body>

<div class="test">hello</div>

</body>

eg2.将边框居中显示：

<style>

margin: 0px;

padding: 0px;

}

.test{

/* 表示方框范围的长宽 */

width: 100px;

height: 100px;

/* 表示边框的属性 */

border: 1px solid red;

margin:0px auto;

padding: 30px 5px;

box-sizing: border-box;

}

</style>

</head>

<body>

<div class="test">hello</div>

</body>

3）列表样式

①取消列表样式

list-style:none;

②列表样式在边框之内：list-style:inside;

表示让列表的点号标识在方框里，

eg1.当给边框设置成如下设置时，效果如下：

<head>

.fruits{

border: 1px solid red;

width: 800px;

margin: 0 auto;

}

.sports{

border: 1px solid blue;

width: 800px;

margin: 0 auto;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

但当我进行了元素边距初始化后，效果变成如下：

此时，为解决这个问题，可以将列表样式设置在边框里:

.fruits ul,.sports ul{

list-style:inside;

}

同时，还可以对该页面进行美化：

修改padding，将内间距调大，使内容不紧贴边框（先修改padding，在设置box-size属性，固定边框大小）

将两个边框的间隔拉大，使它们的边框不重合（给第二个边框设置上方的外边距）

以上全部代码如下：

<head>

<style>

margin: 0px;

padding: 0px;

}

.fruits{

border: 1px solid red;

width: 800px;

margin: 0 auto;

padding-left: 30px;

padding-top: 10px;

box-sizing: border-box;

}

.sports{

border: 1px solid blue;

width: 800px;

margin: 0 auto;

margin-top: 50px;

padding-left: 30px;

padding-top: 10px;

box-sizing: border-box;

}

.fruits ul,.sports ul{

list-style:inside;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

7.浮动布局

（1）HTML元素的分类

块元素：可以设置宽度和高度，独立成行。h1-h6、p、div、ul、li
行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span
行内块元素：可以设置宽度和高度，不独立成行。img、input、buttom

（2）display属性

可以改变元素的分类

1）block：转换成块元素

2）inline：转换成行内元素

3）inline-block：转换成行内块元素、

4）none：隐藏元素

eg.a标签为行内元素，无法设置宽度与高度，即使设置了也无效，如下：

</head>

<style>

width: 300px;

height: 100px;

border: 1px solid red;

}

</style>

</head>

<body>

</body>

效果如下（无效设置）：

将a标签转换成块元素：

display: block;

效果如下：

点击方框内任意位置都会发生跳转

（3）浮动元素

1）作用

将块元素设置成浮动元素（float），则可以使它们在同一行显示

eg.将div元素设置成同一行

<head>

<style>

.content{

width: 300px;

height: 200px;

border: 1px solid red;

/* 设元素浮动 */

float: left;

}

.aside{

width: 100px;

height: 200px;

border: 1px solid blue;

float: left;

}

</style>

</head>

<body>

</body>

若将边栏的float设置成right，效果如下：

2）特性

脱离文档流：在网页中，浮动元素不占位置，后面的元素会顶替它的位置，即浮动元素后面的元素会与浮动元素重叠，举个例子：

<head>

<style>

.content{

width: 300px;

height: 200px;

border: 1px solid red;

/* 设元素浮动 */

float: left;

}

.aside{

width: 100px;

height: 200px;

border: 1px solid blue;

float: left;

}

.test{

width: 500px;

height: 600px;

background-color: yellow;

}

</style>

</head>

<body>

</body>

3）空div清除浮动

在浮动元素后增添空的div（对网页内容无影响），在再给该div添加class属性，，再使用类选择器，添加语句clear:both即可

<head>

<style>

.content{

width: 300px;

height: 200px;

border: 1px solid red;

/* 设元素浮动 */

float: left;

}

.aside{

width: 100px;

height: 200px;

border: 1px solid blue;

float: left;

}

.test{

width: 500px;

height: 600px;

background-color: yellow;

}

.null{

clear: both;

}

</style>

</head>

<body>

</body>

2）伪元素清除浮动

若是有多个浮动元素，上述操作还是不方便，故采取以下方式改进：

将所有的浮动元素放在一个空的div标签内，并在该标签内添加class属性，再使用类选择器，将元素进行清除浮动

<head>

<style>

/* 清楚浮动 */

.clear::before,.clear::after{

content: "";

display: block;

clear: both;

}

.content{

width: 300px;

height: 200px;

border: 1px solid red;

/* 设元素浮动 */

float: left;

}

.aside{

width: 100px;

height: 200px;

border: 1px solid blue;

float: left;

}

.test{

width: 500px;

height: 600px;

background-color: yellow;

}

</style>

</head>

<body>

</div>

</div>

结果如下（与上面一样）：

eg.设置与以下界面结构一样的网页：

html文件内容：

<head>

<title>Document</title>

</head>

<body>

<h2>

精选手册

</h2>

</div>

</div>

<h3>前端开发学习手册</h3>

<p>2023年x月x日</p>

</div>

</li>

</div>

<h3>前端开发学习手册</h3>

<p>2023年x月x日</p>

</div>

</li>

</ul>

</body>

</html>

css文件内容：

margin: 0px;

padding: 0px;

}

.clear::before,.clear::after{

content: "";

display: block;

clear: both;

}

.top{

width: 800px;

height: 20px;

font-size: 10px;

line-height:20px;

}

.top h2 a{

color:#aaa;

float:right;

/* 给链接去下划线 */

text-decoration: none;

}

.list .pic img{

width: 200px;

}

.pic{

width:200px;

float: left;

}

.title{

width: 300px;

float: left;

margin: 15px;

}

.title a{

display: block;

width: 33px;

background-color: darkturquoise;

/* 给链接去下划线 */

text-decoration: none;

line-height: 30px;

text-align: center;

margin-top: 10px;

}

8.树状结构

（1）节点及节点之间的关系

根节点：每个树状结构有且只有一个没有父级的节点，这就是根节点
父级节点
子级节点
同级关系：有相同父级的节点就是同级关系

（2）html文件树状结构节点

1）元素节点

2）属性节点

3）文本节点

在看见设计稿时，可以根据设计稿画出树状结构，再根据树状结构进行排版布局，再根据实际样式补充修改

9.CSS定位

（1）CSS定位（position）

1）绝对定位：absolute

特点：

脱离文档流

默认参照物为浏览器视窗的左上角

<style>

.pos{

position: absolute;

top: 50px;

left: 50px;

}

.box{

width: 200px;

height: 200px;

background-color: red;

border: 5px solid black;

}

</style>

</head>

<body>

</body>

2）相对定位：relative

特点：

不脱离文档流

默认参照物为元素原来的位置

3）固定定位：fixed

脱离文档流

默认参照物为浏览器视窗位置

将页面下滑，它还是在视窗的相同位置

（2）坐标属性（对非定位元素不起作用）

top，left：表示距离参照物的上方，左方多大距离

rigth,bottom

z-index：设置z轴

值为整数，默认为0

数值大的在前方显示，值为负数会在非定位元素的下方，值为正数会在非定位元素的上面，而定位元素之间，值大的在上方

</style>

.pos2{

position: fixed;

top: 50px;

left: 100px;

}

.pos3{

position: absolute;

top: 100px;

left: 60px;

}

.box{

width: 200px;

height: 200px;

background-color: red;

border: 5px solid black;

}

</style>

</head>

<body>

</body>

该情况默认3在2上面：

将3的z-index设置成负数，则它会在最下面：

z-index: -1;

将2的值设置成比3大，且二者都为正数：

将2的值设置得比3大，且都为负数：

（3）设置参照物

父级为定位元素，子级的绝对定位元素会以父级为参照物

eg.将列表元素固定在图片的固定位置，即将图片与列表（一般为绝对定位）放在同一标签内，再将二者的父级标签（一般为相对定位）设置成定义元素即可，这样图片上的内容就不会随着视窗的改变导致在图片上的位置改变

<style>

.pic-box{

width:600px;

margin: 0 auto;

position: relative;

}

.list{

top: 10px;

left: 500px;

position: absolute;

}

</style>

</head>

<body>

</ul>

</div>

</body>

eg.设置一个返回页面顶部的按钮，同时按钮始终在视图的右下角

<style>

body{

height: 2000px;;

}

.pos{

position: fixed;

bottom: 100px;

right: 100px;

}

</style>

</head>

<body>

<h1>hello</h1>

</body>

10.HTML5新增标签

（1）布局元素

布局元素相对于一个有语义的div

header：网页头部

nav：导航栏

aside：侧边栏

article：显示文章

section：布局的一部分

footer：网页页脚

（2）媒体元素

audio：音频

video：视频

属性：

controls：显示控制面板

autopaly：自动播放

muted：静音

（3）画布（canvas）

（4）SVG（定义矢量图）

（5）表单新特性

11.CSS3新增样式

（1）边框圆角

border-radius：左上右上右下左下

若只设置两个值，第一个值表示左上和右下，第二个值表示右上和左下

若设置一个值，表示每个角

该值为圆的半径大小，值越大，弧度就越大，当值为50px或50%（在宽与高相等的前提下），边框为一个圆

值的计算方式如下：

（2）阴影

box-shadow:10px 20px 30px blue

分别表示x轴偏移量、y轴偏移量、模糊半径（值越大，阴影越模糊，若为0，则表示不模糊）、阴影颜色（不设置颜色默认为黑色）

<style>

.test{

width:200px ;

height: 200px;

background-color: red;

box-shadow: 10px 20px 30px blue ;

}

</style>

</head>

<body>

<div class="test">hello</div>

</body>

若将模糊半径设为0px，效果如下：

（3）形变：旋转、缩放、位移

transform：

rotate()；旋转，单位：deg，表示角度

scale()；缩放，按倍数缩放

translate()；位移，第一个数字表示横坐标移动，第一个表示纵坐标移动

transform-origin：设置旋转原点，默认为中心，

若设置为transform-origin：0 0；表示左上角为旋转原点

eg1.旋转

<style>

.box{

width: 200px;

height: 200px;

background-color: red;

transform: rotate(45deg);

}

</style>

</head>

<body>

<h1>hello</h1>

</div>

</body>

eg2.缩放

transform: scale(0.5)

transform: scale(1.5)

eg3.位移

transform: translate(50px,100px)

eg4.多种形变

transform: rotate(45deg) translate(130px,50px)

eg5.设置效果，只有当鼠标移入div时，发生形变

.box:hover{

transform: rotate(45deg) translate(130px,50px)

}

eg6.让元素在页面中水平垂直分布

<style>

.box{

width: 500px;

height: 200px;

background-color: red;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

</style>

</head>

<body>

<h1>hello</h1>

</div>

</body>

（4）过渡效果（transition）

1）transition-poperty 过渡属性（例如transform）

2）transition-duration 过渡持续时间（例如1s）

3）transition-timing-function 过渡函数

过渡函数：

ease：开始和结束慢，中间块，默认值

linear：匀速

ease-in：开始慢

ease-out：结束慢

ease-in-out：和ease类似，但比ease幅度大

4）transition-delay 过渡延迟时间

简写：

transition:属性秒数函数延迟;

transition:属性秒数函数;

（5）overflow

当内容超出范围时，默认会显示，但可通过overflow控制超出范围

eg1.将超出部分隐藏

overflow: hidden;

eg2.使用滚动条，将超出部分显示出来

overflow: auto;

eg3.当鼠标移入div时，图片以1s的时间旋转90度，当鼠标移开时，回复到原样

<style>

.box{

width: 100px;

height: 100px;

border: 1px solid red;

margin: 100px auto;

transition-property: transform;

transition-duration: 1s;

}

.box:hover{

transform: rotate(90deg)

}

</style>

</head>

<body>

<h1>hello</h1>

</div>

</body>

或者：

transition: transform 1s;

eg4.在eg1的基础上，鼠标移入时，图片的大小也会同步改变

<style>

.box{

width: 100px;

height: 100px;

border: 1px solid red;

margin: 100px auto;

transition:transform 1s,width 1s,height 1s;

}

.box:hover{

transform: rotate(90deg);

width:200px;

height: 200px;

}

</style>

</head>

<body>

<h1>hello</h1>

</div>

</body>

（6）动画效果

1）定义动画

@keyframe 动画名{

动画执行顺序

}

①按百分比指定动画

若从0%到100%，则动画显示流畅

若从0%到50%，动画会在前一半的时间播放动画，再用后一半的时间回到初始状态，如，设置2s内0%到50%，360度旋转，则会在前1s内顺时针旋转，后1s内逆时针旋转回去

②from...to...指定动画

相当于0%到100%（只指定这两个阶段）

2）属性

animation-name：规定需要绑定到选择器的keyframe名称

animation-duration：规定完成动画所花费的时间，以秒或毫秒计

animation--timing-function：规定动画的速度曲线

animation-delay：规定在动画开始之前的延迟

animation-iteration-count：规定动画应该播放次数（infinite表示无限次）

animation-play-state:paused;停止动画

简写：

animation:动画名动画时间速度延迟时间播放次数

eg.设置动画，旋转

<style>

@keyframes anim{

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(360deg);

}

.box{

width: 100px;

height: 100px;

background-color: antiquewhite;

margin: 100px auto;

animation: anim 2s linear 1s infinite;

}

</style>

</head>

<body>

</body>

eg.更多变化

<style>

@keyframes anim{

0%{

transform: rotate(0deg);

}

20%{

width: 200px;

height: 300px;

transform: rotate(360deg);

}

40%{

background-color: cadetblue;

width: 300px;

height: 300px;

}

100%{

width: 100px;

height: 100px;

}

.box{

width: 100px;

height: 100px;

background-color: antiquewhite;

margin: 100px auto;

animation: anim 10s linear 1s 2;

}

</style>

</head>

<body>

</body>

（7）flex布局

flex布局又叫弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护

1）概念

将元素设置成display:flex;元素就会变为一个flex容器

容器内部的元素为flex元素或者叫flex项目（flex-item）

main axis：主轴

cross axis：交叉轴

2）flex容器中的默认效果

flex项目在flex容器中默认沿主轴排列（普通元素沿纵向排列）

flex项目高度适应flex容器高度（同行内元素）

3）设置flex容器

①flex-direction：设置flex项目排列方向

row：默认值，主轴为水平方向，起点在左端，

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

eg1.如图，没有给元素设置高度，默认为容器高度

.container{

display:flex;

background-color: aquamarine;

width: 800px;

height: 300px;

}

.item{

width: 100px;

background-color: darkcyan;

border: 1px solid red;

}

</style>

</head>

<body>

</div>

</body>

flex-direction: row-reverse;

flex-direction:column-reverse;

②justify-content：flex项目主轴排列方式

flex-start：默认值，左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

eg2.

justify-content:flex-end;

justify-content:center;

justify-content:space-between;

justify-content:space-around;

③align-items：flex项目在交叉轴的排列方式

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

stretch：默认值，如果项目未设置高度或这位auto，将占满整个容器的高度

eg3.

上面的例子都没有设置该属性，所以高度占满容器

如设置

align-items:flex-start;

justify-content:space-around;

align-items:flex-end;

justify-content:space-around;

align-items:center;

justify-content:space-around;

4）设置flex项目

flex-grow：属性定义项目的放大比例，默认为0，空间充足，等比例补全

flex-shrink：定义项目的缩小比例，默认为1，即若空间不足，该项目缩小（一般情况，项目比容器大时，会自动调整，等比例缩小，不会出现项目超出的现象，故很少用）

flex-basis：主轴排列为宽度，交叉轴排列为高度，设置px,默认是auto

flex：综合上面三个样式，一般只写一个值，因为后面两个不常用

eg1.

<style>

.container{

display:flex;

justify-content:space-around;

background-color: aquamarine;

width: 800px;

height: 300px;

}

.item{

width: 100px;

flex-grow: 1;

background-color: darkcyan;

border: 1px solid red;

}

.big{

flex-grow: 3;

}

</style>

</head>

<body>

</div>

</body>

eg2.

align-self: center;

若想让一个元素占页面的100%，应该让该元素的所有父级及其自己设成100%

如

<!DOCTYPE html>

<head>

<title>Document</title>

<!-- 若想让一个元素占页面的100%，

应该让该元素的所有父级全部占页面的100% -->

<style>

margin: 0;

padding: 0;

}

body,html{

height: 100%;

}

.container{

background-color: darkgreen;

height: 100%;

}

.box{

width: 100px;

height: 100px;

background-color: cadetblue;

}

</style>

</head>

<body>

</div>

</body>

</html>

将div及其所有父级body,html 高度设为100%

而未设高度前，页面效果如下：

设置一个元素水平垂直居中，可以在元素里设置align-self:center;

若要是容器里所有元素水平垂直居中。可以在容器里设置align-itens:center;

（8）grid布局

1）元素属性

grid-template-columns设置列的大小

grid-template-rows设置行的大小

若直接设置大小，可设置为px

若按比例设置大小，可设置为fr

<style>

.container{

display: grid;

width: 800px;

height: 650px;

border: 1px solid blue;

grid-template-columns: 100px 200px 300px;

grid-template-rows: 100px 200px 300px;

}

.item{

border:1px solid red;

}

</style>

</head>

<body>

</div>

</body>

grid-template-columns: 1fr 1fr 2fr;

grid-template-rows: 1fr 2fr 2fr;

2）容器属性

①justify-items：项目在单元格中水平方向的对齐方式

值：

start：项目出现在单元格开始的位置

center：项目出现在单元格中间的位置

end：项目出现在单元格末尾的位置

strech：延伸，默认值，占满整个单元格

align-items：项目在单元格中垂直方向的对齐方式

与上面同理

justify-content：整个单元格在grid容器中的水平方向对齐方式

justify-content: center;

justify-content: end;

align-content：整个单元格在grid容器的垂直方向的对齐方式

align-content: end;

justify-content: center;

align-content: center;

grid-auto-columns：设置溢出列的chicun

grid-auto-rows：设置溢出行的尺寸

如下图，溢出了一行

grid-auto-rows:50px;

3）项目属性

①设置项目占单元格的行数（竖线）

grid-column-start：项目的起始线

grid-column-end：项目的终线

grid-column：前两个的结合

grid-column-start: 1;

grid-column-end: 3;

或

grid-column:1 /3;

②设置项目占单元格的列数（横线）

grid-row-start

grid-row-end

grid-row

grid-row-start: 1;

grid-row-end: 3;

或

grid-row: 1/3;

grid-column:2 /4;

grid-row: 2/4;

③设置项目在单元格的位置

justify-self

align-self

justify-self: center;

align-self: center;

12.响应式页面

同一套静态页面代码，在不同设备展示出相同的效果

（1）媒体查询

通过@media定义样式，当浏览器窗口满足指定条件时，才会应用该样式

设置当页面宽度大于600px，小于700px时，方块变成黑色

<style>

.box{

width: 100px;

height: 100px;

background-color: green;

}

@media screen and (min-width:600px) and (max-width:700px){

.box{

background: black;

width: 200px;

height: 200px;

}

</style>

</head>

<body>

</body>

（2）优缺点

优点：一套页面适应多端设备，提升开发效率

缺点：页面效果不及单独为谋一终端定制的页面效果好，有性能问题，维护成本高

总结：大部分项目不会整体采用响应式页面

13.使用rem单位设置移动端页面尺寸

（1）移动端特点

设备的尺寸不同，图片的尺寸不再用px，而是用百分比

em:相对于父级的font-size的大小，即当父级的font-size改变，子级也会改变，父级1px=子级10em

rem相对于html标签中的font-size值

1rem=30px

第一行公式里的750是设计图的宽度，100是基准宽数

在head里引入js文件：

never_.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫