从小白到小黑 python学习之旅 日常总结 53（CSS JavaScript介绍）
CSS
解决浮动带来的影响 溢出属性 定位 验证脱离文档流 z-index模态框 透明度opacity 简单博客园首页搭建
JavaScript
JavaScript简介 变量 常量
<!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 { border: 3px solid black; } #d2 { height: 100px; width: 100px; background-color: red; float: left; } #d3 { height: 100px; width: 100px; background-color: greenyellow; float: left; } /*#d4 {*/ /*方式一、自己加一个div设置高度*/ /*height: 100px;*/ /*方式二、利用clear属性*/ /*clear: left; !*该标签的左边(地面和空中)不能有浮动的元素*!*/ /*}*/ /* 方式三、通用的解决浮动带来的影响方法 在写html页面之前 先提前写好处理浮动带来的影响的 css代码 */ .clearfix:after { content: ''; display: block; clear:both; } </style> </head> <body> <div id="d1" class="clearfix"> <div id="d2"></div> <div id="d3"></div> <!-- <div id="d4"></div>--> </div> </body> </html>
# 浮动带来的影响 会造成父标签塌陷的问题 """ 解决浮动带来的影响 推导步骤 1.自己加一个div设置高度 2.利用clear属性 #d4 { clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/ } 3.通用的解决浮动带来的影响方法 在写html页面之前 先提前写好处理浮动带来的影响的 css代码 .clearfix:after { content: ''; display: block; clear:both; } 之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可 """
<!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 { height: 100px; width: 100px; border: 3px solid red; /*默认就是可见 溢出还是展示*/ /*overflow: visible; */ /*溢出部分直接隐藏*/ /*overflow: hidden;*/ /*设置成上下滚动条的形式*/ overflow: scroll; /*overflow: auto;*/ } </style> </head> <body> <p> 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 我超帅 </p> </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> body { margin: 0; background-color: #4e4e4e; } #d1 { height: 120px; width: 120px; border-radius: 50%; border: 5px solid white; margin: 0 auto; /*溢出部分直接隐藏*/ overflow: hidden; } #d1>img { /*占标签100%比例*/ max-width: 100%; /*width: 100%;*/ } </style> </head> <body> <div id="d1"> <img src="111.jpg" alt=""> </div> </body> </html>
* 静态
所有的标签默认都是静态的static，无法改变位置
* 相对定位(了解)
相对于标签原来的位置做移动relative
* 绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位（这种情况就用绝对定位）
* 固定定位(常用)
相对于浏览器窗口固定在某个位置
<!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; /*默认是static(静态)无法修改位置*/ /*position: static; */ /*相对定位 标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签 虽然你哪怕没有动 但是你的性质也已经改变了 */ position: relative; } #d2 { height: 100px; width: 200px; background-color: red; position: relative; /*已经定位过了*/ } #d3 { height: 200px; width: 400px; background-color: yellowgreen; /*绝对定位 相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)*/ position: absolute; left: 200px; top: 100px; } #d4 { /* 固定定位 写了fixed之后 定位就是依据浏览器窗口*/ position: fixed; /*距离浏览器的底部 10px*/ bottom: 10px; /*距离浏览器的右部 20px*/ 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>
# 不脱离文档流 1.相对定位 # 脱离文档流 1.浮动 2.绝对定位 3.固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--相对定位-->
<!--<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>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--<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>
</body>
</html>
百度登陆页面 其实是三层结构 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(123,123,123,0.5); /*黑色的透明区(z=99) 中间层*/ z-index: 99; } .modal { background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; /*白色的注册区域(z=100) 离用户最近*/ 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只能影响颜色
<!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 { background-color: rgba(0,0,0,0.5); } #d2 { background-color: rgb(255,198,72); opacity: 0.5; color: blue; } </style> </head> <body> <p id="d1">111</p> <p id="d2">22asdasdasd2</p> </body> </html>
""" 在设计页面的时候 先用div划分区域，之后填写基本内容，最后再调节样式 在书写html代码的时候 class、id等属性最好都起的见名知意 """
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博客园</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="blog.css"> </head> <body> <div class="blog-left"> <div class="blog-avatar"> <img src="111.jpg" alt=""> </div> <div class="blog-title"> <p>老司机的博客</p> </div> <div class="blog-info"> <p>该老司机车速太快，什么都没有留下!</p> </div> <div class="blog-link"> <ul> <li><a href="">关于我</a></li> <li><a href="">微博</a></li> <li><a href="">微信公众号</a></li> </ul> </div> <div class="blog-tag"> <ul> <li><a href="">#Python</a></li> <li><a href="">#Java</a></li> <li><a href="">#Golang</a></li> </ul> </div> </div> <div class="blog-right"> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> </div> </body> </html>
/*这是博客园首页的样式文件*/ /*通用样式*/ body { margin: 0; background-color: #eeeeee; } a { text-decoration: none; } ul { list-style-type: none; padding-left: 0; } /*左侧样式*/ .blog-left { float: left; width: 20%; height: 100%; position: fixed; background-color: #4e4e4e; } .blog-avatar { height: 200px; width: 200px; border-radius: 50%; border: 5px solid white; margin: 20px auto; overflow: hidden; } .blog-avatar img { max-width: 100%; } .blog-title,.blog-info { color: darkgray; font-size: 18px; text-align: center; } .blog-link,.blog-tag { font-size: 24px; } .blog-link a,.blog-tag a { color: darkgray; } .blog-link a:hover,.blog-tag a:hover { color: white; } .blog-link ul,.blog-tag ul { text-align: center; margin-top: 100px; } /*右侧样式*/ .blog-right { float: right; width: 80%; height: 1000px; } .article { background-color: white; margin: 20px 40px 10px 10px; box-shadow: 5px 5px 5px rgba(0,0,0,0.5); } .title { font-size: 36px; } .date { float: right; margin: 20px 20px; font-weight: bolder; } .article-title { border-left: 8px solid red; text-indent: 16px; } .article-body { font-size: 18px; text-indent: 30px; /*border-bottom: 1px solid black;*/ } .article-bottom { padding-left: 30px; padding-bottom: 10px; }
介绍
JS版本
主要是用的5.1和6.0
# js的注释 """ // 单行注释 /* 多行注释1 多行注释2 多行注释3 */ """ # 两种引入方式 1.script标签内部直接书写js代码 2.script标签src属性引入外部js代码 # js语法结构 js是以分号作为语句的结束 但是如果你不写分号，问题也不大 也能够正常执行 但是它就相当于没有结束符
""" js变量的命名规范 1.变量名只能是 数字 字母 下划线 $ 2.变量名命名规范 js中推荐使用驼峰式命名 userName dataOfDb 3.不能用关键字作为变量名 在js中 首次定义一个变量名的时候需要用关键字声明 1.关键字var var name='jason' 2.es6推出的新语法 let name='jason' 如果你的编辑器支持的版本是5.1那么无法使用let 如果是6.0则向下兼容 var let """ # var与let的区别 # var在for循环里面定义会影响到全局 # let在局部（for）定义只会在局部生效
# js中是有真正意义上的常量的 const pi = 3.14
浙公网安备 33010602011771号