css、js

目录

• 溢出属性
• 定位属性
• z-index属性
• JavaScript简介
• 变量与注释
• 数据类型
• 课堂练习

溢出属性

<文本内容超出了标签的最大范围>
overflow: hidden;    直接隐藏文本内容
overflow: auto\scroll;  提供滚动条查看
<溢出实战案例>
div{
	overflow:hidden;
}
div img{
	width:100%
}
<!--将溢出部分直接隐藏，且图片在盒子内自适应完整展示-->

定位属性

<!--定位的状态-->
1.静态点各位		static
	所有的标签默认都是静态定位即不能通过定位操作改变位置
2.相对定位		relative
	相对标签原来的位置做定位
3.绝对定位		absolute
	相对于已经定位过的父标签做定位
4.固定定位		fixed
	相对于浏览器窗口做定位
<!--定位操作-->
position
left/right/top/bootom
绝对定位
	如果没有父标签或者父标签没有定位 则以body为准 相当于变更成了相对定位
	eg：小米商城
	把盒子钉死在右下角
        possion：fixed;
        right:0;
        bottom:50px

z-index属性

<!--前端界面其实是一个三维坐标系 z轴指向用户-->
动态弹出的分层界面 我们也称之为叫模态框
补充
	rgba(128,128,128,0.5)	最后一个参数可以调整颜色透明度
possition:fixed;
left:50%;
top:50%;
margin-left:-200px;(固定定位的点，是盒子的左上角)
margin-top:-100px;

JavaScript简介

# 1.JavaScript于java没有关系
	之所以叫这个名字纯粹是为了蹭Java的热度

# 2.JavaScript简称js 也是一门前端的编程语言
	前端由于非常受制于后端，所以有一些人想通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具（支持js跑在后端服务器上）：不好用

# 3.js最初由一个程序员七天时间开发的 里面存在很多bug
	为了解决这些bug一直在编写相应的补丁 补丁本身又有bug最后导致js中由很多不符合逻辑的地方（成为了大家墨守陈规的东西）
# 4.JavaScript与ECMAScript
	JavaScript原先由一家公司开发 希望其他公司都使用 最后被改名

变量与注释

'''
编写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.14

数据类型

'''
	查看数据类型的方式
		typeof
'''
# 1.数值类型（相当于python里面的整型int和浮点型float）
	Number
    NaN:属于数值类型 意思是'不是一个数字'（not a number）
    parseInt('abc')  不报错返回NaN
    parseFloat('abc') 不报错返回NaN
# 2.字符类型（相当于python中的str）
	String
    默认只能使用单引号和双引号
    var nam1 = 'jason'
    var nam2 = "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）
	前者不支持负数索引后者支持
5.大小写转换
js中使用 .toLowerCase()、.toUpperCase()
python中使用lower()、upper()
6.切割字符串
js中和python都是用split（）但是优点区别
	s = 'hello worle a a'
    s.split(' ')
    ['hello','world','a','a']
    s.split(' ',1)
    ['hello']
    s.split(' ',2)
    ['hello','world']
7.字符串的格式化
js中使用格式化字符串（小顿号）
var name = 'jason'
var age = 12
console.log(`my name is ${name} my age is ${age}`)

# 3.布尔类型（相当于python中的布尔值）
Boolean
js中布尔值全是小写
true false
布尔值为false的： 0 空字符串 null undefined NaN 
'''
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 l1 = ['jaosn','tom','jeffry','oscar']
    l1.forEach(function(arg1){console.log(arg1)})
        VM264:1 jaosn
        VM264:1 tom
        VM264:1 jeffry
        VM264:1 oscar
	l1.forEach(function(arg1,arg2){console.log(arg1,arg2)})
        VM452:1 jaosn 0
        VM452:1 tom 1
        VM452:1 jeffry 2
        VM452:1 oscar 3
l1.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
    VM644:1 jaosn 0 (4) ['jaosn', 'tom', 'jeffry', 'oscar']0: "jaosn"1: "tom"2: "jeffry"3: "oscar"length: 4[[Prototype]]: Array(0)
    VM644:1 tom 1 (4) ['jaosn', 'tom', 'jeffry', 'oscar']
    VM644:1 jeffry 2 (4) ['jaosn', 'tom', 'jeffry', 'oscar']
    VM644:1 oscar 3 (4) ['jaosn', 'tom', 'jeffry', 'oscar']
7.splice
splice(起始位置，删除个数，新增的值)

课堂练习

1.先用div和span勾勒出页面轮廓
	标签的class和id值最好见名知意
2.之后在编写html
3.最后编写css