day46
昨日内容回顾
form表单
action 控制数据的提交路径
1.不写 默认朝页面所在的当前地址提交
2.写全路径
3.只写后缀(/index/)
method 控住数据提交的方式 默认是get请求
可以指定成post请求
enctype 控制前端朝后端提交数据的编码格式
默认是urlencoded
form表单如果想要传输文件 必须要做两件事
1.method必须是post
2.必须将默认的urlencoded换成formdata
注册页面
label标签通常是配合input一起使用的
label for=input框的id值
绑定关系之后 点击label内任意的内容都能聚焦到对应input框
input type参数
text 普通文本
password 密文
date 日期
radio 单选(性别)
checkbox 多选(爱好)
上述两个选择如果想要实现默认选中 可以给他们
家checked属性(checked='checked')只要是属性名和
属性值相同的情况下 都可以简写只写属性名即可
file 文件
hidden 隐藏
reset 重置
button 普通按钮 没有任何效果
submit 能够触发form表单的提交数据的动作
能够触发form表单提交数据的动作按钮有哪些(******)
1.input标签type=submit
2.button标签有可以
下拉框 select标签
一个个选项对应的是一个个的option标签
select默认是单选的 你也可以指定成多选
多选你只需要给select加multiple属性
如果你想让某几个选项默认选中 可以给option加
selected='selected'也可以简写为selected
textarea 大段文本
input框disabled参数 表示禁用该input框 readonly只读
form表单朝后端提交数据 需要注意的点
1.每一个获取用户输入(输入，选择，上传...)的标签都应该有name属性
name属性就类似于字典的key
获取到的用户会自动放入value属性中
针对选择框 你需要手动加value值
简单的后端框架
django
flask
tonado
PEP8规范
a = b
l = [1, 2, 3, 4]
css选择器
css的注释
/单/
/*
多
多
多
*/
语法结构
选择器 {属性名:属性值}
任何一个标签都应该有id和class属性
id应该做到唯一
class可以写多个 也可以继承多个
基本选择器
标签(元素)选择器 直接写标签名
id选择器 #id值
类选择器 .class值
通用选择器 *
后代选择器
div span 后代(子子孙孙)
div>span 儿子
div+span 毗邻
div~span 弟弟选择器
属性选择器 []
[username]
[username='jason']
p[username='jason']
所有的标签都有默认的属性(******)
但是也支持自定义属性 并且数量没有限制
分组与嵌套
div,span,p 三者是并列关系
id值,.class值,标签名 多种选择器混合使用
伪类选择器
a标签有四种状态
a:link
a:hover 鼠标悬浮
a:active
a:visited
input:focus 聚焦
伪元素选择器
p:first-letter 操作第一个文本
p:before 可以通过css在最前面添加文本值(不能被选中)
{
content:'';
color:'red';
...
}
p:after 可以提过css在最后面添加文本值(不能被选中)
今日内容
如何设置标签样式
css全部结束
给标签设置长宽
只有块儿级标签才可以设置长宽
行内标签设置了没有任何作用(仅仅只取决于内部文本值)
字体颜色 color后面可以跟多种颜色数据
颜色英文 red
#06a0de 直接用pycharm提供的取色器即可
rgb(1,1,1) 可以利用截图软件获取三基色数字
rgba(0,128,128,0.9) 最后一个数字 只能用来调节颜色的透明度
语义
a {
text-decoration: none;
}
取消a标签默认的下划线
背景图片 默认是铺满整个区域
通常一个页面上的一个个的小图标 并不是单独的
而是一张非常大的图片 该图片上有网址所用到的所有的小图标
通过控制背景图片的位置 来显示不同的图标样式
边框
border 后面写三个参数 位置没有关系
颜色
字体
样式
可以单独设置 样式 颜色 粗细
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
可以单独设置某一边的样式
/border-top: 3px solid red;/
/border-left: 1px dotted green;/
/border-right: 5px dashed blue;/
/!border-bottom: 10px solid pink;!/
也可以简写统一设置
border: solid 10px red;
display
inline 将块儿级标签变成行内标签
block 能够将行内标签 也能设置长宽和独占一行
inline-block; /即可以设置长宽 也可以在一行展示/
display:none 隐藏标签 并且标签原来占的位置也没有了
visibility:hidden 隐藏标签 但是标签原来的位置还在
盒子模型
谷歌浏览器body默认有8px外边距
body {
margin:0px;
}
以快递盒为例
1.两个快递盒之间的距离(标签与标签之间的距离) 外边距(margin)
2.快递盒盒子的厚度(边框border) 边框(border)
3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离) 内边距(内填充) padding
4.物品的大小(文本大小) 内容content
/margin: 15px; !只写一个参数 上下左右全是!/
/margin: 10px 20px; !第一个控制的上下 第二个是左右!/
/margin: 10px 20px 30px; !第一个控制的上 第二个是左右 第三个是下!/
margin: 10px 20px 30px 40px; /上 右 下 左/
padding简写规律跟margin一样
d1 {
margin: 0 auto;
}
只能左右居中 不能上下居中
浮动(*****)
float
在 CSS 中，任何元素都可以浮动。
浮动的元素 是脱离正常文档流的(原来的位置会让出来)
浏览器会优先展示文本内容(******)
浮动带来的影响
会造成父标签塌陷(口袋瘪了)
如何解决父标签塌陷问题？？？
clear 清除浮动带来的影响
.clearfix:after {
content: '';
clear: both; /左右两边都不能有浮动的元素/
display: block;
}
哪个父标签塌陷了 就给谁加clearfix这个类属性值
overflow溢出属性
定位
所有的标签默认都是静态的 无法改变位置
position: static;
必须将静态的状态修改成定位之后
相对定位(了解) relative
相对于标签原来的位置 移动
绝对定位(小米的购物车) absolute
相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位(******)
固定定位(回到顶部) fixed
相对于浏览器窗口 固定在某个位置不动
位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
固定定位
opacity
既可以调颜色 也可以调字体
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*a {*/
/*text-decoration: none;*/
/*}*/
/*div {*/
/*width:100px;*/
/*height:100px;*/
/*background-color: rgba(0,128,128,0.3) ;*/
/*font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;*/
/*font-size: 12px;*/
/*font-weight: bold;*/
/*background-image: url('https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=c140e340972bd40746c7d4ff4b889e9c/377adab44aed2e7343b0fb448701a18b87d6fa79.jpg');*/
/*!*background-repeat: no-repeat;*!*/
/*!*background-repeat: repeat-x;*!*/
/*!*background-repeat: repeat-y;*!*/
/*background-repeat: no-repeat;*/
/*!*background-position: center center;*!*/
/*background-position: center center;*/
/*border: 5px saddlebrown solid;*/
/*border-radius: 50%;*/
/*display: inline-block;*/
/*overflow: hidden;*/
/*}*/
/*#d1 {*/
/*background-color: rgba(0,128,128,0.3) ;*/
/*font-size: 36px;*/
/*}*/
/*p {*/
/*border: 10px red solid;*/
/*text-align: left;*/
/*text-decoration: none;*/
/*text-indent: 48px;*/
/*}*/
body {
margin: 0;
}
/*.c1 {*/
/*border: 3px salmon solid;*/
/*}*/
/*.c2 {*/
/*width: 50px;*/
/*height: 50px;*/
/*background-color: red;*/
/*float: left;*/
/*}*/
/*.c3 {*/
/*width: 50px;*/
/*height: 50px;*/
/*background-color:rebeccapurple;*/
/*float: right;*/
/*}*/
/*.clearfix:after {*/
/*content: '';*/
/*clear: both;*/
/*display: block;*/
/*}*/
/*.c1 {*/
/*width: 100px;*/
/*height: 100px;*/
/*background-color: red;*/
/*!*left: 100px;*!*/
/*!*top: 50px;*!*/
/*position: relative;*/
/*}*/
.c2 {
width: 100px;
height: 100px;
background-color: yellow;
position: fixed;
bottom: 100px;
right: 300px;
}
.c1 {
width: 1500px;
height: 1500px;
background-color: red;
/*position: fixed;*/
/*bottom: 100px;*/
/*right: 300px;*/
}
.c3 {
width: 1500px;
height: 1500px;
background-color: royalblue;
/*position: fixed;*/
/*bottom: 100px;*/
/*right: 300px;*/
}
</style>
</head>
<body>
<div class="c2">回到顶部</div>
<div class="c1"></div>
<div class="c3"></div>
<!--<div class="c1">-->
<!--<div class="c2">-->
<!--</div>-->
<!--</div>-->
<!--<div class="c1 clearfix">-->
<!--<div class="c2"></div>-->
<!--<div class="c3"></div>-->
<!--</div>-->
<!--<div>-->
<!--jfbdaiubdshfgsuda-->
<!--</div>-->
<!--<!–<span>fksgbihfdbnkdsm</span>–>-->
<!--<p>向美好世界放个p</p>-->
<!--<a href="#" id="d1">fbsgsfhdb</a>-->
</body>
</html>
