前端学习(三)
前端学习(三)
昨日回顾
form表单
作用：提供前端一个与用户交互的窗口，获取用户数据发送给后端。
参数：
action参数：控制提交的目标地址
method参数：控制提交的提交方式
get：朝服务端索要数据，get请求可以携带参数，但是大小在2kb左右
<form action="" method="get">
post：朝服务端提交数据，post请求可以携带参数 存放于请求体中 数据大小没限制 通常还可以加密处理
<form action="" method="post">
表单标签
input标签
type属性 普通文本
password 密文展示
date 日期展示
email 邮箱格式
radio 单选
checkbox 多选
默认选中checked='checked'
属性名和属性值相等可以简写checked
file 文件
默认获取单个文件 可以添加multiple属性变多个
submit 提交按钮
button标签也可以触发form表单的提交动作
<button></button>
reset 重置按钮
button 普通按钮
<input type='button'/>
label标签
专门给input标签配文字说明(根据情况可使用，可忽略)
方式1
<label for="d1">用户名:</label>
<input type="text" id="d1">
方式2
<label>用户名:
<input type="text">
</label>
select标签
默认是单选下拉框，可以添加multiple属性变为多选
<p>名字:
<select name="province" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
一个个的下拉选项是一个个option标签
<select name="pre_friend" id="" multiple>
添加multiple变成多选
textarea标签
获取大段的文本内容
<p>个人介绍:
<textarea name="desc" id="" cols="30" rows="10"></textarea>
</p>
CSS简介
全称Cascading Style Sheetsx层叠样式表
作用：选择并给HTML标签修改样式
语法：
选择器{
属性名1:属性值1;
属性名2:属性值2
}
三种引入css的方式
style标签内部直接编写(学习阶段推荐使用)
link标签引入外部css文件(工作阶段推荐使用)
标签内部style属性直接编写(行内式不推荐使用)
css注释语法
/* 注释内容 */
基本选择器
"""学习css调节标签样式之前应该先学会如何查找标签"""
# 1.标签选择器(直接编写标签名称)
div {...}
# 2.类选择器(利用句点符)
.c1 {...}
# 3.id选择器(利用警号)
#d1 {...}
# 4.通用选择器
* {...}
组合选择器
"""我们习惯将标签的嵌套层级关系使用亲戚关系来表示"""
# 1.儿子选择器(利用大于号)
div>p {...}
# 2.后代选择器(利用空格)
div p {...}
# 3.毗邻选择器(利用加号)
div+p {...}
# 4.弟弟选择器(利用小波浪号)
div~p {...}
属性选择器
'''关键符号是中括号'''
[name] 只查找含有name属性的标签
[name='eason'] 查找含有name属性并且值是eason的标签
input[name='eason'] 查找含有name属性并且值是eason的input标签
分组与嵌套
# 1.多个选择器并列
div,p,span {...}
# 2.不同选择器混用
#d1,.c1,span {...}
"""
div.c1>p
div#d1 p
"""
伪类选择器
# 1.鼠标悬浮
span:hover {}
# 2.获取焦点
input:focus {}
今日学习内容
伪元素选择器
通过css操作选中的文本内容
1.修改首字的字体样式
p:first-letter {
color: red; # 字体颜色
font-size: 48px; # 字体大小
}
2.在文本开头添加内容
p:before {
content: '哈哈'; # 增加的文本内容
color: blue; # 颜色
}
3.在文本结尾添加内容
p:after {
content: '嘿嘿'; # 添加的内容
color: yellow; # 颜色
}
选择器优先级
相同选择器：谁离目标标签最近哪个选择器就生效
不同选择器：精准度越高的选择器，优先级越高
选择器总结
css选择器是所有选择器的基础，学好对学习后期框架和爬虫模块都有很大的帮助
字体样式
文字字体
font—family: "Microsoft Yahei" # 字体
字体大小
font-size: 24px # 像素
字体粗细
font-weight: lighter\bolder
字体颜色
方式1：color: red;
方式2：color: rgb(128，128，128)；
方式3：color：#0~f
python提供取色器，左侧颜色块点击即可
文字属性
文字对齐
text-align:center/left/right # 中对齐，左对齐，右对齐
文字装饰
"""a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)"""
text-decoration: none; 主要就是用于去除a标签的下划线
text-decoration: line-through; 删除线
text-decoration: overline; 上边线
text-decoration: underline; 下划线
首行缩进
text-indent: 32px; # 首行缩进32像素
补充:可以使用浏览器做样式的动态调整
查找到标签的css 然后左键选中 通过方向键上下动态修改数值
背景属性
背景颜色
background-color: red；
背景图片
background-image:url("图片地址");
"""背景图片如果没有设置的区域大 那么默认自动填充满"""
background-repeat:no-repeat\repeat-x\repeat-y 是否平铺
background-position:left top; 图片位置
background-attachment: fixed; 背景附着
如果多个属性名具有相同的前缀，我们就可以整合到一起进行编写
background:#336699 url('1.png') no-repeat left top
参数1：颜色 参数2：图片地址 参数3：背景图像不平铺 参数4：图片放在右上角
边框
# 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的属性值可以由我们来改变。
"""
只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
"""
display:inline: 使标签具备行内标签的特性，不能设置长宽
display:block: 使元素具有块级元素的特点，可以设置长宽
display:inline-block : 使元素同时具有行内元素和块级元素的特点
display:none: 隐藏标签，页面上也不会保留位置
visibility:hidde : 隐藏标签，但是会保存位置
盒子模型
概念：所有标签都有一个盒子模型，我们打开页面检查可以发现下面这个图：
这个图片就表示了每一个标签的盒子形象出现的实例化：
content————————实际内容————————实际物品
padding————————内边距————————实际物品与盒子的距离
border—————————边框—————————盒子的厚度
margin—————————外边距————————盒子与盒子之间的距离
两个标签的距离，根据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 统一设置一个值
*padding用法与margin一致
margin:0 auto 设置对象上下间距为0，左右自动
浮动
div块元素在基本流中，无论内容多么简短，都会占据一行
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
其基本出发点均是：“如何在一行显示多个div元素”
标准流：
将div2进行浮动：
可以发现div2浮动之后，div3自动向上移动，证明了浮动后不在原来的层级
我们再将div2向右移动展示出左边标准层原本的面目
如果我们将两个div元素都浮动起来：
div2和div3浮动后处于同一层级，组成一个新的层级
我们得出了结论，假设浮动的div块元素前面的div块元素也是浮动的，那么该div块元素就会跟随在前一个div块元素之后，如果一行放不下两个div元素，后面的那个元素就会被挤到下一行
这个前后顺序我们需要知道：如果是左浮动，那么右边是这个div元素的后面；如果是右浮动，那么左边是这个div元素的后面
假如我们把div2、div4左浮动，效果图如下：
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
浮动会造成父标签塌陷，因为div块元素是否跟随上一个父元素浮动，需要看父元素是否浮动，假设div3浮动了，div4想浮动就会默认跟随到div3后面，div5的父标签就塌陷了；我们需要div4作为父类，不跟随在div3的后面，但是依旧是一个浮动元素，就需要用到清除浮动的影响
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
万能公示：
3.万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}
作业：
圆形头像制作，html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css.CSS">
<title>头像转换过程</title>
</head>
<body>
<!-- 第一个 -->
<div class="container">
<div class="box">
<P>方形头像</P>
<p>使用img src标签添加一个图片</p>
<img id="p1" src="https://img1.baidu.com/it/u=1594252799,603511575&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="头像异常">
</div>
</div>
<!-- 第二个 -->
<div class="container1">
<div class="box1">
<P>方形盒子头像</P>
<p>使用img src标签添加一个图片，然后使用盒子模型修改盒子的边距参数</p>
<img id="p1" src="https://img1.baidu.com/it/u=1594252799,603511575&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="头像异常">
</div>
</div>
<!-- 第三个 -->
<div class="container1">
<div class="box2">
</div>
<p>这样一个狗鼻子头像就出来了</p>
<!-- 第四个 -->
<div class="container2">
<div class="box3">
</div>
<p>调整一下像素，正常的圆形柴犬头像就出来了</p>
</body>
</html>
css代码
.box1 {
background-color: aquamarine;
}
.box {
background-color: rgb(27, 159, 115);
}
.container1{
margin: 50px 100px 50px 100px;
width: 80%;
}
.box2 {
border: 5px rgb(12, 12, 12) solid;
width: 100px;
height: 100px;
border-radius: 50%;
background-position: center center;
background-image: url("https://img1.baidu.com/it/u=1594252799,603511575&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500")
}
p{
border: 10px 10px 10px 10px dashed #141313
}
.box3 {
border: 5px rgb(12, 12, 12) solid;
width: 500px;
height: 500px;
border-radius: 50%;
background-position: center center;
background-image: url("https://img1.baidu.com/it/u=1594252799,603511575&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500")
}
二八布局
<!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>二八开页面布局</title>
<style>
#d2{
width: 20%;
height: 5000px;
color: rgb(10, 45, 65);
background-color: rgb(130, 168, 222);
float: left;
}
#d3{
width: 80%;
height: 5000px;
color: rgb(31, 79, 50);
background-color: rgb(123, 235, 220);
float: right;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<h1>沁园春·雪</h1>
<p>作者：教员</p>
<p>北国风光，千里冰封，万里雪飘。<br>
望长城内外，惟余莽莽；<br>
大河上下，顿失滔滔。<br>
山舞银蛇，原驰蜡象，欲与天公试比高。<br>
须晴日，看红装素裹，分外妖娆。<br>
江山如此多娇，引无数英雄竞折腰。<br>
惜秦皇汉武，略输文采；
<br>唐宗宋祖，稍逊风骚。<br>
一代天骄，成吉思汗，只识弯弓射大雕。<br>
俱往矣，数风流人物，还看今朝。</p>
</div>
<div id="d3">
<h1>沁园春·长沙</h1>
<p>作者：教员</p>
<p>独立寒秋，湘江北去，橘子洲头。<br>
独立寒秋，湘江北去，橘子洲头。<br>
看万山红遍，层林尽染；漫江碧透，百舸争流。<br>
鹰击长空，鱼翔浅底，万类霜天竞自由。<br>
怅寥廓，问苍茫大地，谁主沉浮？<br>
携来百侣曾游。忆往昔峥嵘岁月稠。<br>
恰同学少年，风华正茂；书生意气，挥斥方遒。<br>
指点江山，激扬文字，粪土当年万户侯。<br>
曾记否，到中流击水，浪遏飞舟？</p>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号