# 浮动带来的影响
会造成父标签塌陷的问题
"""
解决浮动带来的影响 推导步骤
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;width: 200px;background-color: red;position: relative;left: 500px"></div>--> <!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>--> <!--<div style="height: 100px;width: 200px;background-color: red;"></div>--> <!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>--> <!--当没有父标签做到位 就参照与body--> <!--<div style="height: 100px;width: 200px;background-color: blue;"></div>--> <div style="height: 100px;width: 200px;background-color: red;"></div> <div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div> <div style="height: 100px;width: 200px;background-color: blue;"></div>
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>
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
界面-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博客园</title> <link rel="stylesheet" href="博客园CSS.css"> </head> <body> <div class="left">左半部分 <div class="left-img"> <img src="111.jpg" alt=""> </div> <div class="left-1"> <p>老司机的博客</p> </div> <div class="left-2"> <p>车速太快</p> </div> <div class="left-3"> <ul> <li><a href="">关于我</a></li> <li><a href="">微博</a></li> <li><a href="">微信公众号</a></li> </ul> </div> <div class="left-4"> <ul> <li><a href="">#Python</a></li> <li><a href="">#Java</a></li> <li><a href="">#Golang</a></li> </ul> </div> </div> <div class="right">右半部分 <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> <div class="r0"> <div class="r1"> <span class="r1-1">文化开车的重要性</span> <span class="r1-2">2020-5-14 18:11:51</span> </div> <div class="r2"> <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span> </div> <div class="r3"> <span class="r3-1"> #Python  #JavaScript</span> </div> </div> </div> </body> </html>
界面-css
body{
margin: 0;
background-color: whitesmoke;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
padding-left: 0;
}
.left{
float: left;
width: 20%;
height: 100%;
position: fixed;
background-color: gray;
/*clear: both;*/
}
.left-img{
height: 100px;
width: 100px;
border-radius: 50%;
border: #eeeeee 5px solid;
overflow: hidden;
margin: 20px auto;
}
.left-img img{
max-width: 100%;
}
.right{
background: whitesmoke;
height: 1000px;
width: 80%;
float: right;
}
.left-1,.left-2{
color: #4e4e4e;
font-size: 18px;
text-align: center;
}
.left-3,.left-4{
font-size: 24px;
}
.left-3 a,.left-4 a{
color: #4e4e4e;
}
.left-3 a:hover,.left-4 a:hover{
color: white;
}
.left-3 ul,.left-4 ul{
text-align: center;
margin-top: 120px;
}
.r0{
margin: 10px 40px 20px 10px;
background-color: rosybrown;
box-shadow: 5px 5px 5px rgba(128,128,128,0.5);
}
.r1{
border-left: red 5px solid;
margin-bottom: 20px;
}
.r1-1{
font-size: 36px;
}
.r1-2{
float: right;
margin: 20px 10px;
font-size: 18px;
}
.r2-1{
margin-left: 10px;
}
.r2{
border-bottom: black 1px solid;
margin-bottom: 20px;
}
.r3-1{
margin-left: 10px;
}
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中 首次定义一个变量名的时候需要用关键字声明 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