前端基础
-
溢出属性
-
定位属性
-
z-index属性
-
课堂练习
-
JavaScript简介
-
JS变量与注释
-
JS数据类型
溢出属性
文本内容超出了标签的最大范围
overflow:hidden;>>>>>>>>>>将超出的文本内容隐藏 overflow:auto;>>>>>>>>>>>>可以滚动查看文本内容 overflow:scroll;>>>>>>>>>>>可以滚动查看文本内容溢出实例(制作圆形图像)
div { overflow: hidden; } div img { width: 100%; >>>>>>>>>让这个图片占据100% }定位属性
# 定位的方式 1.静态定位（static） 所有的标签默认都是静态标签，不能通过定位操作改变位置 2.相对定位（relative） 相对于标签原来的位置做定位 3.绝对定位（absolute） 相对于已经定位过的父标签做定位 4.固定定位（fixed） 相对于浏览器窗口做固定定位 # 定位操作 position left\right\top\bottom 绝对定位 如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位 eg:小米商城购物车 固定定位 eg:右下方回到底部 position: fixed; right: 0; bottom: 50px;z-index属性
前端界面其实是一个三维坐标系，z轴指向用户，z-index就是用来帮助我们控制z轴的。动态弹出的分层界面，我们也称之为模态框。
代码演示：
<style> .modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(128,128,128,0.5); # 最后一个参数可以调透明度 z-index: 10; } .cover { height: 200px; width: 400px; background-color: white; z-index: 11; position: fixed; left: 50%; top: 50%; margin-left: -200px; margin-top: -100px; } </style> <div> 最底下的页面 </div> <div class="modal"></div> <div class="cover"> <p>username:<input type="text"></p> <p>password<input type="text"></p> </div>课堂练习（制作博客页面）
1.先用div和span勾勒出页面轮廓，标签的class和ID值要见名知意
2.再编写html
3.最后编写css
html代码：
<body> <div class="blog-left"> <div class="blog-touxiang"> <img src="https://img0.baidu.com/it/u=4242583357,577833130&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""> </div> <div class="blog-biaoti"> <span>wh老师的博客</span> </div> <div class="blog-jieshao"> <span>这个人很懒</span> </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-xinxi"> <ul> <li><a href="">#python</a></li> <li><a href="">#java</a></li> <li><a href="">#Golan</a></li> </ul> </div> </div> <div class="blog-right"> <div class="article-list"> <div class="article-biaoti"> <span class="biaoti">重金求子</span> <span class="shijian">2022-4-27</span> </div> <div class="article-jianjie"> <span class="neiron">多少钱</span> </div> <div class="article-info"> <span class="fupo">#富婆通讯录</span> <span class="ruanfan">#软饭硬吃</span> </div> </div> </div> </body>css代码(写在myblog文件里)：
# /*页面通用样式*/ body { margin: 0; background-color: aqua; } a { text-decoration: none; } ul { list-style-type: none; padding-left: 0; } # /*左边样式*/ .blog-left { float: left; height: 100%; width: 20%; position: fixed; left: 0; top: 0; background-color: antiquewhite; } .blog-touxiang { height: 200px; width: 200px; border-radius: 50%; border: 5px solid white; overflow: hidden; margin: 0 auto; } .blog-touxiang img { width: 100%; } .blog-biaoti,.blog-jieshao { color: dimgray; text-align: center; margin: 20px auto; } .blog-link,.blog-xinxi { font-size: 24px; text-align: center; margin: 100px auto; } .blog-link a,.blog-xinxi a { color: darkgray; } .blog-link a:hover,.blog-xinxi a:hover { color: white; } # /*右边样式*/ .blog-right { float: right; height: 100%; width: 80%; } .article-list { background-color: white; margin: 20px 50px 20px 10px; box-shadow: 5px 5px 5px rgb(0,0,0,0.5); } .article-biaoti { border-left: 8px solid red; } .article-biaoti .biaoti { font-size: 36px; padding-left: 18px; } .article-biaoti .shijian { float: right; margin: 20px 30px; font-weight: bolder; } .article-jianjie { padding-top: 10px; font-size: 24px; text-indent: 20px; border-bottom: 1px solid black; } .article-info { font-size: 18px; padding-left: 20px; padding-top: 10px; padding-bottom:10px ; }以上所写的页面，没有做响应式布局，页面内容会随着浏览器窗口的变化而出现错乱现象
JavaScript简介
1.JavaScript简称JS 也是一门前端的编程语言，现在的使用版本是ECMA5与ECMA6两个版本
JS中的变量与注释
编写js代码的位置，1.pycharm提供的js文件。2.浏览器提供的js环境
# 1.注释语法 // 单行注释 /*多行注释*/ # 2.结束符号 分号结束 console.log('hello world'); # 3.变量声明 在js中定义变量需要使用关键字声明 1.var var name = 'jason' 2.let let name = 'jason' '''var声明都是全局变量 let可以声明局部变量''' # 4.常量声明 const pi = 3.14js中的数据类型
""" 查看数据类型的方式 typeof """ # 1.数值类型(相当于python里面的整型int和浮点型float) Number NaN:属于数值类型 意思是'不是一个数字'(not a number) parseInt('abc') 不报错返回NaN parseFloat('abc')不报错返回NaN # 2.字符类型(相当于python里面的字符串str) String 默认只能是单引号和双引号 var name1 = 'jason' var name2 = "jason" 格式化字符串小顿号 var name3 = `jason` 1.字符的拼接 js中推荐使用加号 2.统计长度 js中使用length python中使用len() 3.移除空白(不能指定) js中使用trim()、trimLeft()、trimRight() python中使用strip()、lstrip()、rstrip() 4.切片操作 js中使用substring(start,stop)、slice(start,stop) 前者不支持负数索引后者支持 python中使用[index1:index2] 5.大小写转换 js中使用.toLowerCase()、.toUpperCase() python中使用lower()、upper() 6.切割字符串 js中和python都是用split() 但是有点区别 ss1.split(' ') ['jason', 'say', 'hello', 'big', 'baby'] ss1.split(' ', 1) ['jason'] ss1.split(' ', 2) ['jason', 'say'] 7.字符串的格式化 js中使用格式化字符串(小顿号) var name = 'jason' var age = 18 console.log(` my name is ${name} my age is ${age} `) my name is jason my age is 18 python中使用%或者format # 3.布尔类型(相当于python中的布尔值bool) Boolean js中布尔值是全小写 true false 布尔值为false的 0 空字符串 null undefined NaN python中布尔值时首字母大写 True False 布尔值为False的 0 None 空字符串 空列表 空字典... """ null的意思是空 undefined的意思是没有定义 var bb = null; bb null var aa aa undefined """ # 4.对象(相当于python中的列表、字典、对象) 数组(相当于python中的列表) Array var l1 = [11, 22, 33] 1.追加元素 js中使用push() python中使用append() 2.弹出元素 js和python都用的pop() 3.头部插入元素 js中使用unshift() python中使用insert() 4.头部移除元素 js中使用shift() python中可以使用pop(0) remove() 5.扩展列表 js中使用concat() python中使用extend() 6.forEach var l2 = ['jason', 'tony', 'kevin', 'oscar', 'jerry'] l2.forEach(function(arg1){console.log(arg1)}) VM3143:1 jason VM3143:1 tony VM3143:1 kevin VM3143:1 oscar VM3143:1 jerry l2.forEach(function(arg1,arg2){console.log(arg1,arg2)}) VM3539:1 jason 0 VM3539:1 tony 1 VM3539:1 kevin 2 VM3539:1 oscar 3 VM3539:1 jerry 4 l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)}) VM3663:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] VM3663:1 tony 1 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] VM3663:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] VM3663:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] VM3663:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] 7.splice splice(起始位置,删除个数,新增的值)
