day40（浮动）
今日内容详细
《昨日内容回顾》
* form表单简介
```python
# 1.作用
form表单可以获取用户的数据并发送给后端
# 2.参数
action参数
控制提交的后端地址
1.全路径
2.路径后缀
3.不写
method参数
控制提交的提交方式
get(默认方式)
post
# 3.请求方式
get请求
朝服务端索要数据
'''get请求可以携带参数 但是大小有限制 并且数据不太敏感'''
url?name=jason&gender=male
post请求
朝服务端提交数据
'''post请求可以携带参数 存放于请求体中 数据大小没限制'''
Playload>>>:FormData(通常还可以加密处理)
```
* 表单标签
```python
# 1.input标签
type属性
text 普通文本
password 密文展示
date 日期展示
email 邮箱格式
radio 单选
checkbox 多选
默认选中checked='checked'
属性名和属性值相等可以简写checked
file 文件
默认获取单个文件 可以添加multiple属性变多个
submit 提交按钮
button标签也可以触发form表单的提交动作
<button></button>
reset 重置按钮
button 普通按钮
<input type='button'/>
# 2.label标签
主要配合input一起使用(两种编写方式) 也可以不写
# 3.select标签
默认是单选下拉框 可以添加multiple属性变多选
一个个选项是option标签
'''下拉框默认选中 只需要添加selected属性即可'''
# 4.textarea标签
获取大段文本
"""
强调:获取用户数据的标签都应该有两个非常重要的属性
name属性
相当于字典的key
value属性
相当于字典的value(选择类型的标签需要提前设置好value值)
获取数据之后会打包成字典发送给后端 这样后端才能准确的知道数据的含义
"""
```
* css简介
```python
# 1.作用
给HTML标签修改样式
# 2.语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2
}
# 3.三种引入css的方式
style标签内部直接编写(学习阶段推荐使用)
link标签引入外部css文件(工作阶段推荐使用)
标签内部style属性直接编写(行内式不推荐使用)
# 4.css注释语法
/* 注释内容 */
```
* 基本选择器
```python
"""学习css调节标签样式之前应该先学会如何查找标签"""
# 1.标签选择器(直接编写标签名称)
div {...}
# 2.类选择器(利用句点符)
.c1 {...}
# 3.id选择器(利用警号)
#d1 {...}
# 4.通用选择器
* {...}
```
* 组合选择器
```python
"""我们习惯将标签的嵌套层级关系使用亲戚关系来表示"""
# 1.儿子选择器(利用大于号)
div>p {...}
# 2.后代选择器(利用空格)
div p {...}
# 3.毗邻选择器(利用加号)
div+p {...}
# 4.弟弟选择器(利用小波浪号)
div~p {...}
```
* 属性选择器
```python
'''关键符号是中括号'''
[name] 只查找含有name属性的标签
[name='jason'] 查找含有name属性并且值是jason的标签
input[name='jason'] 查找含有name属性并且值是jason的input标签
```
* 分组与嵌套
```python
# 1.多个选择器并列
div,p,span {...}
# 2.不同选择器混用
#d1,.c1,span {...}
"""
div.c1>p
div#d1 p
"""
```
* 伪类选择器
```python
# 1.鼠标悬浮
span:hover {}
# 2.获取焦点
input:focus {}
```
今日内容概要
《伪元素选择器，优先级，CSS》
伪元素选择器
单词大意
font size： 字体大小
first-letter 字母首字母将样式添加到文本的首字母
before 在……之前，、
after 在……之后，
content
与上述两个连用
font-family
字体族；字体类型
Microsoft Yahei
微软雅黑 微软雅黑体
1 修改首个字体样式大小颜色
p::first-letter{
color: chartreuse;
font-size: 18px;
}
2 在文本开头添加东西
p::before{
content: '牛马';
color: yellowgreen;
}
3.在文本结尾添加内容
p:after {
content: '你个老六';
color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
（1） p::first-letter{
color: chartreuse;
font-size: 18px;
}
（2） p::before{
content: '牛马';
color: yellowgreen;
}
（3） p:after {
content: '你个老六';
color: yellow;
}
</style>
</head>
<body>
<h1>《春夜喜雨》</h1><br>
<p>好雨知时节</p>
<p>当春乃发生</p>
<p>随风潜入夜</p>
<p>润物细无声</p>
</body>
</html>
选择优先级
，css其实是有清晰的内部逻辑的，比如在选择器优先级方面，*通配符选择器优先级最低，因为它掌控的范围最广，紧接着是标签选择器、类选择器、最后也是优先级最高的就是id选择器。这里面可以明显发现，越是明确权限范围的优先级越高。其余的就是在此基础上的伪类选择器和伪元素选择器，注意一下语法格式就ok，基本都是遵循自然语言逻辑来的。
1.相同选择器
'就近原则':谁离标签越近就听谁的!!!
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
（class类选择器第三 ） #d1 {
color: red;
}
（id选择器.c1第二） .c1 {
color: yellow;
}
（标签选择器最后） p {
color: green;
}
</style>
</head>
<body>
（ style行内优先级最高第一） <p style="color: orange" class="c1" id="d1">遇事不决问百度</p>
</body>
</html>
CSS选择器是所有选择器的基础
后期框架提供的、后期爬虫模块提供的
所以CSS选择器一定要学好 这样后面学前端框架和爬虫都会轻松不少
字体样式、
bolder 加粗
lighter 变细
# 文字字体
font-family: "Microsoft Yahei"
# 字体大小
font-size: 24px
# 字体粗细
font-weight: lighter\bolder
# 字体颜色
方式1:
color: red;
方式2:
color: rgb(128, 128, 128);
方式3:
color: #4f4f4f;
"""
获取颜色的方式有很多
1.截图软件自带取色功能
微信、qq自带颜色编号 #4f4f4f
2.pycharm提供的取色器
左侧颜色块点击即可
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
/* 控制字体大小 */
font-size: 24px;
font-family: "Microsoft
}
.c1 {
/* 控制字体粗细 */
font-weight: lighter;
font-weight: bolder;
color: red;
}
.c2 {
/* 控制字体变色 */
font-weight: bolder;
color: rgb(128, 128, 128);
}
.c3 {
color: #91afdd;
}
</style>
</head>
<body>
<p class="c1">齐辉天天说表妹发抖音了没 这是啥情况啊</p>
<p class="c2">一个人天天吃独食 好东西不分享</p>
<p class="c3">酒桌朋友 不够意思 还不赶紧私聊</p>
</body>
</html>
文字属性
在CSS中，文字相关的属性有4个，分别是：文字样式、文字粗细、文字大小以及文字字体种。
1、文字样式的格式：font-style:"xxx";
2、文字粗细的格式：font-weight:"xxx";
3、文字大小的格式：font-size:"xxx";
4、文字字体的格式：font-family:"xxx";
center：居中
left：向左
right：向右
indent： 缩进
decoration ： 装饰，装饰品
underline:上边线
overline: 下划线
line through：删除线
<a href="https://www.sogo.com">百万大奖</a>
# 文字对齐
text-align:center/left/right
# 文字装饰(重点)
"""a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)"""
text-decoration: none; 主要就是用于去除a标签的下划线
text-decoration: line-through; 删除线
text-decoration: overline; 上边线
text-decoration: underline; 下划线
# 首行缩进
text-indent: 32px; # 首行缩进32px
"""
补充:可以使用浏览器做样式的动态调整
查找到标签的css 然后左键选中 通过方向键上下动态修改数值
"""
背景属性
分为两种：背景颜色，背景图片
background-attachment:fixed
(蚌壳ruang的啊它吃门特)
背景滚动模式 属性 固定背景 背景图片滚动属性
background:背景 后台 背景介绍
background-color
背景颜色 背景色 色彩 背景颜色属性
background-position
背景定位 背景图片初始位置 属性 背景位置
background-repeat
背景重复方式 属性 重复方式 背景图片重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
/*background-color: #91afdd;*/
height: 800px;
width: 800px;
background-image:url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
background-repeat: no-repeat; 不填充
background-repeat: repeat-x; 横向填充
background-repeat: repeat-y; 纵向填充
background-repeat: no-repeat;
background-position: 100px 50px;
background-position: center center;
background: pink url("111.png") no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框
边框,在页面布局中经常使用的一个布局,其边框的大小,形状,颜色等等直接影响到整个页面的布局,而一个精致的布局直接给人以视觉上的冲击.
使用边框通用定义类来快速设置元素的边框和边框半径,适用与图像,按钮或任何其他元素.
border：边框
left左边向左
top 上边顶部
right右边
bottom底部
border-radius
圆角 边框圆角 圆角边框 圆角效果
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
# 1.自定义调整每个边的边框
border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/bottom-style: solid;
# 2.统一调整每个边的边框
border: 5px solid black; 顺序无所谓 只要给了三个就行
"""
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
# 3.画圆
border-radius: 50%
如果长宽一样那么就是圆 不一样就是椭圆
display属性
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。
"""
只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
"""
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
盒子模型\
什么是盒子模型？
把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。
# 所有的标签其实都有一个盒子模型
学习盒子模型可以将标签看成是一个个快递盒
"""
快递盒组成部分 盒子模型
内部物品 content(内容)
内部物品与盒子内部的距离 padding(内边距、内填充)
盒子的厚度 border\边框
盒子与盒子之间的距离 margin(外边距)
ps:两个标签之间的距离 有时候可以用margin也可以用padding
"""
# 1.body标签默认自带8px的margin值 我们在编写页面之前应该去掉
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin: 1px 2px 3px 4px 上 右 下 左
margin: 1px 2px 3px 上 左右 下
margin: 1px 1px 上下 左右
margin: 1px 统一设置一个值
# 2.padding用法与margin一致
同上
盒子模型页面布局
标签的水平居中 可以使用固定搭配
margin: 0 auto;
浮动(重要)
# 1.浮动的作用
float: left/right;
"""
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
是多个块儿级标签可以在一行显示(全部飘在了空中)
"""
# 2.浮动的影响
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
补充说明:
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来
解决浮动造成的影响
clear: left; 规定元素的哪一侧不允许其他浮动元素
推导流程
1.直接写div然后写对应的长宽
2.写div然后添加clear属性 避免去查找长宽
3.万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}
"""
以后写网页 提前写好上面的代码
然后哪个标签塌陷了就给谁添加上clearfix类名即可
很多前端页面框架使用的也是clearfix类名
"""
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 一文读懂知识蒸馏
· 终于写完轮子一部分：tcp代理 了，记录一下