5.14课堂 一：解决浮动带来的影响 二：溢出属性 三：定位 四：验证浮动和定位是否脱离文档流(原来的位置是否还保留) 五：z-index模态框 六：透明度opacity 七：JS相关
# 浮动带来的影响
会造成父标签塌陷的问题
"""
解决浮动带来的影响 推导步骤
1.自己加一个div设置高度
2.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
二：溢出属性
p {
height: 100px;
50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/
}
三：定位
1.静态
所有的标签默认都是静态的static，无法改变位置
2.相对定位(了解)
相对于标签原来的位置做移动relative
3.绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
4.固定定位(常用)
相对于浏览器窗口固定在某个位置
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;
100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
}
#d2 {
height: 100px;
200px;
background-color: red;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
#d4 {
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
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;
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简介
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是以分号作为语句的结束
但是如果你不写分号，问题也不大 也能够正常执行 但是它就相当于没有结束符
2.js学习流程
变量 ==> 数据类型 ==> 流程控制 ==> 函数对象 ==> 内置方法/模块
3.变量
"""
在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在局部定义只会在局部生效
"""
4.常量
# python中没有真正意义上的常量 默认全大写就是表示常量
# js中是有真正意义上的常量的
const pi = 3.14