前面加选择器：
hover选择鼠标指针悬停上的元素
active选择鼠标按下了但是未弹起的元素
link选择未被访问过的链接 //引用外部文件和插件
visited选择已经被访问过的链接
圆角矩形和圆：
border-radius, 表示将元素的边框的四角设为弧形, 当元素为正方形且border-radius的值为元素宽高的一半时, 表现为圆形.
border-top-left-radius, 设置左上角的圆角.
border-top-right-radius, 设置右上角的圆角.
border-bottom-left-radius, 设置左下角的圆角.
border-bottom-left-radius, 设置右下角的圆角.
margin, 外边距大小.
border, 边框大小.
padding, 内边距大小, 边框与内容之间的距离,
margin ＋ padding: 上 右 下 左 ; //外边距内边距的数值设置
(实线solid, 虚线dashed, 点线dotted)
font-style, 表示字体倾斜, 值为italic表示设置倾斜, 值为normal表示取消倾斜.
text-align, 表示文本对齐, left左对齐, right右对齐, center居中对齐.
text-decoration, 表示文本装饰, underline下划线, overline上划线, line-through删除线, none什么都没有(可以用于给a标签去掉下划线).
background-color, 设置背景颜色, 与设置字体颜色一样, 可以使用英文单词, 也可以使用rgb/raba和十六进制表示, 默认是transparent, 即透明的.
background-image, 设置背景图片, 背景颜色和背景图片可以同时存在, 背景图片在背景颜色的上方.
background-size, 表示背景图片的大小, 格式为宽度 高度, 单位为px, 还可以使用contain(尽可能的充满背景, 可能会露出额外背景), cover(完全充满背景, 以其宽度和高度完全适应内容区域, 不会露出额外背景), auto(自动)等, 也可以填百分比, 参照父元素的尺寸设置.
background-image属性添加背景图片 no-repeat；
overflow: hidden;、溢出隐藏
text-align:center;/字体居中
align-items: center;/垂直居中字体
margin: 0 auto;/盒子居中
text-align: center;//文本居中
text-decoration: none;/去除a标签下划线
网页地址 + favicon.ico //获取浏览器的字体图标
list-style-type:none; //去除li标签的图标点
display: inline-block; //图标点的位置消除
font-size: 12px; //设置字体大小
在内联样式：
<p style="color: blue;">蓝色</p> //在body里设置样式
box-sizing: border-box;// //border: 10px solid red;//＋外边框的时候防止盒子被撑大使盒子填充大小不变化
<< || >> //button的两个按钮样式
display：none/隐藏对象写谁谁隐藏/位子不保留
display：bolk/显示对象
opacity：0~1；/透明度0全透明，1为不透明；
visibility：visible；显示
visibility：hidden；隐藏/保留位置
overflow：hidden；溢出来的部分隐藏掉
overflow：visibie；显示
overflow：auto；自动出现滚动条
overflow：scroll；一直有滚动条
浮动布局操作：
flex：X轴来写：
justify-content: flex-end;/flex从右开始排列
justify-content: center;/flex盒子居中
justify-content: flex-start;/flex从左开始排列
justify-content: flex-start;/平均分配给每一个盒子空间
justify-content: space-between;/两边贴边，在平均分配
flex：Y轴来写：
flex-direction: column;/X轴变Y轴
可以通过align-items属性来决定垂直方向的排列方式, fiex-start表示靠顶部排列, fiex-end表示靠底部排列, center表示垂直居中排列.
要注意align-items只能针对单行元素来实现, 如果有多行元素, 就需要使用item-contents了.
li*6>img:=
<li><img src="" alt=""></li> //可以用多个编写
img的个个属性的作用：
<img src="" alt="" title="">、/
src=""/图片路径
alt=""/图片加载失败显示提示
title=""/鼠标悬停图片上提示用户的
a 标签的格式 <a href="跳转的目标界面">展示内容</a>
from表单属性：
<body>
<!-- 验证的时候必须添加form表单域 -->
<form action="">
<ul>
<li>邮箱：<input type="email"></li>
<li>网址：<input type="url"></li>
<li>日期：<input type="date"></li>
<li>日期：<input type="time"></li>
<li>数量：<input type="number"></li>
<li>手机号码：<input type="tel"></li>
<li>搜索：<input type="search"></li>
<li>颜色：<input type="color"></li>
<li><input type="submit" value="提交"></li>
</ul>
</form>
</body>
JS:组成:
（1）ECMAScript
（2）DOM(Document Object Model)
通过DOM提供的接口可以对页面上的各种元素进行操作（大小，位置，颜色等）
（3）BOM(Browser Object Model)
通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等
JS:输入输出语句:
1.alert(msg) 浏览器弹出警示框
2.console.log(msg) 浏览器控制台打印输出信息---给程序员测试用的
3.prompt(info) 浏览器弹出输入框，用户可以输入
JavaScript:时间戳：
date.getFullYear(); // 获取完整的年份(4位，1970)
date.getMonth(); // 获取月份(0-11，0代表1月，用的时候记得加上1)
date.getDate(); // 获取日(1-31)
date.getTime(); // 获取时间(从1970年1月1日开始的毫秒数)
date.getHours(); // 获取小时数(0-23)
date.getMinutes(); // 获取分钟数(0-59)
date.getSeconds(); // 获取秒数(0-59)
js选着器:(重点!!!!)（这个超级重要！！！）
document.getElementById('id') //通过元素 id 来查找元素
document.getElementsByTagName('name') //通过标签名来查找元素
document.getElementsByClassName('class') //通过类名来查找元素
document.getElementsByName('name') //通过表单元素中 name 名查找元素
document.querySelector('CSS 选择器') //通过CSS 选择器获取匹配上的第一个元素
document.querySelectorAll('CSS 选择器') //通过 CSS 选择器获取匹配上的所有元素
(重要内容):
some 判断数组中是否至少有一个满足条件,满足一个就true;
every 判断数组中是否全部满足条件,一个不满足就返回false;
find 返回所有满足条件数据;
findindex 返回满足条件数据索引;
map 将每次函数执行的返回值组成一个组并返回新数组;
freach 仅循环数组;
filter 根据当前函数的返回值为true或false,觉得当前数据是否通过筛选,将通过筛选的存放在新的数组中;
属性添加：
arr.push() ;添加数组、末尾；
arr.unshift ;添加数组，开头；
arr.concat ;链接数组；合并一起；
arr.join ;数组转字符串，已分隔符进行字符链接；
shift() ;删除数组元素；/删除的是第一个；
pop （）；删除数组元素 ；/删除最后一个；
定时器：
setTimeout():/要执行的代码, 等待的毫秒数
setlnterval():/是一个实现定时调用的函数，
可按照指定的周期（以毫秒计）来调用函数或计算表达式。
双重for循环：
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
Math.PI() // 圆周率;
Math.floor() // 向下取整;
Math.ceil() // 向上取整;
Math.round() // 四舍五入版 就近取整 注意负数 -3.5 等于 -3;
Math.abs() // 绝对值;
Math.max() /Math.min //求最大值和最小值;
转字符串:
1. num.toString()
2. String(num)
3. num+'我是字符串' --和字符串拼接的结果都是字符串
转数字型:
1. parseInt('78')
2. parseFloat('78.21')
3. Number('12.3')=>12.3
4. js隐式转换（-,*,/） ‘12’-0
转布尔型:
1. Boolean()函数
代表空、否定的值会被转换为false，如‘’，0，NaN, null, undefined, 其余会被转换为true
流程控制:
1.顺序结构
2.分支结构（if, switch）
2.1 if
2.2 if-else
2.3 if-else if-else
3.循环结构
3.1 for
分支流程控制Switch语句:
//值和value匹配的时候是全等匹配，===，值和数据类型完全匹配
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句;
}
创建数组的方式:
1. 利用new创建数组
var arr = new Array();
2. 利用数组字面量创建数组
var arr = [];
1496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
