前端基础之CSS
@
前端基础之CSS
form表
以注册功能为例
label标签配合input一起使用的
input标签
input标签
type属性
text 文本
password 密文
date 日期
radio 多选一
checkbox 多选多
checked默认选中
file 文件
按钮组标签
按钮组
reset 重置
button 普通按钮
submit 触发form表单提交的动作
select标签 下拉框
默认是单选的 也可以变成多选 mutiple
option就是一个个的选项
textarea 获取大段文本
注意事项
1.获取用户输入的标签 都是用value属性来存放用户的输入
获取用户输入的标签都应该有name属性 就类似于字典的key
value属性就类似于字典的value
2.如何给input设置默认
可以直接给input标签加value属性
3.input框如何设置提示信息
username:<input type="text" value="jason" placeholder="用户名">
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://127.0.0.1:8881/index"method="post" enctype="multipart/form-data">
<p>username:<input type="text" placeholder="用户名" name = "username" ></p>
<p>password:<input type="password" placeholder="password" name="password"></p>
<p>date :<input type="date" placeholder="日期" name="birth"></p>
<p>e
gender:
男<input type="radio" name="gender" value="male" >
女<input type="radio" name="gender" value="female">
</p>
<p>hobby:
篮球<input type="checkbox" name="hobby" value="basketball">
足球<input type="checkbox" name="hobby" value="soccerball">
双色球<input type="checkbox" name="hobby" value="doublecolorball">
</p>
<p>女友:
<select name="lj" id="" multiple>
<option value="ming">明老师</option>
<option value="c">苍老师</option>
<option value="t">tank老师</option>
<option value="s">sean老师</option>
</select>
</p>
<p>省份:
<select name="province" id="">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
</p>
<p>个人简介:
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>文件:
<input type="file" name="myfile">
</p>
<input type="submit" value="提交">
</form>
</body>
</html>
效果：
分解：
验证form表单提交数据
代码
from flask import Flask, request
app = Flask(__name__)
@app.route('/index',methods=['GET','POST'])
def xxx():
print(request.form) # 获取普通数据
print(request.files)
file_obj = request.files.get('myfile')
file_obj.save('xxx.png')
return "OK"
app.run()
后端框架
后端框架
Django
Flask
Tornado
Flask框架
pip3 install Flask
get请求能够携带参数 但是参数的携带方式是直接跟在url后面的
url?xxx=ooo&yyy=bbb&lll=ccc
特点
1.数据全是明文
2.数据大小有限制 大概应该可能在4KB左右吧...
3.get请求不应该携带隐私信息
CSS
层叠样式表 就是用来调节标签的样式
css注释
/*注释*/
/*
注释1
注释2
注释3
*/
css语法结构
选择器 {属性名:属性值;属性名1:属性值1;属性名2:属性值2;}
css三种引入方式
1.外部css文件(最正规的书写方式)
2.head内style标签内部直接书写css代码(为了教学方便可以使用这种)
3.标签内部通过style属性直接书写对应的样式(不推荐)
第一种
效果：
第二种
效果
第三种
效果
css学习流程
如何查找标签
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器 元素选择器*/
/*div { !*将页面上所有的div标签内部的文本变成红色*!*/
/* color: red;*/
/*}*/
/*类选择器 点号*/
/*.c1 { !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/
/* color:blue;*/
/*}*/
/*id选择器 #号*/
/*#d1 { !*将id为d1的标签内部文本内容改成绿色*!*/
/* color: green;*/
/*}*/
/*通用选择器 *号*/
* { /*页面上所有的标签统一修改样式*/
color: aqua;
}
</style>
</head>
<body>
<div class="c1">老板你好 我是23号技师 很高兴为您服务
<span>我是div内部的span</span>
</div>
<p id="d1" class="c1">来宾三位 楼上请</p>
<div>老板你好 我是23号技师 很高兴为您服务</div>
<span class="c1">珊珊出来接待一下</span>
<p>来宾三位 楼上请</p>
<span id="d2">珊珊出来接待一下</span>
</body>
</html>
效果
/标签选择器 元素选择器/
/*标签选择器 元素选择器*/
/*div { !*将页面上所有的div标签内部的文本变成红色*!*/
/* color: red;*/
/*}*/
效果
类选择器 点号 .c1
/*类选择器 点号*/
/*.c1 { !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/
/* color:blue;*/
/*}*/
效果：
id选择器 #号*
/*id选择器 #号*/
/*#d1 { !*将id为d1的标签内部文本内容改成绿色*!*/
/* color: green;*/
/*}*/
效果
通用选择器 *号
/*通用选择器 *号*/
* { /*页面上所有的标签统一修改样式*/
color: aqua;
}
效果
组合选择器
效果
/后代选择器/
/*后代选择器*/
/*div span { !*空格表示div内部的span没有层级限制*!*/
/* color: red;*/
/*}*/
<style>
/*后代选择器*/
div span { /*空格表示div内部的span没有层级限制*/
color: red;
}
效果
/* 儿子选择器 */
/* 儿子选择器 */
div > span { /*>表示div内部的儿子*/
color: green;
}
/* 毗邻选择器 */
/* 毗邻选择器 */
div + span { /*紧挨着的下一个标签*/
color: red;
}
/* 弟弟选择器 */
效果：
属性选择器
所有的标签都可以有默认的属性
id
class
标签还可以有自定义的属性 并且可以有多个
<input type="text" username="jason" xxx="ooo">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<input type="text" username="jason">
<input type="text" username="sean">
<input type="text" username="owen">
<p username="tank">数据库的刷卡机大卡司</p>
<div username="oscar">奥斯卡件打开拉随机端口两三点</div>
<span username="jason">奥斯卡件打开拉随机端口两三点</span>
</body>
</html>
效果
属性选择器 []
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*属性选择器 [] */
[username] { /*找到页面上所有具有username属性名的标签*/
background-color: deeppink;
}
</style>
</head>
<body>
<input type="text" username="jason">
<input type="text" username="sean">
<input type="text" username="owen">
<p username="tank">数据库的刷卡机大卡司</p>
<div username="oscar">奥斯卡件打开拉随机端口两三点</div>
<span username="jason">奥斯卡件打开拉随机端口两三点</span>
</body>
</html>
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PBFs1k24-1577359342873)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577354973855.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g4lklGbw-1577359342873)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577354913623.png)]
分组与嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器 元素选择器*/
/*div { !*将页面上所有的div标签内部的文本变成红色*!*/
/* color: red;*/
/*}*/
/*类选择器 点号*/
/*.c1 { !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/
/* color:blue;*/
/*}*/
/*id选择器 #号*/
/*#d1 { !*将id为d1的标签内部文本内容改成绿色*!*/
/* color: green;*/
/*}*/
/*通用选择器 *号*/
/** { !*页面上所有的标签统一修改样式*!*/
/* color: aqua;*/
/*}*/
</style>
</head>
<body>
<div class="c1">老板你好 我是23号技师 很高兴为您服务
<span>我是div内部的span</span>
</div>
<p id="d1" class="c1">来宾三位 楼上请</p>
<div>老板你好 我是23号技师 很高兴为您服务</div>
<span class="c1">珊珊出来接待一下</span>
<p>来宾三位 楼上请</p>
<span id="d2">珊珊出来接待一下</span>
</body>
</html>
指定字段红色 div
效果
指定字段 p 为红色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b5UinRAc-1577359342876)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577355574199.png)]
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seXj9KgE-1577359342877)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577355628903.png)]
指定字段为红色
效果
div p span 全部为绿色
效果
指定 .c1 ,#d1,p 为红色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-59rexFYO-1577359342880)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577356003963.png)]
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzS9iLrz-1577359342880)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\1577355992480.png)]
指定c1属性值的标签 后代的 h1为绿色
效果
伪装选择器
a链接标签
a标签默认的颜色是蓝色 但是只要你点过一次 就会变成紫色 浏览器会记住你有没有点过
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*a:link {*/
/* color: aqua;*/
/*}*/
/*a:hover { !*鼠标悬浮*!*/
/* color: black;*/
/*}*/
/*a:active {*/
/* color: green;*/
/*}*/
/*a:visited {*/
/* color: gray;*/
/*}*/
/*input:focus {*/
/* background-color: red;*/
/*}*/
</style>
</head>
<body>
<a href="https://www.mzitu.com">点我1</a>
<a href="https://www.luffycity.com">点我2</a>
<a href="https://www.sogo.com">点我2</a>
<a href="https://www.sajdkasd.com">点我2</a>
<input type="text">
</body>
</html>
效果
a:link
a:link {
color: aqua;
}
效果
a:hover
a:hover { /*鼠标悬浮*/
color: black;
}
效果
a:active
a:active {
color: green;
}
a:visited
a:visited {
color: gray;
}
效果：
input:focus
input:focus {
background-color: red;
}
效果：
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter {
color: red;
font-size: 48px;
}
p:before {
content: '你好啊';
color: red;
}
p:after {
content: '?';
color: blue;
}
</style>
</head>
<body>
<p>大家啊上课登记卡圣诞快乐撒娇的空间sad健身卡大的萨达</p>
</body>
</html>
p:first-letter
p:first-letter {
color: red;
font-size: 48px;
}
分解：
p:before
红色的字体选种或点击不了
p:before {
content: '你好啊';
color: red;
}
p:after 是指定的符号变颜色
p:after {
content: '?';
color: blue;
}
效果
