渐变
<!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: 200px;
height: 200px;
/*
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过滤的效果
渐变就是图片，需要通过background-image来设置
linear-gradient
线性渐变，颜色沿着一条直线发生变化
可以指定一个渐变的方向
to left
to right
to top
to bottom
deg 表示度数
turn 表示圈
渐变可以指定多个颜色，默认情况下平均分布
在颜色后面可以指定大小来设置颜色的分布大小
repeating-linear-gradient
可以平铺的线性渐变
*/
background-image: linear-gradient(to left,red 50px,yellow);
}
.box2 {
width: 200px;
height: 200px;
/*
radial-gradient
径向渐变(放射性效果)
默认情况下径向渐变的形状根据元素的形状来计算的
正方形 -> 圆形
长方形 -> 椭圆形
也可以手动指定径向渐变的大小
radial-gradient(大小 at 位置, 颜色 位置, ...)
大小
circle 圆形
ellipse 椭圆形
elosest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置
left right top bottom center
*/
background-image: radial-gradient(50px 50px at center center,red,yellow);
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
表格
<!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>
/*
表格的样式
*/
.tb {
width: 50%;
border: 1px solid black;
/*
表格也是块元素，页面居中
*/
margin: 0 auto;
/*
border-spacing 指定边框之间的距离
*/
/* border-spacing: 0px; */
/*
border-collapse 设置边框的合并
*/
border-collapse: collapse;
}
.tb td {
border: 1px solid black;
/*
在默认情况下元素在td中是垂直居中的
可以通过vertical-align设置
*/
vertical-align: middle;
text-align: center;
}
/*
实现隔行变色的效果
odd(2n+1)
*/
.tb tr:nth-child(odd) {
background-color: aqua;
}
/*
如果表格中没有使用tbody而是直接使用tr
那么浏览器会自动创建一个tbody并且将tr全部放到tbody中
因此tr并不是table的子元素
*/
.box1 {
width: 100px;
height: 100px;
background-color: black;
/*
将元素设置为单元格
*/
display: table-cell;
/*
有设置了display: table-cell;才生效
*/
vertical-align: middle;
}
.box2 {
width: 20px;
height: 20px;
background-color: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<table border="1" width="50%" align="center">
<!--
在table中使用tr表示表格中的一行，有几个tr就有几行
-->
<tr>
<!--
在tr中使用td表示一个单元格，有几个td就有几个单元格
-->
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<!--
rowspan 纵向合并单元格
-->
<td rowspan="2">F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<!--
colspan 横向合并单元格
-->
<td colspan="2">K</td>
</tr>
</table>
<br>
<!--
长表格
可以将表格分成三个部分：
thead 头部
tbody 主体
tfoot 底部
-->
<table border="1" width="50%" align="center">
<thead>
<!--
这里的td可以替换成th
th 表示头部单元格 有居中加粗的样式
-->
<tr>
<!-- <td>头部1</td>
<td>头部2</td>
<td>头部3</td>
<td>头部4</td> -->
<th>头部1</th>
<th>头部2</th>
<th>头部3</th>
<th>头部4</th>
</tr>
</thead>
<tbody>
<tr>
<td>主体1</td>
<td>主体2</td>
<td>主体3</td>
<td>主体4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>底部1</td>
<td>底部2</td>
</tr>
</tfoot>
</table>
<br>
<table class="tb">
<tr>
<td>主体1</td>
<td>主体2</td>
<td>主体3</td>
<td>主体4</td>
</tr>
<tr>
<td>主体1</td>
<td>主体2</td>
<td>主体3</td>
<td>主体4</td>
</tr>
<tr>
<td>主体1</td>
<td>主体2</td>
<td>主体3</td>
<td>主体4</td>
</tr>
<tr>
<td>主体1</td>
<td>主体2</td>
<td>主体3</td>
<td>主体4</td>
</tr>
<tr>
<td>主体1</td>
<td>主体2</td>
<td>主体3</td>
<td>主体4</td>
</tr>
</table>
<br>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
表单
<!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>
</head>
<body>
<!--
表单：
在网页中用于将本地的数据提交给远程的服务器
使用form标签来创建一个表单
form的属性：
action 指定表单提交地址
表单项：
input 文本框
-->
<form action="#">
<!--
文本框
数据要提交，必须要指定一个name
autocomplete 关闭自动补全 自对自身元素生效
readyonly 将表单项设置为只读
disabled 将表单项设置为禁用
autofocus 设置表单项自动获取焦点
-->
<input type="text" name="text1" autocomplete="off" readonly>
<input type="text" name="text2" disabled>
<input type="text" name="text3" autofocus>
<!--
密码框
-->
<input type="password" name="password">
<!--
单选按钮
同一类型选择 name必须一样
必须要有value 才能作为数据进行提交
checked 可以将单选按钮设置为默认选中
-->
<input type="radio" name="number" value="one">
<input type="radio" name="number" value="two" checked>
<!--
多选框
-->
<input type="checkbox" name="word" value="1">
<input type="checkbox" name="word" value="2" checked>
<input type="checkbox" name="word" value="3">
<!--
下拉列表
selected 设置默认选中
-->
<select name="sel">
<option value="a">A</option>
<option value="b" selected>B</option>
<option value="c">C</option>
</select>
<!--
颜色选择器，有兼容性问题
-->
<input type="color">
<!--
邮箱输入框，有格式校验
-->
<input type="email">
<!--
普通按钮
-->
<input type="button" value="按钮">
<button type="button">按钮</button>
<!--
重置按钮
-->
<input type="reset" value="重置">
<button type="reset">重置</button>
<!--
提交按钮
value 指定按钮中的文字
-->
<input type="submit" value="提交">
<button type="submit">提交</button>
</form>
</body>
</html>
