热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

前端微讲解(四)

前端微讲解(四)溢出属性当内容超出的了标签的最大范围,就会造成溢出现象,就象一碗水多了就会漫出来。#溢出属性标签overflow:hidden;#直接隐藏溢出的内容overf

前端微讲解(四)

溢出属性

当内容超出的了标签的最大范围,就会造成溢出现象,就象一碗水多了就会漫出来。
# 溢出属性标签
overflow: hidden; # 直接隐藏溢出的内容
overflow: auto/scroll; # 提供滚动条查看

定位属性

# 1.定位状态
1.static:静态定位,所有的标签默认的都是静态定位,意思就是不能通过定位操作改变位置
2.relative:相对定位,相对于标签原来的位置做定位
3.absolute:绝对定位,相对于已经定位过的父标签做定位,如果没有父标签或者父标签没有定位,就以body为准,相当于变成了相对定位
4.fixed:固定定位,相对于浏览器窗口做定位

z-index属性

前端界面其实是一个三维坐标系,z轴指向用户,动态弹出的分层界面我们也称之为模态框。
# 调整颜色透明度
rgba(128,128,128,0.3) # 最后一个参数可以调整颜色透明度,默认是1
# 模态框代码演示








最底层



username:


password:






Javascript简介

Javascript简称js,js与java没有一点关系,之所以叫这个名字就是为了蹭当时Java的热度。js是一门前端的编程语言,js最初是由一个程序员花了七天时间开发的,里面有很多的bug,为了解决这些bug一直在编写相应的补丁,可是补丁本身又有bug,所及就导致了js中有很多不符合逻辑的地方,最后成了大家墨守成规的东西。由于前端非常受制于后端,所以就想要通过js来编写后端,然后就发明了nodejs,支持js跑在后端服务器,但是不好用。

js变量与注解

# 1.注解
1.单行注解://
2.多行注解:/**/
# 2.结束符号
分号结束';'
# 3.变量声明
js定义变量需要用关键字声明
1.var
用法:var name = 'oscar'
2.let
用法:let name = 'oscar'
'''var声明的都是全局变量,let可以声明局部变量'''
# 4.常量声明
const pi = 3.14
'''const定义的常量只有const可以修改,其他关键字不可做修改,否则就会报错'''

js数据类型

# 1.js查看数据类型的方式
typeof(变量名/变量值)
# 2.数值类型(相当于python里面的整型int和浮点型float)
Number:数值类型
NaN:属于数值类型,意思是不是一个数字
praseInt(变量名/变量值):是整数就会返回整数,带小数点只会返回小数点前面的数字,不是数字不会报错,返回NaN
praseFloat(变量名/变量值):只要是数字无论是整型还是浮点型都会返回相同的数字,不是数字不会报错,返回NaN
# 3.字符串类型
String:字符串类型,默认只能是单引号和双引号
1.格式化字符串(小顿号)
var name = `oscar`
2.字符的拼接
js推荐使用加号
3.统计长度
js中使用length,python使用len(),length的用法是变量名或者变量值加点调用length即可
4.移除空白
js中使用的是trim()、trimLeft()、trimRight(),python中使用的是strip()、lstrip()、rstrip()。但是js中的方法不能指定字符,python中的方法可以。
5.切片操作
js中使用substring(start,stop)、slice(start,stop),前者不支持负数索引,后者支持,python中使用的是[index1:index2]
6.大小写转换
js中使用.toLowerCase()、.toUpperCase(),python中使用lower()、upper()
7.切割字符串
js中和python中使用的都是split(),但是有区别
8.字符串的格式化
js中使用小顿号格式化字符串,python中使用%或者format
var name1 = 'oscar'
console.log(`myname:${name1}`)
# 4.布尔类型(相当于python中的布尔值)
Boolean:布尔类型,js中的布尔类型的值全是小写
布尔值为false的:0、空字符串、null、undefined、NaN
null的意思是空,undefined的意思是没有定义。
# 5.对象(相当于python中的列表、字典、对象)
Array:数组,相当于python的列表
1.追加元素
js使用push(),python使用append()
2.弹出元素
js和python都用pop(),但是js中的不能指定弹出
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)})
jason
tony
kevin
oscar
jerry
l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
jason 0
tony 1
kevin 2
oscar 3
jerry 4
l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
tony 1 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
7.splice
splice(起始位置,删除个数,新增的值),前两个参数都是必须填写的,而且必须是数字,第三个参数不必须填写。

这里是IT小白陆禄绯,欢迎各位大佬的指点!!!



推荐阅读
author-avatar
日月阁文玩都汇
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有