from提交数据，高级选择器，伪类选择器，前端样式等
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>
from提交数据，高级选择器，伪类选择器，前端样式等的更多相关文章
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- 前端 CSS的选择器 伪类选择器
伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> < ...
- HTML(五)选择器--伪类选择器
HTML代码 <body> <a href="www.baidu.com">www.baidu.com</a> </body> CS ...
- 前端 CSS的选择器 伪类选择器 CSS3 nth-child()
first-child 选中第一个标签 应用CSS样式 <!DOCTYPE html> <html lang="en"> <head> < ...
- CSS属性、伪类选择器，CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS中的选择器之html选择器和伪类选择器
1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
随机推荐
- JVM之Java运行时数据区(线程共享区)
JVM运行时区域各线程共享的区域包括堆区和方法区. 堆区 堆区最最主要的功能是存储对象实例[上篇也提到过],因此Java垃圾回收的主要战场就是在堆区,因此也有称为GC堆区.如果堆区的内存不够会出现Ou ...
- nginx中ngx_http_gzip_module模块
⽤用gzip⽅方法压缩响应数据,节约带宽gzip on;gzip_min_length 1000;gzip_proxied expired no-cache no-store private auth ...
- Flask实现简单的群聊和单聊
Flask是使用python写的一个简单轻量级的框架,今天我们使用Flask实现一个简单的单聊和群聊功能 . 主要思路 : 前端登录聊天室,聊天室信息包含用户的登录信息,相当于一个登录功能,会把这个信 ...
- file控件选择同一文件不触发change事件和img控件不改变src的情况下图片不刷新问题解决
最近跑来前端掺和了.. file控件的问题用 inputFile.value = ''; img控件的问题,在图片后面添加一串无意义的参数即可,例如: img.src = 'file:///' + 本 ...
- 后缀自动机求endpos集大小
#include<bits/stdc++.h> #define fi first #define se second #define INF 0x3f3f3f3f #define LNF ...
- 二进制文件方式安装kubernetes集群
所有操作全部用root使用者进行,高可用一般建议大于等于3台的奇数,我们使用3台master来做高可用 练习环境说明: 参考GitHub master: kube-apiserver,kube-con ...
- 51nod 1594 Gcd and Phi 反演
OTZ 又被吊打了...我当初学的都去哪了??? 思路:反演套路? 提交:\(1\)次 题解: 求\(\sum_{i=1}^{n}\sum_{j=1}^{n}\varphi(gcd(\varphi(i ...
- cursor: hand和cursor:pointer的区别
cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行. cursor:hand :IE完全支持.但是在firefox是不支持的,没有效果. cu ...
- 047_批量下载有序文件(pdf、图片、视频等等)
#!/bin/bash#本脚本准备有序的网络资料进行批量下载操作(如 01.jpg,02.jpg,03.jpg)#设置资源来源的域名连接 url="http://www.test.com/& ...
- UDP广播，组播服务器
广播 #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/ ...