day47
今日内容
JavaScript
语法
昨日内容回顾
css样式操作
设置长宽
width
height
只有块儿级标签才能设置长宽
文字属性
font-family
font-size
font-weight
文本属性
text-align center/left/right/justify
text-decoration none/underline/overline/line-through
将a标签默认的下划线去掉 就可以使用
text-decoration:none
text-indent 首行缩进
文本颜色
color
'red'
#4e4e4e
rgb(0,0,0) 0~255
rgba(0,0,0,0.4) 最后一个参数是透明度 范围是0~1 只能调节颜色的透明度
背景属性
background-color 背景颜色
background-image
浏览器上面看到的任何数据都是基于请求后端响应返回给你的
网站的小图片特别多的时候 通常是将它们全部放在一张图上
你在请求的时候 只需要请求一张图片就可以 节省资源
通过控制背景图片的位置来选择展示的图标
目前使用的 是将图片生成好之后 变成类似于代码的一串密文
支持简写
background:颜色 图片地址 是否铺满 图片位置
葫芦娃儒雅动作示例
图片固定不动
background-attachment:fixed
边框
border
盒子模型
快递盒为例
外边距(margin) 标签与标签之间的距离
边框(border) 标签边框
内填充/内边距(padding) 内部文本到内边框距离
文本内容(content) 主要内容
margin top/left/right/bottom
body标签默认有8px的外边距
margin:0;
简写
margin
一个参数 上下左右
两个参数 第一个是上下 第二个是左右
三个参数 第一个是上 第二个是左右 第三个是下
四个参数 上右下左
margin:20px auto; 左右居中
border
border-top
border-bottom
border-left
border-right
border-style solid dotted dashed ...
border-width 1~5px
border-color 四种颜色参数
简写
border:颜色 样式 粗细
border-radius 画圆
50%
display
none 隐藏
inline 行内标签
block 块儿级标签
inline-block 既有行内的特点又有快二级的特点
visibility:hidden 位置还在
padding
同margin用法一致
content
float浮动
脱离正常的文档流 悬浮在空中
作用:用于前期的页面布局
浮动带来的影响
会造成父标签塌陷
如何解决浮动的影响
固定写法
.clearfix:after {
content:'';
clear:both;
display:block
}
哪里塌陷就给谁加clearfix属性值
overflow溢出属性
hidden
scroll
auto
圆形头像示例
定位
所有的标签默认都是静态的 没有定位一说
如果你想让标签移动 你必须先改变标签的性质
position static
relative 相对定位
相对标签原来的位置
absolute 绝对定位
相对于已经定位过的父标签 做绝对定位
购物车例子
fixed 固定定位
固定在浏览器窗口某一个位置 始终不变
回到顶部例子
是否脱离文档里
不脱离的
相对定位
脱离的
浮动
绝对定位
固定定位
z-index 默认浏览器窗口是一个三维坐标系
水平方向x轴
垂直方式y轴
朝向人的z轴
z轴坐标越大越接近人
模态框示例 三层
opacity
既可以调文字也可以调颜色
作业
搭建页面的顺序
先将html骨架全部写好
然后再写css
JavaScript
是前端的一门编程语言(也是有逻辑)
node.js 支持前端js代码 跑在后端服务器上
Js跟Java什么关系?
Js跟Java半毛钱关系都没有！！！
原因是当初Java特别火 想蹭热度
js是网警公司开发的 该公司想让所有的浏览器都支持该语言
折中 改个名字 js也叫ECMAScript(两者等价)
当前使用较多的版本
2011 ECMAScript 5.1 版本变更
新出来
2015 ECMAScript 6 添加类和模块
JS
注释
// 单行注释
/*
多行注释1
多行注释2
*/
js的引入方式
1.script标签内部直接书写
2.通过script标签src书写 引入外部js文件
<script src="js.js"></script>
Js里面的变量
在js中声明变量需要使用关键字
var 声明的是全局有效
let 可以只在局部有效(ES6新语法)
var name = 'jason'
let name = 'oscar'
js中变量的命名规范
1.数字 字母 下划线 $
2.不能用关键字作为变量名
3.推荐你使用驼峰题命名
python推荐使用下划线(C++)
user_name
js推荐使用驼峰体(前端)
userName
js代码默认是以分号作为结束符
confirm('are you sure?');
你不写分号通常情况下一点问题都没有
研究var与let的区别
看截图
python中有无常量
常量:无法被修改的量
python中没有真正意义上的常量，我们约定俗成的将全大写的变量
称之为常量
*args,**kwargs
js中有常量
const 定义真正的常量 不能被修改
js中的数据类型
数值类型 Number
(int float)
字符类型 string
对象 object
数组 []
自定义对象 {}
布尔值 Boolean
true
flase
undefined
symbol
typeof 用来查看js数据类型
数值类型
包含整型浮点型
NaN也是数值类型 但是表示的意思是 不是一个数字
字符类型
字符串的拼接
python中不推荐使用加号(效率极低) %s format
js中推荐你使用加号来做字符串的拼接
如何定义多行文本
模板字符串
布尔值
在js中布尔值全部是小写！！！
true
false
js其实也是面向对象编程
数组
python中往列表中添加数据的方法
1.append 尾部追加
l = [1,2]
l.append([1,2,33,4])
l = [1,2,[1,2,33,4]]
2.insert 按照索引插入
3.extend 扩展列表
内部其实就是for循环+append
l = [1,2]
l.extend([1,2,3,4])
l = [1,2,1,2,3,4]
python中列表删除元素有几种方式
1.remove 移除
2.pop 弹出
3.del
python后端常用的内置函数
map 映射
zip 拉链
filter 过滤
reduce 多个进去一个出来
逻辑运算符
python js
and &&
or ||
not !
python后端三元运算符
x = 1
y = 2
res = 10 if x > y else 20
js中三元运算符
x = 1
y = 2
res = x > y ? 10 : 20
var x=a>b ?a:(b=="20")?a:b;
python后端定义函数
def
js前端定义函数
function
箭头函数
var f = v => v;
// 等同于
var f = function(v){
return v;
}
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
js对象
在定义对象的时候 关键字 是 (*****)
new
python后端 前端js
json.dumps JSON.stringify
json.loads JSON.parse
Reg正则
Asyn异步
正则
// 定义正则表达式两种方式
var reg1 = new RegExp("[1][a-zA-Z0-9]{5,11}");
var reg2 = /[2][a-zA-Z0-9]{5,9}$/; 建议使用
