溢出属性
#文本内容超出了标签的最大范围 overflow: hidden; 直接隐藏文本内容 overflow: auto\scroll; 提供滚动条查看 #溢出实战案例 div{ overflow: hidden; #例如可以把头像多余溢出部分隐藏 } div img{ width: 100%; #把头像比例放在和div差不多 } 常用于头像
定位操作
#1.定位的状态 1.静态定位 static 所有的标签默认都是静态定位,即不能通过定位操作改变位置 2.相对定位 relative 相对于标签原来的位置做定位 3.绝对定位 absolute 相对于已经定位过的父标签做定位 4.固定定位 fixed 相对于浏览器窗口做定位 #2.定位操作 position left/right/top/bottom 绝对定位 如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位 eg:小米商城购物车 固定定位 eg:右下方回到底部 position: fixed right: 0; bottom:50px; #比如小米购物车无论如何滑动,一致再页面贴在右边距离下面50px的位置(固定位置)
z-index属性
"""前端界面其实是一个三维坐标系 z轴指向用户""" 动态弹出的分层页面 我们也称之为模态框 #补充知识 rgba(128,128,128,0.5)#前面三个数字正好调成灰色,0.5表示透明度,0-1之间调节 position: fixed; left: 50% top: 50% margin-left: -200px; margin-top: -100px;
课堂练习
1.先用div和span勾勒出页面轮廓 标签的class和id值最好也做到见名知意 2.再编写html 3.最后编写css """ 我们现在所写的页面 没有做响应式布局 页面内容会随着浏览器窗口的变化而出现错乱现象 这个目前不要考虑 后面框架自带处理机制 """
JavaScript简介
#1.JavaScript与Java没有半毛钱关系 之所以叫这么个名字纯粹是为了蹭当时Java的热度 #2.JavaScript简称JS 也是一门前端的编程语言 前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用 #3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug 为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西) #4.JavaScript与EMASScript JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名 #5.版本问题 ECMA5 ECMA6
变量与注释
""" 编写js代码的位置 1.pycharm提供的js文件 2.浏览器提供的js环境(学习阶段) """ #1.注释语法 //单行注释 /*多行注释*/ #2.结束符号 分号结束 console.log("hello world"); #相当于python里面的input #3.变量声明 在js中定义变量需要使用关键字声明 1.var var name = "jason" 2.let let name = 'jason' '''var声明都是全局变量 let可以声明局部变量''' #4.常量声明 const pi = 3.14 #无法修改
数据类型
""" 查看数据类型的方式 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中布尔值是全小写 ture 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)}) ''' VM169:1 jason VM169:1 tony VM169:1 kevin VM169:1 oscar VM169:1 jerry 相当于枚举法 ''' l2.forEach(function(arg1,arg2){console.log(arg1,arg2)}) ''' VM265:1 jason 0 VM265:1 tony 1 VM265:1 kevin 2 VM265:1 oscar 3 VM265:1 jerry 4 第一个参数按照顺序,第二个参数为所在位置 ''' l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)}) ''' VM332:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] VM332:1 tony 1 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] VM332:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] VM332:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] VM332:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] 第三个参数是数据来源值 ''' 7.splice splice(起始位置,删除个数,新增的值)
标签:03,jason,定位,python,js,tony,var,前端开发 From: https://www.cnblogs.com/Milk1/p/17778752.html