Day52--CSS--02
每日测验
"""
今日考题
1.列举字符串,列表，元组，字典每个常用的五个方法
2.描述下列常见内置函数的作用可用代码说明map,zip,filter,sorted,reduce
# map 映射
# l = [1,2,3,4,5]
# res = map(lambda x:x**2,l)
# print(list(res))
# zip 拉链
# l1 = [111,222,333,444,555]
# l2 = ['贤妻','浏阳','小张']
# l3 = [1,2,3,4,5,6,7,8,]
# res = zip(l1,l2,l3) # 以最短的为主
# print(list(res))
# filter 过滤
# l = [1,2,3,4,5,6,7,8]
# res = filter(lambda x:x>3,l)
# print(list(res)) # [4, 5, 6, 7, 8]
# reduce 多个进一个出
# from functools import reduce
# l = [1,2,3,4,5,6]
# # res = reduce(lambda x,y:x+y,l)
# res = reduce(lambda x,y:x+y,l,100)
# print(res)
3.列举你所知道的面相对象中的__开头__结尾的方法及作用，越多越好
4.写出form标签几个关键性的属性及作用
5.列举你所知道的css选择器
"""
昨日内容回顾
-
表格标签
<table> <thead> <tr> 一个tr就是一行 <th></th> 表头里面建议使用th加粗文本 </tr> </thead> 表头 <tbody> <tr> <td></td> 表单里面的建议直接用td即可 </tr> </tbody> 表单 </table> 补充: table有一个border属性可以加一个比较丑的边框 针对tr可以设置rowspan、colspan -
form表单
# 能够获取用户数据并且发送到后端 <form action='' method='' enctype=''></form> """ action 控制数据的提交路径 1.不写默认朝当前页面所在的地址提交 2.写全路径 3.只写后缀 /index/ 能够自动补全当前页面所载的后端服务器ip:port(暂时不考虑) method 控制请求方式 默认是get请求 也可以携带数据 但是数据是直接破解在url后面的 不安全并且大小有限制 url?username=jason&password=123 可以修改为post请求 携带的数据放在请求体里面的 enctype 控制数据的编码方式 默认是urlencoded 只能发送普通的文本 不能发送文件 如果你要发送文件 必须改为 formdata 发送文件必须要修改的两个参数 method = 'post' enctype='...formdata' """ input标签 获取用户数据的(输入 选择 上传...) <input type=''></input> type可以书写的类型 text 普通文本 password 展示密文 date 日期 radio 单选 默认选择可以用checked(属性名和属性值一样的时候就可以简写) checkbox 多选 默认选择可以用checked file 获取文件 了解:可以加multiple 支持传多个文件 submit 触发form表单提交动作 button 什么功能都没有 就是一个普通的按钮 reset 重置按钮 select标签 下拉框 默认是单选 可以加multiple成多选 一个个下拉框选项是一个个的option标签 option标签默认选中可以加selected <select> <option value=''>111</option> <option value=''>222</option> <option value='' selected>333</option> </select> textarea标签 获取大段文本内容 label标签 给input加上对于的注释信息 不写其实也没有关系 input写在lable里面 label的for关联input的id值 可以不嵌套 """ 获取用户数据的标签都应该都name属性 因为你需要给后端发送数据并且需要标明数据到底表示什么 name 字典的key value 字典的value(用户数据) 需要用户选择的标签 你需要自己加上value值 radio checkbox option ps:如果你给获取用户输入的标签加了value值 那么就类似于默认值 """ ps:hidden、disable、readonly、placeholder（背景占位提示符） # 触发form表单提交数据的两种方式 type=submit button按钮 -
flask框架
代码目前你不需要去研究 我们写这个只是为了验证form表单的功能而已 -
css
# 注释 /**/ 由于前端代码都笔记多并且没有什么规律 所以我们都会利用注释来帮助我们维护代码 # 语法结构 选择器 { 属性1:值; 属性2:值; 属性3:值; } # 选择器 1.基本选择器 id选择器 #d1 {} 类选择器 .c1 {} 标签选择器 div {} 通用选择器 * {} 简写：p#d1.c1 ======》 <p id="d1" class="c1"></p> emmet插件 2.组合选择器 我们将前端标签的嵌套定义为父亲 儿子 后代 兄弟等等关系 后代选择器 div p {} 只要是div内部的p都拿到 儿子选择器 div>p {} 只拿内部第一层级的p 毗邻选择器 div+p {} 紧挨着我的同级下一个 弟弟选择器 div~p {} 同级别下面所有的p 3.属性选择器 [] [username] [username='jason'] input[username='jason'] ps:标签既可以有默认的书写 id class... 还可以有自定义的书写并且支持多个 <p id='d1' username='jason'></p>
今日内容概要
1.分组与嵌套
2.伪类选择器
3.伪元素选择器
4.选择器优先级
5.css属性相关(操作标签样式)
今日内容详细
1.分组与嵌套
# 分组：当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
# 嵌套：也可以结合 组合选择器的符号，来表示层级嵌套关系
# 空格 ===> 后代
# '>' ===> 儿子
# '+' ===> 毗邻
# '~' ===> 弟弟
2.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
}
a:link { /*访问之前的状态*/
color: red;
}
a:hover { /*需要记住*/ /*鼠标悬浮态*/
color: aqua;
}
a:active {
color: black; /*鼠标点击不松开的状态 激活态*/
}
a:visited {
color: darkgray; /*访问之后的状态*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>
3.伪元素选择器
p:first-letter { /*常用的给首字母设置特殊样式：*/
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 有css添加内容*/
content: '你说的对';
color: blue;
}
p:after { /*在文本结尾 有css添加内容*/
content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
4.选择器优先级
"""
id选择器
类选择器
标签选择器
行内式
"""
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
总结：精确度越高，优先级越高
3. !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
color: aqua;
}
.c1 {
color: orange;
}
p {
color: red;
}
</style>
<!-- <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
<p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p>
</body>
</html>
5.css属性相关
块级标签才能设置宽度，行内标签(内联标签)的宽度由内容来决定。
<style>
p {
background-color: red;
height: 200px;
width: 400px;
}
span {
background-color: green;
height: 200px;
width: 400px;
/*行内标签无法设置长宽 就算你写了 也不会生效*/
}
</style>
字体属性
p {
/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
/*font-size: 24px; !*字体大小*!*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
/*color: red; !*直接写颜色英文*!*/
/*color: #ee762e; !*颜色编号*!*/
/*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能 (截图时，鼠标的左下角会显示rgb)
*/
}
文字属性
p {
/*text-align: center; !*居中*!*/
/*text-align: right;*/ 右对齐
/*text-align: left;*/ 左对齐 （默认）
/*text-align: justify; !*两端对齐*!*/
文字装饰
/*text-decoration: underline;*/ 下划线
/*text-decoration: overline;*/ 上划线
/*text-decoration: line-through;*/ 删除线
/*text-decoration: none;*/ 无样式（默认） 常用来将 a标签自带的下划线去掉
/*在html中 有很多标签渲染出来的样式效果是一样的*/
font-size: 16px;
text-indent: 32px; /*缩进32px*/
/*text-indent: 2em; !*缩进2格*!*/
}
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/
}
背景图片
强调：给块级元素写背景图片一定要设置元素的高度，宽度可以不用设置
如果没有设置宽度的话，块级元素默认是整个页面宽度100%。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
height: 500px;
background-color: red;
}
#d2 {
height: 500px;
background-color: green;
}
#d3 {
height: 500px;
background-image: url("222.png");
background-attachment: fixed;
/*background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
*/
/*背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top; /*水平 竖直方向*/
/*background-position: 200px 200px;*/
}
/*如果出现了多个属性名前缀是一样的情况 一般情况下都可以简写 只写前缀*/
background: red url("222.png") no-repeat center center; /*只需要填上你想要加的参数即可 位置没有关系 参数个数也不做限制 加就显示，不加就用默认的设置*/
#d4 {
height: 500px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
边框
<!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 {
background-color: red;
border-width: 5px;
border-style: solid;
border-color: green;
}
div {
/*border-left-width: 5px;*/
/*border-left-color: red;*/
/*border-left-style: dotted;*/
border-style 边框样式:
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
/*border-right-width: 10px;*/
/*border-right-color: greenyellow;*/
/*border-right-style: solid;*/
/*border-top-width: 15px;*/
/*border-top-color: deeppink;*/
/*border-top-style: dashed;*/
/*border-bottom-width: 10px;*/
/*border-bottom-color: tomato;*/
/*border-bottom-style: solid;*/
border: 3px solid red; /*三者位置可以随意写*/
}
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}
</style>
</head>
<body>
<p>穷人 被diss到了 哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>
</body>
</html>
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*#d1 {*/
/* !*display: none; !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
/* display: inline; !*将标签设置为行内标签的特点*!*/
/*}*/
/*#d2 {*/
/* display: inline;*/
/*}*/
/*#d1 {*/
/* display: block; !*将标签设置成块儿级标签的特点*!*/
/*}*/
/*#d2 {*/
/* display: block;*/
/*}*/
/*#d1 {*/
/* display: inline-block;*/
/*}*/
/*#d2 {*/
/* display: inline-block; !*标签即可以在一行显示又可以设置长宽*!*/
/*}*/
</style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>
盒子模型
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。
"""
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0; /*上下左右全是0
/*margin: 10px 20px; !* (上下) (左右) *!*/
/*margin: 10px 20px 30px; !*上 (左右） 下*!*/
/*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/
}
/*p {*/
/* margin-left: 0;*/
/* margin-top: 0;*/
/* margin-right: 0;*/
/* margin-bottom: 0;*/
/*}*/
#d1 {
margin-bottom: 50px;
}
#d2 {
margin-top: 20px; /*不叠加 只取大的 （上一个的下边距 与 下一个的上边距）*/
}
#dd {
margin: 0 auto; /*只能做到标签的水平居中，上下不能设置auto*/ （0 表示上下边距为0，auto表示左右居中）
}
p {
border: 3px solid red;
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/
}
</style>
</head>
<body>
<!-- <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!-- <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!-- <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->
<p>ppp</p>
</body>
</html>
浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
"""
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
width: 200px;
background-color: greenyellow;
float: right; /*浮动 浮到空中往右飘*/
}
</style>
作业
今日作业
必做题
1.日考题总结并整理到个人博客中
2.从头到位敲一遍今天的css选择器及样式代码
选做题
1.尝试着搭建小米导航条(练习浮动 不要求搭的多好看)
