表格
表格先分清最小的列数,在进行排版
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;
}
媒体查询方法2
@import url(css/路径) screen and (min-width: 520px);
@import url(css/路径) screen and (min-width: 520px);
@import url(css/路径) screen and (min-width: 520px);
媒体查询方法3☆
<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%;}
}