文章目录
每日测验
"""
今日考题
1.什么是python的垃圾回收机制
2.你所知道的能够实现单例模式的方式有哪些，尝试着手写几个
3.列举python中常用模块及主要功能，越多越好！
4.简述盒子模型
5.什么是浮动，浮动的作用
ps:每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力
"""
昨日内容回顾
-
分组与嵌套
# 多个选择器可以并列公用一套css样式 div,p,span {} # 不同选择器之间也可以混合使用 .c1,#d1>span {} -
伪类选择器
a:link {} a:hover {} # 需要记忆 a:active {} a:visited {} input:focus {} # input框获取焦点 -
伪元素选择器
p:first-letter {} # 通过css加文本内容 但是无法选中 p:before {} p:after {} # ps:before和after多用于清除浮动带来的负面影响 -
选择器优先级
""" 选择器相同 就近原则 行内 > id > class > 标签 精确度越高说话越硬 """ ps:!important强制让标签采用你的样式 不推荐使用 -
宽和高
width height # 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度 但是可以通过css设置 # 行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效 -
字体属性
# 字体样式 草书 行书 ... font-family # 字体大小 font-size # 字重 font-weight # 文本颜色 1 直接写颜色英文 2 写颜色编号 #4e4e4e 3 写颜色的三基色 rgb(128,128,128) # 范围0-255 4 可以给颜色加透明度 rgba(128,128,128,0.5) # 范围0-1 ps:可以用pycharm 微信 qq等软件快速的获取你想要的颜色 -
文字属性
# 文字对齐
text-align
center
# 文字装饰 记忆 主要就是用来给a标签去掉自带的下划线
text-decoration
none
# 首行缩进
text-indent
-
背景属性
# 背景色 backgroud-color # 背景图片 background:#fff url() no-repeat center center """ ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀 """ ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中 # 背景图片实际应用的案例 -
边框
# 任何一个标签都有上下左右四个方向的边框 border-width border-style border-color 简写 border # 画圆 border-radius:50% -
display属性
# 能够让标签具有自身没有的属性和特征 display none 隐藏 并且原来的位置也没了 inline block inline-block ps:visibility:hidden只隐藏 位置还在 -
css盒子模型
# 1 外边距(标签与标签之间的距离) margin # 2 边框 border # 3 内边距/内填充 padding # 4 内容 content """ body标签默认自带8px的margin margin: 10 上下左右 10 20 上下 左右 10 20 30 上 左右 下 10 20 30 40 上 右 下 左 padding: 10 上下左右 10 20 上下 左右 10 20 30 上 左右 下 10 20 30 40 上 右 下 左 """ -
浮动float
""" 只要是前期页面布局 一般都是用浮动来设计页面 能够让标签脱离正常的文档流漂浮到空中(距离用户更近) 浮动的元素没有块儿级和行内一说 标签多大浮动起来之后就占多大 """
今日内容
- 解决浮动带来的影响
- 溢出属性
- 定位
- 验证浮动和定位是否脱离文档流
- z-index模态框
- 透明度opacity
- 简单博客园首页搭建
- JavaScript编程语言开头
今日内容详细
解决浮动带来的影响
# 浮动带来的影响
会造成父标签塌陷的问题
"""
解决浮动带来的影响 推导步骤
1.自己加一个div设置高度
2.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
溢出属性
p {
height: 100px;
width: 50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/
}
定位
-
静态
所有的标签默认都是静态的static，无法改变位置
-
相对定位(了解)
相对于标签原来的位置做移动relative
-
绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
-
固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
<!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;
}
#d1 {
height: 100px;
width: 100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
}
#d2 {
height: 100px;
width: 200px;
background-color: red;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
width: 400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
#d4 {
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
background-color: white;
border: 3px solid black;
}
</style>
</head>
<body>
<!-- <div id="d1"></div>-->
<!--<div id="d2">-->
<!-- <div id="d3"></div>-->
<!--</div>-->
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>
</body>
</html>
**ps:**浏览器是优先展示文本内容的
验证浮动和定位是否脱离文档流(原来的位置是否还保留)
"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
<!--<div style="height: 100px; 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px; 200px;background-color: greenyellow"></div>-->
<!--<div style="height: 100px; 200px;background-color: red;"></div>-->
<!--<div style="height: 100px; 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px; 200px;background-color: blue;"></div>-->
<div style="height: 100px; 200px;background-color: red;"></div>
<div style="height: 100px; 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px; 200px;background-color: blue;"></div>
z-index模态框
eg:百度登陆页面 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=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>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我~</button>
</div>
</body>
</html>
透明度opacity
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
作业书写
"""
当你在设计页面的时候 先用div划分区域，之后填写基本内容，最后再调节样式
在书写html代码的时候 class、id等属性最好都起的见名知意
"""
博客园页面搭建
自己课下尝试着搭建，不要照搬照套我的
Js简介
1.js也是一门编程语言 它也是可以写后端代码的
用js一统天下 前后端都可以写
nodejs 支持js代码跑在后端服务器上
然而并不能 想的太天真了!!!
2.js跟java一毛钱关系都没有，纯粹是为了蹭当时java的热度
ECMAScript和JavaScript的关系
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
JS版本
主要还是用的5.1和6.0
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习
# js的注释
"""
// 单行注释
/*
多行注释1
多行注释2
多行注释3
*/
"""
# 两种引入方式
1.script标签内部直接书写js代码
2.script标签src属性引入外部js代码
# js语法结构
js是以分号作为语句的结束
但是如果你不写分号，问题也不大 也能够正常执行 但是它就相当于没有结束符
js学习流程
- 变量
- 数据类型
- 流程控制
- 函数
- 对象
- 内置方法/模块
变量
"""
在js中 首次定义一个变量名的时候需要用关键字声明
1.关键字var
var name='jason'
2.es6推出的新语法
let name='jason'
如果你的编辑器支持的版本是5.1那么无法使用let
如果是6.0则向下兼容 var let
"""
# var与let的区别
n = 10
for n in range(5):
print(n)
print(n)
# var 5 let 10
"""
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""
常量
# python中没有真正意义上的常量 默认全大写就是表示常量
# js中是有真正意义上的常量的
const pi = 3.14
作业
今日作业
必做题
1.整理今日内容至博客
2.博客园首页搭建(独立完成)
3.预习js内容:https://www.cnblogs.com/Dominic-Ji/p/9111021.html