HTML&CSS

表格

表格先分清最小的列数，在进行排版

table 设置的宽高可以确定整个表格的尺寸，但是可以被 td 撑开

合并单元格，建议 先注释。把整个表格都设置好，再删除多余代码

tr 只能设置整行的高度，不能设置宽度。

cellpadding属性：内容跟边框的距离
cellspacing属性：单元格之间的大小

<table border="1" cellspacing="10" cellpadding="10">
  <caption>表格标题</caption>
  <thead>
    <th>表头自动加粗居中</th>
    <tr>
      <td colspan="">3-1</td>
      <td rowspan="">3-3</td>
    </tr>
    <tr>
      <td colspan="">3-1</td>
      <td rowspan="">3-3</td>
    </tr>
  </thead>
  <tbody>表格区域划分</tbody>
  <tfoot>表格区域划分</tfoot>
</table>
横向合并
<td colspan="2">3-1</td>
竖向合并
<td rowspan="2">3-3</td>

表格CSS样式

 table {
    width: 200px; 
    border: 1px solid #ccc;
    border-collapse: collapse;	//边框线合并
    border-spacing: 100px;	//表格内容之间的距离设置
}
caption {
    caption-side: bottom;	//修改表格标题位置
}

伪类选择器~状态类

状态——代表鼠标选中的状态，一瞬间的事。修改 变化时 的样式

：checked 表单元素被一直选中的状态（只能用于单选按钮跟复选按钮）

：active 表单元素跟连接元素被激活的状态，此处被激活的状态有些特殊（点击）

：hover 鼠标悬停的状态

：focus 表单触发焦点。当用户点击，触摸（手机平板用户）或者是Tab选到它

img/input等单标签是没有before/after伪元素的，因为它们本身是不可以有子元素，如果你给img添加一个before，那么会被浏览器忽略。

伪类更改样式

//只用于文字，首行修改样式
p::first-line {
	background：pink;
}
只用于文字，首段第一个字符修改样式
p::first-letter {
	font-size：20px；
}
文字选中效果    美图网站是粉色，其他大部分是蓝色
p::selection {
	color：transparent；
}
修改li小圆点的样式
li::marker {
	color：pink；
}

触发式动画

鼠标悬浮 ：hover

选项选中 ：checked

输入框点击 ：active

动画过渡时间
transition-duration:3s;
过渡动画延迟
transition-delay:2s;
动画时间函数
transition-timing-function: linear		匀速			❤❤❤
transition-timing-function: ease		慢速到快			❤
transition-timing-function: ease-in		慢速到加快
transition-timing-function: out			结束是慢速
transition-timing-function: ease-in-out	开始跟结束都是慢速 ❤
transition-timing-function: cubic-bezier( ,	, ,	,)	单独设计样式

过渡动画综合属性：属性名称 过渡时间 过渡动画时间函数 动画延迟时间
动画颜色必须16进制

transition: width 2s ease 2s;

主动式动画

from——to 开始——结束 只有两种变化才能使用

@keyframes jump（动画名字） 主动式动画启动设置

主动动画：1.属性名称 2.过渡时间 3.过渡动画时间函数 4.动画延迟时间 5.播放次数 6.播放方向 7.播放完成的状态

当标签都加上了动画效果，就会关联行动。 不是唯一的，可以共享

