1. form提交数据
get: 不安全的提交数据，高效
post: 安全的提交数据，低效
前台都可以给后台提交数据，后台一定会给前台一个反馈结果
2. 高级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-size: 30px;
}
/* 高级性选择器优先级比较：
无限大于：id > class > 标签
种类相同：比个数
个数相同：比顺序
高级选择器种类不影响优先级
*/
/* 所有的p标签*/
.p {
color: red;
}
/* 群组选择器,控制多个 */
/* 每个选择器位，可以为id、class、标签、选择器组合，中间用空格隔开 对所有选择器位的都有效果*/
#p, .p, .div {
color: crimson;
}
/* 后代(子代)选择器：控制一个标签， 前方的都是修饰*/
.div .div .div { /* 后代 空格 父子（孙）只要前面两个是 .div，在第三层或者第四层，子子孙孙层的.div均有效） */
color: yellow;
}
body .div {
color: red;
}
.div > div > .p { /* 子代 > 父子*/
color: yellow;
}
/* 兄弟（相邻）选择器：控制一个标签，前方的都是修饰*/
.div ~ .div { /* 兄弟~, 可相邻也可不相邻，但必须通过上方修饰下方*/
color: chartreuse;
}
.div + .p { /* 相邻 + ，必须相邻，必须通过上方修饰下发*/
color: blue;
}
</style>
</head>
<body>
<i>第一个i标签</i>
<p class="p">第一个p标签</p>
<div class="div">第一个div标签</div>
<p class="p">第二个p标签</p>
<div class="div">
<p class="p">div下的第一个p</p>
<i class="i">div下的i标签</i>
<div class="div">
<div class="p">div下的div下的p标签</div>
<div class="div">div下的div下的div标签</div>
<div id="p">
<div class="p">id=p下的div标签</div>
<div class="div">id=p下的div标签</div>
</div>
</div>
</div>
</body>
</html>
3. 伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1.()内填的是编号，因此需要从1开始
2.伪类选择器可以单独出现，相当于省略了统配
3.:nth-child先匹配层级位置，再匹配你标签
4.:nth-of-type先匹配标签类型，再匹配层级位置
*/
/*:nth-child(1) { !* :前省略了类名，相当于通配所有的类*!*/
/*color: orange;*/
/*}*/
/*i:nth-child(4) { !* 先匹配位置4，再匹配类型i*!*/
/*color: red;*/
/*}*/
/*i:nth-of-type(1) { !* 先匹配类型i,再匹配第一个位置*!*/
/*color: blue;*/
/*}*/
</style>
<style>
.box {
width: 150px;
}
.pp {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
float: left;
text-align: center;
line-height: 50px;
}
/* 匹配2的倍数，即2n偶数 2n-1|2n+1奇数 3n最后一列 3n+1|3n-2第一列 3n-1中间列*/
/*.pp:nth-child(3n-1) {*/
/*color: orange;*/
/*}*/
</style>
</head>
<body>
<i class="i3">iiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
<div>
<i class="i3">iiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
</div>
<a class="a1 a2" href="https://www.baidu.com">前往百度</a>
<div class="box">
<p class="pp p1">p1</p>
<p class="pp p2">p2</p>
<p class="pp p3">p3</p>
<p class="pp p4">p4</p>
<p class="pp p5">p5</p>
<p class="pp p6">p6</p>
<p class="pp p7">p7</p>
<p class="pp p8">p8</p>
<p class="pp p9">p9</p>
</div>
</body>
</html>
4. a标签的四大伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 链接的初始状态*/
a:link {
color: deepskyblue;
}
/* 链接的悬浮状态*/
a:hover {
color: blue;
cursor: pointer; /* 当鼠标进入超链接的范围内，会自动变成小手指的状态*/
}
/* 链接的激活状态*/
a:active {
color: deeppink;
}
/* 链接的已访问状态 */
a:visited {
color: yellow;
}
</style>
<style>
body {
/* 文本不能被选择 */
user-select: none;
}
.btn {
width: 80px;
height: 40px;
background-color: cornflowerblue;
border-radius: 5px;
text-align: center;
line-height: 38px;
color: white;
}
.btn:hover {
cursor: pointer;
background-color: deepskyblue;
}
.btn:visited{
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">前往百度</a>
<div class="btn">按钮</div>
</body>
</html>
5. 文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div {
width: 200px;
height: 200px;
background-color: orange;
}
.div {
/* 字体大小：最小是12px, 还需要更小就要更换字体*/
font-size: 30px;
/*字重: 100~900 bold normal lighter (粗，常规，细)*/
font-weight: lighter;
/* 字体颜色 */
color: red;
/* 字体的水平位置 left center right */
text-align: center;
/* 行高(垂直位置)：默认文本在所在行高中垂直居中，要实现文本的垂直居中，让行高 = 容器高 */
line-height: 200px;
/*文本划线: underline line-through overline none*/
text-decoration: underline;
}
a {
text-decoration: none;
}
i {
font-style: normal;
}
</style>
</head>
<body>
<div class="div">文本</div>div
<a href="www.baidu.com">aaaaaa</a>
<i>倾斜标签</i>
</body>
</html>
6. 背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
width: 300px;
height: 300px;
background-color: tomato;
}
.bg {
/* 背景样式 */
background-color: red;
/* 背景图片 */
background-image: url("img/001.png");
/*平铺: no-repeat repeat repeat-x repeat-y */
background-repeat: no-repeat;
/* 背景定位 x轴(left center right) y轴(top center默认 bottom) */
/*background-position: center bottom;*/
/*指定尺寸移动*/
/*background-position: 100px 100px;*/
/*反向移动*/
background-position: 10px -10px;
}
</style>
</head>
<body>
<div class="bg">12345</div>
</body>
</html>
7. 背景样式案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: cornflowerblue;
}
.h1 {
width: 500px;
height: 100px;
background-color: tomato;
}
.h1 {
background-image: url("img/bg.png");
background-position: 0 -150px;
}
.h1:hover {
background-position: 0 -250px;
}
</style>
<style>
.p1 {
width: 155px;
height: 48px;
background-color: green;
background-image: url("img/bg.png");
}
.p2 {
width: 157px;
height: 48px;
background-color: green;
background-image: url("img/bg.png");
background-position-x: -155px;
}
.p1:hover, .p2:hover {
background-position-y: -48px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="h1"></div>
<p class="p1"></p>
<p class="p2"></p>
</body>
</html>
8.边界圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 400px;
height: 200px;
background-color: red;
}
.box {
/*border-radius: 50%;*/
/*左上是第一个角，顺时针编号，不足找对角，只有一个值同时控制4个角*/
/*border-radius: 10px 20px 30px 40px;*/
/*border-radius: 10px 20px 30px;*/
/*border-radius: 10px 20px;*/
/*border-radius: 100px;*/
/* 横向 / 纵向 */
/*border-radius: 50% / 50px;*/
/* 横向1,2,3,4 / 纵向13,24 */
border-radius: 10px 20px 30px 40px / 50px 100px;
border-radius: 200px 200px 0 0 / 200px 200px 0 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
9. 显示方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
block：1.可以手动设置宽高 2.自带换行 3.支持所有css样式
inline：1.宽高只能由文本内容撑开，不能手动设置 2.不带换行 3.支持部分css样式
inline-block：1.可以手动设置宽高 2.不带换行 3.支持所有css样式
*/
/*
嵌套关系
block：可以嵌套block、inline、inline-block
div、li搭架构的，可以任意嵌套 h1~h6、p 建议只嵌套inline，就是用来转文本的
inline：只用来嵌套inline
span、i、b、em、strong a一般都会修改其display为block
inline-block：不建议嵌套任何
img input系统都设计成了单标签
none：没有显示方式，就会在页面中隐藏
*/
/*
开发时：修改display的情况 - 要支持宽高，要更改位置(水平排列还是垂直排列)
*/
div {
display: block;
width: 100px;
height: 100px;
background-color: red;
}
span {
display: inline;
width: 100px;
height: 100px;
background-color: orange;
}
owen {
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<style>
a {
display: block;
width: 100px;
background-color: brown;
border: 1px solid black;
}
img {
width: 100px;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div>divdivdiv</div>
<div>divdivdiv</div>
<span>spanspanspan</span>
<span>spanspanspan</span>
<owen>owenowenowen</owen>
<owen>owenowenowen</owen>
<a href="https://www.baidu.com">
<img src="img/bd_logo.png" alt="">
<p>前往百度</p>
</a>
</body>
</html>
10. block的显示规则
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*display：
不同的标签在页面中有不同的显示规则
如有些是自带换行、有些同行显示、有些同行显示还支持宽高，这些不是标签的特性，而是标签的display属性值决定的
完成复杂的布局和样式，标签的显示方式都采用 block
a {
display: block;
}
a可以任意嵌套其他标签，还可以设置宽高，还支持所有css样式，但是a不再同行显示了(block自带换行)
如果解决block同行显示 => css布局
*/
/*
inline: 同行显示，不用去关宽高，不用额外操作
inline-block: 同行显示, 一般会主动设置宽或高、设置宽，高会等比缩放，反之亦然
有inline特性的标签，同行显示，但是有默认垂直对其方式vertical-align
*/
/*
block：默认显示规则
宽继承父级，高由内容撑开
*/
img {
border: 1px solid black;
}
.img1 {
width: 200px;
}
.img2 {
height: 200px;
}
span, img {
/*baseline基线 middle中线 top顶线*/
vertical-align: middle;
}
</style>
<style>
div {
height: 100px;
border: 1px solid black;
display: inline-block;
}
.d1 {
width: 200px;
}
.d2 {
width: 500px;
}
.d3 {
width: 200px;
}
</style>
</head>
<body>
<span>123</span>
<span>456</span>
<img class="img1" src="img/bd_logo.png" alt="">
<img class="img2" src="img/bd_logo.png" alt="">
<hr>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
11.overfloww属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1、规定了标签的宽高，标签的内容超出范围
2、规定了标签的宽高，标签内的子标签显示区域更大，超出范围
如何让父级宽高限制内容和子集
*/
.box {
width: 200px;
height: 200px;
background-color: orange;
/*内容超出，都会以 hidden 处理影藏，如果想显示全内容，采用子页面*/
/*hidden：影藏超出内容 scroll：以滚动显示超出内容 auto：有超出内容才滚动显示*/
overflow: hidden;
}
.sup {
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
}
.sub {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字</div>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>