HTML
页面骨架
<!-- 指定浏览器按照什么类型解析下面的代码 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html lang="en">
<!-- 头部标签 -->
<head>
<!-- 编码格式 -->
<meta charset="UTF-8">
<!-- 视口 -> 移动端使用 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题标签 -->
<title>Document</title>
</head>
<!-- 内容标签 -->
<body>
<!-- 内容区/其他的标签... -->
</body>
</html>
1. 标题标签
标签名：h1 ~ h6（双标签）
显示特点：
- 文字加粗
- 字号逐渐减小
- 独占一行（换行）
2. 段落标签
标签名：p（双标签） 显示特点：
- 独占一行
- 段落之间存在间隙
3. 文本格式化标签
- strong 加粗
- em 倾斜
- ins 下划线
- del
删除线
4. 图像标签
<img src=" 图片地址" alt="">
相对路径：从当前文件位置出发查找目标文件
- ./ 表示当前文件所在文件夹目录
- ../ 表示当前文件的上一级文件夹目录
6. 超链接
作用：页面跳转
标签名：a（双标签）
属性：
- 设置跳转地址：href="跳转地址"
- 新窗口跳转：target="_blank"
<a href="http://www.baidu.com">跳转到百度</a>
<a href="./02-文本相关标签.html">跳转到本地文件</a>
<a href="#">不知道跳转地址，使用空链接</a>
7. 表单标签
input：表单button：按钮select``option: 下拉菜单
标签名：input（单标签）
属性：
type=""，属性值不同，表单功能不同placeholder： 提示文本name：表单名称- type属性值如下：
| type 属性值 | 说明 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 复选框（多选框） |
<!-- 文本框 text -->
用户：<input type="text" placeholder="请输入用户名"> <br><br>
<!-- 密码框 password -->
密码：<input type="password" placeholder="请输入密码"> <br><br>
<!-- 单选框 radio （name可以分组）-->
性别：
<input type="radio" name="gender">男
<input type="radio" name="gender">女 <br><br>
班级：
<input type="radio" name="classroom">一班 <br><br>
<!-- 多选框 checkbox -->
爱好：
<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">爬山
<input type="checkbox" name="hobby">游泳 <br><br>
<input type="checkbox"> 是否同意许可 <br><br>
<!-- 多行文本输入 -->
个人简介：
<textarea rows="5" cols="30"></textarea> <br><br>
<!-- 按钮 -->
<button>提交</button>
<button>重置</button>
8. 列表标签
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul嵌套li，ul是无序列表，li是列表条目。
- ul标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
CSS
CSS引入方式
-
- CSS 代码写在head里面的 style 标签 里面
- 2.CSS 代码写在单独的 CSS 文件中（.css）在 HTML的head中， 使用 link标签引入，link + tab键
-
- 行内样式:CSS 写在标签的 style 属性 值里
常用标签
- div：换行显示
- span：一行显示
- 宽度：width
- 高度：height
- 背景颜色：background-color
- 文字大小：font-size
- 文字颜色：color
基础选择器
- 标签选择器写法：div{}
- 类选择器： .类名{}
- id选择器： #id名{}
- 通配符选择器：*{}
3. 文字属性相关
- 文字大小：font-size
- 字体粗细：font-weight
- 字体倾斜：font-style:italic
- 多行文本的间距:line-height
- 文本缩进:text-indent
- 内容水平对齐方式:text-align
- 文本修饰线：text-decoration
- 文字颜色： color
背景图片
- 属性名：background-imageurl(背景图 URL)
- 背景平铺方式
属性名：background-repeat（）
属性值：
- 背景图位置
属性名：background-position（）
属性值：水平方向位置 垂直方向位置
背景图缩放
作用：设置背景图大小
属性名：background-size（）
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
- 百分比：根据盒子尺寸计算图片大小
- 数字 + 单位（例如：px）
边框线
- border（边框线粗细 线条样式 颜色）
内边距、外边距
- 内边距设置内容与盒子边缘之间的距离padding（多用于父子之间）
- 外边距拉开两个盒子之间的距离（多用于兄弟之间）
- 开启內减模式：box-sizing: border-box
盒子阴影
- box-shadow（X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影）
元素显示模式
1 块级元素
- 如div h ul li
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
2行内元素
- 如span strong a
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
行内块元素
- 如img input
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
转换显示模式
属性名：display
复合选择器
后代选择器
- 写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。
子代选择器
- 写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用> 隔开。
并级选择器
- 写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。
交集选择器
- 写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。
伪类选择器
- 鼠标悬停状态：选择器:hover { CSS 属性 }
Flex布局
- Flex 布局也叫弹性布局
- 给父元素设置 display:flex，子元素可以自动挤压或拉伸
- 主轴：默认在水平方向
- 侧轴 / 交叉轴：默认在垂直方向
主轴对齐方式
属性名：justify-content
侧轴对齐方式
- align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
- align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向 属性名：flex-direction 属性值
弹性伸缩比
-
作用：控制弹性盒子的主轴方向的尺寸。
-
属性名：flex
-
属性值：整数数字，表示占用父级剩余尺寸的份数。
弹性盒子换行
-
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
-
属性名：flex-wrap
-
属性值
-
wrap：换行
-
nowrap：不换行（默认）
多行对齐方式
属性名：align-content
属性值
定位
- 定位模式：position
- 属性值： left，right，bottom，top
相对定位
- position:relative
特点：
-
不脱标，占用自己原来位置
-
显示模式特点保持不变
-
设置边偏移则相对自己原来位置移动
绝对定位
position:absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：
- 脱标，不占位
- 显示模式具备行内块特点
- 设置边偏移则相对最近的已经定位的祖先元素改变位置
- 如果祖先元素都未定位，则相对浏览器可视区改变位置
定位居中
实现步骤：
-
绝对定位
-
水平、垂直边偏移为 50%
-
子级向左、上移动自身尺寸的一半
-
左、上的外边距为 –尺寸的一半
-
transform: translate(-50%, -50%)
5. 固定定位
-
position:fixed
-
场景：元素的位置在网页滚动时不会改变
-
特点：
-
脱标，不占位
-
显示模式具备行内块特点
-
设置边偏移相对浏览器窗口改变位置
堆叠层级 z-index
-
默认效果：按照标签书写顺序，后来者居上
-
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
-
属性名：z-index
-
属性值：整数数字（默认值为0，取值越大，层级越高）
变换、渐变
平面转换
-
作用：为元素添加动态效果，一般与过渡配合使用
-
概念：改变盒子在平面内的形态（位移、旋转、缩放）
-
平面转换也叫 2D 转换，属性是 transform
平移
- transform：translate（x轴移动距离，Y轴移动距离）;
旋转
- transform：rotate（旋转角度）;
<html>
<head>
<title></title>
<style type="text/css">
.a {
height: 400px;
width: 300px;
margin: 50px auto;
margin-top: 350px;
position: relative;
border-radius: 400px 0;
background: pink;
transform: rotate(45deg);
}
.a1,.a2,.a3,.a4,.a5, .a6, .a7,.a8,.a9 {
height: 400px;
width: 300px;
position: absolute;
border-radius: 400px 0;
transition: all 9s;
background: pink;
transform-origin: 0 400px;
opacity: 0.6;
}
.a:hover :nth-child(1) {
transform: rotate(50deg);
}
.a:hover :nth-child(2) {
transform: rotate(25deg);
}
.a:hover :nth-child(3) {
transform: rotate(70deg);
}
.a:hover :nth-child(4) {
transform: rotate(115deg);
}
.a:hover :nth-child(5) {
transform: rotate(160deg);
}
.a:hover :nth-child(6) {
transform: rotate(210deg);
}
.a:hover :nth-child(7) {
transform: rotate(255deg);
}
.a:hover :nth-child(8) {
transform: rotate(295deg);
}
.a:hover :nth-child(9) {
transform: rotate(330deg);
}
</style>
</head>
<body>
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div class="a6"></div>
<div class="a7"></div>
<div class="a8"></div>
<div class="a9"></div>
</div>
</body>
</html>
转换原点
-
默认情况下，转换原点是盒子中心点
-
transform-origin: 水平原点位置 垂直原点位置;
-
方位名词（left、top、right、bottom、center）
-
像素单位数值
-
百分比
多重转换
- 多重转换技巧：先平移再旋转
- transform: translate() rotate();
缩放
- transform:scale(缩放倍数）;
- transform:scale(x轴缩放倍数，Y轴缩放倍数）
线性渐变
background-image: 1linear-gradient( 渐变方向， 颜色1终点位置， 颜色2终点位置， .... }
