1.基础标签
双标签:
<html></html> 根标签
<head></head> 文档头部
<title></title> 文档标题
<body></body> 文档主体
标题标签:<h1></h1> ——<h6></h6> 一级标题到六级标题
<p></p> 段落标签
单标签:
<br /> 换行
文本格式化标签:
<strong></strong> 加粗 or <b></b>
<em></em> 倾斜 or <i></i>
<del></del> 删除线 or <s></s>
<ins></ins> 下划线 or <u></u>
div与span: div没有语义,用来装内容,相当于一个盒子,独占一行;
而span可以跨距。
图像标签:
<img scr="图像url" />
scr 图片路径
alt 替换文本
title 提示文本(鼠标放到图片上,显示的文字)
width 设置宽度
heigth 设置高度
border 边框粗细
路径:
- 相对路径(以图片位置为参考):
- 同一级路径
- 下一级路径 /
- 上一级路径 …/ - 绝对路径:从电脑开始的路径 或 完整的网络地址。
举例:
相对路径:
<h4>同一级路径</h4>
<img src="许嵩.jpeg"/>
<h4>下一级路径</h4>
<img src="image/八重神子.png"/>
<h4>上一级路径</h4>
<img src="../12.原神网页模仿制作/image/万叶.png" alt="">
绝对路径:
<img src="https://i0.hdslb.com/bfs/banner/d8303a8911c53c42d1944
fa338468b015b5c72c6.jpg@976w_550h_1c_!web-home-carousel-cover.webp"/>
超链接标签:(从一个页面到另一个页面)
1. --> _blank 新窗口
文本或图像 _self 当前窗口
2.链接分类
- 外部链接
- 内部链接
- 空链接
- 下载链接 许嵩高清图片下载
- 网页元素链接
- 锚点链接 快速定位到页面中的某个位置 目标位置标签:
…
返回顶部:
注释和特殊字符:
注释
快捷键 ctrl+/
空格  
< <
> >
行内元素与块元素
**行内元素: **和其他元素都在一行上; 宽度只与内容有关; 行内元素只能容纳⽂本或者其他⾏内元素。 不可以设置宽⾼, 其宽度随着内容增加,⾼度随字体⼤⼩⽽改变。
<a ><strong><b><em><del><span ><img><input><select>
块元素: 总是在新⾏上开始,占据⼀整⾏; ⾼度,⾏⾼以及外边距和内边距都可控制; 宽带始终是与浏览器宽度⼀样,与内容⽆关; 它可以容纳内联元素和其他块元素。
<h1>~<h6><p><div><ul><ol><li><div><dl>
行内块元素:
- 和相邻的行内元素(包含行内块)在一行上,它们直接会有空白缝隙
- 一行可以显示多个(行内元素特点)
- 默认宽度就是内容的宽度(行内元素特点)
- 高度、宽度、内外边距都可以自定义(块元素特点)
** 行内元素和块级元素的转换 :**
//定义元素为块级元素
display:block
//定义元素为⾏内元素
display : inline
//定义元素为⾏内块元素
display:inline-block
2.表
1.表格
<table>表
<th></th>表头单元格(居中加粗)
<tr>行
<td>单元格中的文字</td>单元格
</tr>
</table>
表格结构标签:
<thead></thead> 表格头部
<tbody></tbody> 表格主体
表格属性:
属性 | 属性值 | 描述 |
---|---|---|
align | left,center,right | 对齐方式 |
border | 1或"数字 " | 有无边框 |
cellpadding | "数字 " | 单元边沿与其内容之间的空白 |
cellspacing | "数字 " | 单元格之间的空白 |
width | "数字 " | 表格宽度 |
height | "数字 " | 表格高度 |
- 表格的细线粗细:border-collapse:collapse; 合并相邻边框
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 300px;
height:150px;
}
th,td {
text-align: center;
/* 相邻边框合并在一起 */
border-collapse: collapse;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>国籍</th>
<th>神之眼</th>
<th>人物故事</th>
</tr>
</thead>
<tbody>
<tr>
<td>芭芭拉</td>
<td>蒙德</td>
<td>水</td>
<td><a href="#">人物故事</a></td>
</tr>
<tr>
<td>香菱</td>
<td>璃月</td>
<td>火</td>
<td><a href="#">人物故事</a></td>
</tr>
<tr>
<td>五郎</td>
<td>稻妻</td>
<td>岩</td>
<td><a href="#">人物故事</a></td>
</tr>
<tr>
<td>艾尔海森</td>
<td>须弥</td>
<td>草</td>
<td><a href="#">人物故事</a></td>
</tr>
</tbody>
</table>
</body>
</html>
效果如下:
合并单元格:
跨行合并:rowspan="个数” 在最上侧为目标单元格
跨列合并:colspan="个数” 在最左侧为目标单元格
举例:
<table align="center" border="1" cellpadding="0" cellspacing="0"
width="500" height="500">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
效果如下:
2.列表
1.无序列表
<ul>
<li>列表项</li>
</ul>
注:<ul></ul>中只能放<li></li>标签
<li></li>可以放任何标签
2.有序列表
<ol>
<li>列表项</li>
</ol>
3.自定义列表
<dl>
<dt>名词一</dt>
<dd>名词一解释一</dd>
<dd>名词一解释二</dd>
</dl>
注:<dl></dl>中只能放dt和dd
去掉li前面的小圆点:list-style:none。
3.表单
标签 表示表单标签,定义整体的表单区域
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮
- type=“reset” 定义重置按钮
- type=“name” 定义名称
标签 表示表单元素的下拉列表标签 定义下拉列表
标签 与标签配合,定义下拉列表中的选项
添加required表示必须填写此字段。
**pointer-events: none;**:禁用鼠标事件,使得用户不能与 **
** 标签的样式: - **font-size: 2rem;**:设置字体大小为 2rem(相对于根元素的字体大小)。 - **color: #fff;**:设置文本颜色为白色。 - **text-align: center;**:设置文本居中对齐。 ``` cssCopy code .inputbox { position: relative; margin: 20px 0; max-width: 300px; border-bottom: 2px solid #fff; } ``` 这段代码设置了类名为 **.inputbox** 的输入框容器的样式: - **position: relative;**:设置容器的定位为相对定位,以便内部绝对定位的元素相对于此容器进行定位。 - **margin: 20px 0;**:设置上下外边距为 20px,左右外边距为 0。 - **max-width: 300px;**:设置容器的最大宽度为 300px。 - **border-bottom: 2px solid #fff;**:设置容器底部的边框为 2px 宽的白色实线。 ``` cssCopy code .inputbox label { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); color: #fff; font-size: 1rem; pointer-events: none; transition: all 0.5s ease-in-out; } ``` 这段代码设置了 **.inputbox** 容器内的 **
css的三种引入方式
- 行内式
- 内嵌式(内部样式)
- 外链式
我们主要说一下外链式:
将css代码写在一个单独的.css文件中,在标签中使用标签直接引入该文件到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
伪类和伪元素
**伪类:**为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的。
状态伪类:
- :link 应用于未被访问过的链接;
- :hover 应用于鼠标悬停到的元素;
- :active 应用于被激活的元素;
- :visited 应用于被访问过的链接,与:link互斥。
- :focus 应用于拥有键盘输入焦点的元素。
结构性伪类:css3新增选择器
**伪元素:**创建一些不在文档树中的元素,并为其添加样式。
css 选择器的种类
1.标签选择器
标签名:{ } 所有的某一类标签
**2.类选择器:**可以单独或选择几个标签
<div class="red"类名>…
定义样式:
.red {
color: red;
}
多类名:
3.id选择器
#类名 { } 只能调用一次
4.通配符选择器:
*{ } 选取页面所有标签
5.层级选择器(后代选择器)
根据层级关系选择后代标签, 以选择器1 选择器2开头,主要应用在标签嵌套的结构中,减少命名。
举例:
<style>
ul li {
color: red;
}
ul a {
color: green;
}
.nav li a {
color: rgb(39, 175, 21);
}
</style>
<body>
<ul>
<li>我是蒙德的</li>
<li>我是蒙德的</li>
<li>我是蒙德的</li>
<li><a href="#">我是风起地的</a></li>
</ul>
<ol class="nav">
<li>我是璃月的</li>
<li>我是璃月的</li>
<li>我是璃月的</li>
<li><a href="#">我是轻策庄的的</a></li>
</ol>
</body>
6.组选择器
根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。
示例代码
<style>
p,
div,
.xiong li {
color: green;
}
</style>
<body>
<p>万叶</p>
<div>琴</div>
<span>凝光</span>
<ul class="xiong">
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
</body>
- 伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
示例代码
<style>
a {
text-decoration: none;
}
/* a:link 未访问的更改样式 */
a:link {
color: black;
}
/* 已访问过的 */
a:visited {
color: green;
}
/* 鼠标放上时更改样式 */
a:hover {
color: blue;
font-size: 20px;
}
/* 鼠标正在按下,还没弹起*/
a:active {
color:black;
}
</style>
</head>
<body>
<h2>选择要玩的游戏</h2>
<a href="#">七圣召唤</a>
<a href="#">深渊</a>
<a href="#">刷圣遗物</a>
<a href="#">刷圣遗物</a>
<a href="#">刷圣遗物</a>
</body>
: focus 伪类选择器 选择获得光标的表单
<style>
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
<input type="button">
<input type="text">
</body>
效果如下:
- 子选择器:
元素1(父)>元素2(子) { } 只能选择儿子标签
单位
**px : ⼀个固定像素单位,⼀个像素表示终端屏幕能显示的最⼩的区域
% :**元素的宽⾼可随浏览器的变化⽽变化,实现响应式,⼀般⼦元素的百分⽐相对于直接⽗元素
em : 作为 font-size 的单位时,代表⽗元素的字体⼤⼩按⽐例计算值,作为其他属性单位时,代表相对⾃身 字体⼤⼩按⽐例计算值
rem : CSS3新增。相对于根元素字体⼤⼩按⽐例计算值;作⽤于根元素字体⼤⼩时,相对于其出初始字体⼤ ⼩(16px)
vw 相对于视图窗⼝宽度,视窗宽度为100vw
**vh **相对于视图窗⼝⾼度,视窗⾼度为100vh
4.CSS属性
字体属性
- font-family: ‘宋体’; body { }
- 字体大小 font-size:20px; 默认16px;
- 字体粗细 font-weight:700; normal:400 不加粗; bold:700 加粗;
- 文本样式 font-size: normal 正常;italic 斜体;
- 字间距 letter-spacing:20px;
文本属性
- 文本颜色 div {color : red;} 十六进制 #FF0000 ; RGB代码 rgb(255,0,0);
- 对齐文本 text-align: left, center, right;
- 装饰文本 text-decoration: none, underline(下划线), overline, line-through(删除线)
- 文本缩进 text-indent: 20px; em 单位 相对单位
- 行间距 p { line-height: 26px;}
- justify-content: center;: 水平方向上将内部元素居中对齐。
- justify-content: space-between;:在弹性盒子中,使子元素沿着主轴(水平方向)均匀分布,两端留有空白间距。
- min-height: 100vh;: 设置body元素的最小高度为视口高度的100%,以确保内容始终填充整个屏幕。
- align-items: center;:在交叉轴上居中对齐内容。
小技巧:单行文字垂直居中,让文字的行高=盒子的高度 line-height = height。
Emmet语法(快速生成HTML)
- 标签名+Tab键
- 生成多个标签 div*10+Tab
- 包含关系 ul>li Tab ul>li *3 Tab
- 兄弟关系 div + p Tab
- 带类名 .demo
- 带id #id名
- .demo$*5 生成5个1~5 $是自增符号
- div {…} *5
- css缩写 右键+格式化文键 对齐
- 快速复制一行 shift +alt +下键
CSS元素显示模式(块,行内,行内块元素)
- 块元素:
特性:
- 独占一行
- 可以更改宽高
- 宽度默认和父级宽度一样高
- 可以放行内元素
<h1>~<h6><p><div><ul><ol><li><div><dl>
- 行内元素:特性:
- 一行显示多个span
- 高宽无法设置
- 只能容纳文本,不能放块
<a ><strong><b><em><del><span ><img><input><select>
- 行内块元素:
特性:
- 有行有块
- 可以控制高宽
- 外边距,内边距
-
元素显示模式转换: (例如增加链接的触发范围)
行内元素——>块元素 display:bock;
块元素——>行内元素 display:inline;
行内块元素 display:inline-block;
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
width: 200px;
height: 200px;
background-color:yellow;
/* 行内元素转换为块元素 */
display: block;
}
div {
/* width: 200px;
height: 200px; */
background-color: gray;
/* 块元素转化为行内元素 */
display: inline;
}
span {
color: red;
background-color: lightsteelblue;
height: 60px;
width: 50px;
/* 转换为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#">原神</a>
<div>巴巴托斯</div>
<span>转换为行内块元素</span>
<span>转换为行内块元素</span>
<span>转换为行内块元素</span>
</body>
</html>
效果如下:
CSS背景
- 背景颜色:background-color:
- 背景图片:background-image:none/url(地址)
- 背景平铺:background-repeat:repeat/no-repeat/repeat-x/repeat-y;
- 背景图片位置:background-position:x,y;(方位名称:left,right,center,top,bottom)
- 背景图片固定:background-attachment: scroll(滚动)/fixed(固定)
- 背景色半透明:rgba(0,0,0,0.3)透明度
- background-size: cover;: 设置背景图像按比例缩放以填充整个元素。
- backdrop-filter: blur(55px);: 应用模糊滤镜效果,模糊程度为55像素。
- background: transparent;:设置背景为透明。
- 线性渐变:语法:background: linear-gradient(direction, color-stop1, color-stop2, …);
CSS三大特性(层叠,继承,权重)
- 层叠性,样式冲突,就近原则
- 继承性,子标签可以继承父标签的属性
- 优先级(权重),!important>style>ID选择器>类选择器>元素(标签)选择器>继承/*,指定的越明确(选择器的范围越小),权重越大。
可继承 字体属性 ⽂本属性 元素可⻅性 列表布局属性 光标属性
不可继承 盒⼦模型属性 display 背景属性 定位属性 ⽣成内容、轮廓样式、⻚⾯样式、声⾳样式
权重计算:
- 内联样式表的权值最⾼为 1000;
- ID 选择器的权值为 100
- Class 类选择器、属性选择器、伪类的权值为 10
- HTML 元素选择器、伪元素的权值为 1
- 加有!important的权值最⼤,优先级最⾼
*{} /*通⽤选择器,权值为0 */
p{color:red;} /*标签,权值为1*/
p span{color:green;} /*两个标签,权值为1+1=2*/
p>span{color:purple;}/*权值与上⾯的相同,因此采取就近原则*/
a:hover{} /*标签和伪类,权值为1+10=11*/
.warning{color:white;} /*类选择符,权值为10*/
p span .warning{color:purple;} /*权值为1+1+10=12*/
h1+a[rel=up]{} /*标签和属性选择器,权值为1+10=11*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
p{color:red!important; } /*优先级最⾼*/
5.CSS盒子模型
- 边框 border:border-width粗细 / border-style样式 dashed实线 or dotted虚线 / border-color; 复合写法:border:1px solid pink; 四条边:border-left/right/top/bottom;
- 表格的细线粗细:border-collapse:collapse; 合并相邻边框
- 内边距:padding:5px;上下左右都是5px;
- 外边距:块级盒子水平居中:margin:0 auto; margin 纵向重叠取重叠取最⼤值,不进⾏叠加
- 清除内外边距:* { padding:0; margin:0;}
- 圆角边框:border-radius:10px;圆的半径 四个角分开写:border-top-left-radius:10px;
- 盒子阴影:
box-shadow:h-shadow水平阴影 / v-shadow垂直阴影 / blur模糊距离(虚,实)/
spread影子尺寸 / color / insert改为内阴影 - box-sizing: border-box;确保元素的宽度和高度包括边框和内边距在内。
- border: none;:移除边框。
- outline: none;:移除轮廓样式。
-
默认盒⼦属性:box-sizing: content-box; width只包含内容宽度,不包含border和padding offsetWidth = (width + padding + border),不算 margin
<br />举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 150px;
margin: 200px auto;
/* 阴影设置 h-shadow 水平阴影;v-shadow 垂直阴影; */
/* blur 虚实;spread 阴影尺寸;color;inset 内阴影; */
/* box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3); */
}
div img {
width: 100%;
height: 100%;
}
div:hover {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
width: 310px;
height: 160px;
}
</style>
</head>
<body>
<div>
<img src="魈.png" alt="">
</div>
</body>
</html>
效果如下:
- 文字阴影:text-shadow:h-shadow水平阴影 / v-shadow垂直阴影 / blur模糊距离(虚,实)/
color
text-shadow: 8px 8px 8px rgba(0,0,0,0.3);
6.浮动
让块级盒子排成一排,或者左右对齐。
语法:选择器 { float:属性(none不浮/left左浮/right/右浮)}
特性:
- 脱离标准流
- 不再保留标准位置
- 浮动盒子一行内显示并顶端对齐排列,父级宽度装不下,另起一行排列
- 具有行内块元素特性
清除浮动原因:
- 父级没宽度
- 子盒子浮动了
- 影响下面布局
清除浮动方法:
- 选择器 { clear:属性(left/right/both)}
- 父级: overflow:hidden/auto
- 给父级添加after伪元素,尾部添加空元素
d. 使用before和after双伪元素清除浮动
7.定位
定位=定位模式+边偏移
- 相对定位:选择器:{ position:relative; }
相对于原先位置移动,不脱标,保留原来位置。
left:20px;
top:20px; - 绝对定位:选择器:{ position:absolute; }
不再占用原来位置, 元素会整体脱离普通流,
没有父元素或父元素没有定位,则以浏览器为准定位;
祖先有定位,则以最近一级有定位的父级元素为准定位。
子绝父相:子元素绝对定位,父元素相对定位。 - 固定定位:选择器:{ position:fixed; }
以可视窗口为参照点固定元素,不占用原来位置,是特殊的绝对定位。 - 定位的叠放次序:选择器:{ z-index:1; }
数值越大,盒子越靠上,盒子越在表面;没有标准,后来者居上。 - 绝对定位的盒子居中:
left:50%; 移到中心右侧
margin-left:-100px;让盒子向有移动自身宽度的一半。 - 行内元素添加固定定位,可设置高度与宽度。
- 块级元素添加定位,不设宽高,默认内容大小。
8.元素的显示与隐藏
- display属性:
display:none;隐藏后不在占用原来位置;
display:block;显示出来。
display: flex;: 将body元素的显示模式设置为弹性盒子,以便于内部元素的对齐和排列。 - visibility属性:
visibility:visible;元素可视;
visibility:hidden;元素隐藏,继续占用原先位置。 - overflow溢出:
overflow:visible;溢出显示
overflow:hidden;隐藏多余部分;
overflow:scroll;显示流动条;
overflow:auto;溢出时显示流动条,不溢出不显示。 - 鼠标经过盒子,盒子显示出来:.box:hover .a { display:block;}
- opacity指定了一个元素的透明度,其默认值为1, **opacity: 0:**将元素的透明度设置为0,以此来实现元素的隐藏。元素在⻚⾯中仍然占据空间,并且能够响应元素绑定的监听事件。
- position: absolute:通过使⽤绝对定位将元素移除可视区域内,以此来实现元素的隐藏。
- z-index: 负值:来使其他元素遮盖住该元素,以此来实现隐藏。
- transform: scale(0,0):将元素缩放为0,来实现元素的隐藏。这种⽅法下,元素仍在⻚⾯中占据位置,但是 不会响应绑定的监听事件。
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* display:none/block 隐藏后不在占用原来位置*/
/* visibility:visible/hidden 隐藏后继续占用原来位置*/
/* 溢出overflow:visible/hidden 隐藏多余部分 */
div {
margin: 200px auto;
width: 200px;
height: 200px;
background-color:antiquewhite;
/* overflow: hidden; */
/* overflow: scroll;显示滚动条 */
/* overflow: auto;需要时显示滚动条 */
overflow: auto;
}
</style>
</head>
<body>
<div>师资力量,是一所高校高校软硬件实力的具体体现,是一所高校综合实力的重要指标。教师数量的多少,在一定程度上可以看出其高校的办学规模、师资力量等。拥有的教师越多,说明其办学规模越大,学科发展越完善,师资力量也就越强。
那么,对于我国综合实力较强的双一流高校而言,哪些高校的教师数量相对较多呢?哪些高校的办学规模越大呢?下面,我们就来看一看2022年教师数量排名,看一看你的学校有多少的教师。仅供考生和家长参考。</div>
</body>
</html>
效果如下:
9.CSS高级技巧
- 更改鼠标样式:
<ul>
<li style="cursor: default;">默认样式</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: move;">十字移动</li>
<li style="cursor: text;">文本</li>
<li style="cursor: not-allowed;">禁止</li>
</ul>
- 表单轮廓线:outline:none;
防止拖拽文本域:resize:none; - 文字与行内块元素对齐:
<style>
img {
width:400px;
height: 250px;
/* vertical-align: baseline;基线对齐 */
/* vertical-align: top;顶部对齐 */
/* vertical-align: bottom;底线对齐 */
vertical-align: middle;
}
body {
/* 居中对齐,图片底部没有空隙 */
border: 2px solid red;
}
</style>
效果如下:
- 文本溢出显示省略:
div {
/* width: 100px;
/* 强制显示一行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
/* 溢出显示省略号 */
text-overflow: ellipsis;
/* 以上是单行省略 */
/* display: -webkit-box;
/* 控制第几行省略号
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;*/
}
10.HTML5新特性
- 新增语义化标签
头部标签
- 音频
<audio src=“爱情转移.mp3” controls=“controls”(音频界面)>
autoplay=“autoplay”(自动播放)/ loop=“loop”(循环播放) - 视频
<!-- autoplay 自动播放 muted 静音
loop 循环播放 poster 封面 -->
<video src="云曦.mp4" autoplay="autoplay"
muted="muted" controls="controls"></video>
- input类型
<ul>
<li>邮箱:<input type="email"/></li>
<li>网址:<input type="url"/></li>
<li>日期:<input type="date"/></li>
<li>时间:<input type="time"/></li>
<li>月份:<input type="month"/></li>
<li>周:<input type="week"/></li>
<li>数字:<input type="number"/></li>
<li>手机号码:<input type="tel"/></li>
<li>搜索框:<input type="search"/></li>
<li>颜色选择表单:<input type="color"/></li>
</ul>
效果如下:
- 表单属性:
<form action="">
<!-- required 内容不能为空 placeholder 提示文本
autofocus 自动聚焦 multiple 选择多个文件-->
<input type="text" required="required" placeholder="请填写" autofocus="autofocus">
<input type="file" multiple="multiple">
<input type="submit" value="提交">
</form>
11.CSS3新增属性
- CSS3新增属性选择器:
- 结构伪类:
结构伪类选择器主要根据文档结构来选择元素,常用于父级选择器里面的子元素
**nth-child( n )**选择某个父元素的一个或多个特定的子元素
· n可以是数字,关键字和公式
· n如果是数字,就是选择第n个子元素,里面数字从1开始…
· n可以是关键字:even(偶数)、odd(奇数)
n从0开始,往后+1。
- 伪元素选择器:
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
div {
width: 200px;
height: 200px;
background-color: cornflowerblue;
}
div::before {
content: '我在前面 ';
}
div::after {
content: ' 我在后面';
}
</style>
</head>
<body>
<div>我在中间</div>
</body>
</html>
- CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
1.box-sizing: content-box盒子大小为width + padding + border (以前默认的)
2.box-sizing: border-box 盒子大小为width
如果盒子模型改为box-sizing: border-box,那padding和border就不会撑大盒子了(前提是padding和border不会超过width宽度)
- 图片变模糊:filter:blur(5px);数值越大越模糊。
- 计算盒子宽度width: calc函数calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100%-80px); - cursor: pointer;:设置光标为手型,表示可点击。
- CSS3过渡,从一个状态到另一个状态:
transition:属性 花费时间 运动曲线(ease)可省略 何时开始(os)可省略
所有属性:all,几个属性加逗号隔开。 - 渐变 线性渐变: linear-gradient(red, green, blue);
径向渐变:radial-gradient(red, green, blue) - 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
举例:
<style>
div {
width: 200px;
height: 150px;
background-color: crimson;
/* transition: 属性 花费时间 运动曲线 何时开始; */
transition: background-color 2s, width 4s;
}
div:hover {
background-color: rgb(18, 18, 108);
width: 400px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 30px;
border: red solid;
}
.box2 {
width: 100%;
height: 100%;
background-color: red;
transition: height 3s;
}
.box1:hover .box2 {
height: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
12.flex布局
弹性布局。可以 简便、完整、响应式地实现各种⻚⾯布局。为盒模型提供最⼤的灵活性。
⽗容器和⼦容器构成,通过主轴和交叉轴控制⼦容器排列布局,⼦元素float、clear和vertical-align属性失效
flex布局的作用
- 在父内容里面垂直居中一个块内容
- 使容器的所有子项占用等量的可用宽度/高度,而不管有多少宽度 / 高度可用
- 使多列布局中的所有列采用相同的高度,即使它们包含的内容量不同
flex 布局内的容素将按照主轴 main axis 或交叉轴 cross axis 排列。
主轴方向flex-direction
- **row **(默认):从左到右 ltr ;从右到左 rtl
- **row-reverse **:从右到左 ltr ;从左到右 rtl
- column: 相同, row 但从上到下
- column-reverse: 相同, row-reverse 但从下到上
换行flex-wrap
- **nowrap **(默认)不换行
- **wrap **一行放不下时换行
- **wrap-reverse **弹性项目将从下到上换行成多行
项目群对齐 justify-content align-items
justify-content 决定子元素在主轴方向上的对齐方式,认是 flex-start:
.container {
justify-content: flex-start | flex-end | center | space-between | space-around |
space-evenly | start | end | left | right ... + safe | unsafe;
}
align-items 决定子元素在交叉轴方向上的对齐方式,默认是 stretch
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline
| last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
多行对齐 align-content
当容器内有多行时,align-content 定义多行的对齐方式
.container {
align-content: flex-start | flex-end | center | space-between | space-around |
space-evenly | stretch | start | end | baseline | first baseline
| last baseline + ... safe | unsafe;
}
间距 gap row-gap column-gap
设置容器内项目之间的间距,只控制项目与项目的间距,对项目与容器的间距不生效
.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
flex子项
section div:nth-child(1){
//占1份
flex: 1;
width: 100px;
height: 150px;
background-color: blue;
}
section div:nth-child(2){
/* 剩余空间分成n分,都给2号孩子 */
flex: 3;
background-color: red;
}
section div:nth-child(3){
flex: 1; //占1份
width: 100px;
height: 150px;
background-color: rgb(159, 159, 184);
}
p {
display: flex;
width: 60%;
height: 500px;
background-color: beige;
margin: 100px auto;
/* 生成渐变色 top从上到下 两个从左上到右下*/
background: -webkit-linear-gradient(left top,green,blue);
}
p span {
/* 盒子分成三等份 */
flex: 3;
border: solid 1px white;
}
13.CSS3 2D(transform)
- **transform:translate(x,y);
**translate不会影响其他盒子,百分比是相对于自身元素的。 - rotate旋转:
**transform:rotate(度数)(45deg)
**默认正值顺时针转。
设置旋转中心点:transform-origin:x,y;默认是(50%,50%)or (center,center)or(50px,50px) - scale缩放
**transform:scale(1)1就是1倍,2就是2倍。
**优点:可以设置缩放的中心点:transform-origin:x,y; - 同时多个转换:
transform:translate()rotate()scale()…
位移在最前面
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
div img {
width: 100%;
height: 100%;
transition: all 1s;
}
.genshen:hover img {
transform: translate(200px,200px) rotate(360deg) scale(1.5);
}
</style>
</head>
<body>
<div class="genshen">
<img src="../12.原神网页模仿制作/upload/原神图标.webp" alt="">
</div>
</body>
</html>
14.CSS动画
- 动画基本使用:先定义动画,在调用动画。
<style>
div img {
width: 800px;
height: 500px;
/* 调用动画 */
animation-name: go;名称
animation-duration: 3s;持续时间
}
/* 定义动画 */
@keyframes go {
/* 开始状态 */
0% {
transform: translateX(1000px);
}
/* 结束状态 */
100% {
transform: translateX(0px);
}
}
</style>
- 动画序列:改变任意多个样式的次数
中间的坐标值对应的是整个x,y轴上的坐标。
<style>
div img {
width: 800px;
height: 500px;
/* 调用动画 */
animation-name: go;
animation-duration: 6s;
}
/* 定义动画 */
@keyframes go {
/* 开始状态 */
0% {
transform: translateX(1000px);
}
25% {
transform: translateX(0px);
}
50% {
transform: rotate(90deg);
}
75% {
transform: translateY(500px);
}
/* 结束状态 */
100% {
transform: translateX(-500px);
}
}
</style>
- 常见属性:
opacity:1;透明度0~1。
速度曲线:
/* steps()动画分几步走 */
animation: do 4s forwards steps(6);分多少步
linear 匀速;ease 低-高-低;ease-in 低开始;
ease-out 低结束;ease-in-out 低开始,低结束
<style>
div img {
width: 600px;
height: 400px;
/* 调用动画 */
animation-name: go;
animation-duration: 3s;
/* 运动曲线 */
animation-timing-function: ease(默认);linear 匀速
/* 延时 */
animation-delay: 0s;
/* 重复次数 infinite无限次*/
animation-iteration-count: 100;
/* 是否逆向播放 normal 不反向 ;alternate 反向播放 */
animation-direction: alternate;
/*running 运行;paused 暂停 */
animation-play-state:running;
/* 结束后,backwards 回到起始状态;forwards 停在结束状态 */
/* animation-fill-mode: forwards; */
}
img:hover {
/* running 运行;pause 停顿 */
animation-play-state: paused;
}
/* 定义动画 */
@keyframes go {
/* 开始状态 */
0% {
transform: translate(0px,0px);
}
100% {
transform: translate(1000px,0px);
}
}
</style>
举例:小熊奔跑
<style>
body {
background-color: blue;
}
div {
position: absolute;
width: 137px;
height: 70px;
bottom: 10%;
background: url(小熊.png) no-repeat;
animation: run 0.5s forwards steps(8) infinite,move 2s forwards;
}
@keyframes run {
0%{
background-position: 0 0;
}
100% {
background-position: -1129px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
</style>
效果如下:
15.3D转换
-
3D移动:translate3d(x,y,x);分开写:translateX(100px);
透视 perspective:200px(视距,越小越立体)透视写在被观察元素的父盒子里 -
3D旋转 rotate3d(x,y,z,deg);
transform:rotateX(45deg); -
3D呈现transfrom-style
写给父元素,影响子元素。
<style>
body {
perspective: 500px;
}
.box {
perspective: 500px;
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
transition: all 1s;
/* 让子元素保持3D环境 */
transform-style: preserve-3d;
}
.box:hover {
transform:rotateY(60deg);
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color:chartreuse;
}
.box div:last-child {
background-color: coral;
transform: rotateX(60deg);
}
- backface-visibility: hidden; 隐藏背面
两面翻转案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 1s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
border-radius: 50%;
backface-visibility: hidden;
}
.front {
background-color: blue;
}
.back {
background-color: burlywood;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">我是枫原万叶</div>
<div class="back">我是迪卢克</div>
</div>
</body>
</html>
16.响应式布局
1.百分比布局
百分比是相对于 包含块 的计量单位,通过对属性设置百分比来适应不同的屏幕
包含块:
-
- 有父元素相对于父元素
-
- 无父元素相对于视口
-
- 或者继承于父元素
2.rem布局
rem单位是相对于字体大小的html元素,也称为根元素。 默认情况下,html元素的font-size为16px。所以此时1rem = 16px,当⻚ ⾯的size发⽣变化时,只需要改变 font-size 的值,那么以 rem 为固定单位的元素的⼤⼩也会发⽣响应的变化。
3.媒体查询@meda screen
通过媒体查询,可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局,比如我们为不同分辨率的屏幕,设置不同的背景图片。比如给小屏幕手机设置@2x图,为大屏幕手机设置@3x图,通过媒体查询就能很方便的实现。
但是媒体查询的缺点也很明显,如果在浏览器大小改变时,需要改变的样式太多,那么多套样式代码会很繁琐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 1rem;
font-size: .5rem;
background-color: rgb(71, 71, 40);
color: crimson;
text-align: center;
line-height: 1rem;
}
@media screen and (min-width:500px) {
body {
background-color: blue;
}
html {
font-size: 50px;
}
}
@media screen and (min-width:1000px) {
body {
background-color: rgb(6, 6, 19);
}
html {
font-size: 100px;
}
}
</style>
<!-- 引入资源 -->
<link rel="stylesheet" href="网页1" media="screen and (min-width:500px)">
<link rel="stylesheet" href="网页2" media="screen and (min-width:1000px)">
</head>
<body>
<div>
打击我发我属牛
</div>
</body>
</html>
17.BFC(块级格式化上下文)
- BFC是一个块级元素,块级元素在垂直方向上依次排列。
- BFC是一个独立的容器,内部元素不会影响容器外部的元素。
- 属于同一个BFC的两个盒子,外边距margin会发生重叠,并且取最大外边距。
- 计算BFC高度时,浮动元素也要参与计算。
如何创建BFC?
给父级元素添加以下任意样式
- overflow: hidden;
- display: flex;
- display: inline-flex;
- display: inline-block;
- position: absolute;
- position: fixed;
BFC有什么作用?
- 解决当父级元素没有高度时,子级元素浮动会使父级元素高度塌陷的问题。
- 解决子级元素外边距会使父级元素塌陷的问题。
- 清除浮动
18.多栏布局
两栏布局
两栏布局的核心是左栏固定宽度,右栏宽度自适应
方式 一:
左栏浮动+固定宽度
右栏设置overflow:hidden(目的是产生bfc,不与左栏重叠)
方式二
父级设置flex布局
左栏固定宽度
右栏flex:1
方式三
父级相对定位
左栏绝对定位
右栏设置margin-left = =左栏宽度
圣杯布局—三列布局
三列布局的核心是左右两栏固定宽度,中间一栏宽度自适应
方式一
左栏左浮动 固定宽度
右栏右浮动 固定宽度
中间一栏设置左右偏移 并且处于html结构的最后
方式二
左右栏绝对定位
中间一栏设置偏移
方式
flex 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
}
.left {
width: 300px;
background-color: red;
color: #fff;
height: 100%;
}
.center {
flex: 1;
background-color: pink;
color: #fff;
height: 100%;
}
.right {
width: 300px;
height: 100%;
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>
</html>