div {
	width：300px；
	height：300px；
	animation: name	duration timing-function delay iteration-count direction fill-mode;
}
@keyframes identifier {	（动画名字跟标签产生关联） 
	0%	{								(from)
		top：0；
		left：0；
		background-color：pink；
}
	50% {
		top：200px；
		left：220px；
		background-color：lightblue；
}
	100%{								 (to)
		top:600px;
		left:600px;
		background-color:lightgreen;
}

这样没有初始值。动画做完了，就隐藏了

注意，需要回到动画初始位置跟样式，复制粘贴主动式动画 开始或者是结束的样式

div {						
		width:300px;
		height:300px;
		position：fixed；
		top：0；
		left：0；
		background-color：pink；
		animation-name：动画名字；
		animation-duration：3s；
}

主动式动画单独设置

主动动画过渡时间
animation-duration: 3s;

延迟
animation-delay: 2s;

播放次数
animation-iteration-count:6;				循环6次（默认是1）
animation-iteration-count:infinite;			无限循环

动画播放方向
animation-direction: normal					正向播放（默认值）
animation-direction: alternate				奇数正向播放（1.3.5）	偶数反向播放（2.4.6）
animation-direction: reverse					反向播放
animation-direction: alternate-reverse		反向播放-轮换播放（当主动效果写反了，用这个 负负得正嘛）

动画播放状态
写在触发条件里

div：hover {
	-webkit-animation-play-state: paused; 暂停动画
	animation-fill-mode: backwards;	还原第一帧状态
	animation-fill-mode: forwards;	还原最后一帧状态
}

3D动画

perspective: 1000px;	Z轴景深

perspective-origin: 50% 50%;  ——默认值z轴原点
perspective-origin: 0% 0/5;	 ——左上角
perspective-origin: 100% 100%; ——右下角

transform-style: preserve-3d;	辅助查看3D视图

盒阴影，滤镜样式

box-shadow: 水平距离	垂直距离	模糊距离	阴影尺寸	阴影颜色	内阴影/外阴影;
box-shadow: 3px 3px 6px 10px #ccc outset/inset;盒阴影

text-shadow: 2px 3px 10px #ccc， -1px -1px 2px #000; 文字阴影

滤镜的使用 顺序决定结果

filter: 滤镜属性，默认值none

blur(px)：高斯模糊，值越大越模糊
filter: blur(0px);

brightness(%)：亮度，默认值是100%，0%会全黑，大于100%越来越亮
filter: brightness(100%);

contrast(%)：对比度，默认值100%，0%全灰，大于100%对比度越来越强,对比色彩
filter: contrast(100%);

drop-shadow(h-shadow v-shadow blur spread color）五个值
filter: drop-shadow(3px 3px 5px); 图片阴影跟盒阴影类似

grayscale(%)：灰度，默认值0%，100%全灰
filter: grayscale(0%);

hue-rotate(deg)：色相旋转，默认值0deg，没有最大值，超过360deg相当于绕了一圈。类似与底片，色环旋转掉颜色
filter: hue-rotate(0deg);

invert(%)：反转输入图像，默认值0%，100%完全反转。类似相机胶卷
filter: invert(0%);

opacity(%)：透明度，默认值100%，0%完全透明
虽然与opacity很像，不同之处在于通过filter设置opacity一些浏览器会提供硬件加速
filter: opacity(100%);

saturate(%)：饱和度，默认值100%，0%完全不饱和，超过100%高饱和状态（三基色越来越正）
filter: saturate(100%);

sepia(%)：深褐色。默认值0%，100%完全深褐色  跟灰度很像  黑白灰 岁月老照片的感觉
filter: sepia(0%);

媒体查询方法1：

不推荐 后期改代码 不利于维护

div {
    width: 700px;
    height: 500px;
    margin: auto;
    background-color: pink;
}

@media screen and (min-width: 520px) {
    div {
        width: 90%;
        height: 300px;
        background-color: lightblue;
    }
}

@media screen and (min-width: 750px) {
    div {
        width: 90%;
        height: 300px;
        background-color: yellow;
    }
}

@media screen and (min-width: 880px) {
    div {
        width: 90%;
        height: 300px;
        background-color: lightgreen;
    }
}

@media screen and (min-width: 1080px) {
    div {
        width: 90%;
        height: 300px;
        background-color: violet;
    }
}

正规写法：
@media screen and （min-width：900px） and  （max-width：1080px） { 
div {
	width: 90%;
	height: 300px;
	background-color: pink;
}

媒体查询方法２

@import url(css/路径) screen and (min-width: 520px);
@import url(css/路径) screen and (min-width: 520px);
@import url(css/路径) screen and (min-width: 520px);

媒体查询方法３☆

<link rel="stylesheet" href="css路径"/>
<link rel="stylesheet" href="css路径" media="screen and (min-width: 520px)"/>
<link rel="stylesheet" href="css路径" media="screen and (min-width: 750px)"/>
<link rel="stylesheet" href="css路径" media="screen and (min-width: 880px)"/>

断点设计

320px　——iphone—————— 主断点
480px　——手机横屏—————— 次断点
640px　——手机———————— 次断点
720px　——平板或手机———— 主断点
768px　——　ipad横屏——————— 次断点
960px　——　平板或电脑屏幕———— 次断点
1024px　——　电脑屏幕———— 主断点

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}