伪类选择器
a:link 未访问的链接
a:visited 已访问链接
a:hover 鼠标显示移动到连接上
a:active 选定的链接
背景
background-color 背景色
background-image:url(路径) 背景图片
background-repeat: 平铺
repeat 平铺
no-repeat 不平埔
repeat-x 横向平铺
repeat-y 纵向平铺
background-position 背景位置
top | buttom | center | left | right
background-attachment 背景附着
scroll 背景滚动 fixed 背景固定
background-color: rgba(0,0,0,0.3)背景半透明
CSS三大特性
1.层叠性:就近原则
2.继承性:子标签会继承父标签属性
3.优先级:行内>id>类>标签
边框
border 外边框
border-width 边框宽度
border-style 边框样式
solid 实线 dashed 虚线 dotted 点线
border-color 边框颜色
border-collapse 边框合并
内边距 (会把盒子撑大)
padding 内边框
外边距
margin
marhin:auto 盒子居中
插入图片和背景图片
插入图片我们用的最多比如产品的展示类移动位置只能靠盒模型
背景图片我们一般用于小图标背景或超大背景图
插入图片 img 移动位置可以通过margin
背景图片background-images 自带方法移动
圆角边框
border-radius: 50%;
盒子阴影
box-shadow
一共四个值第一个水平阴影,第二个垂直阴影,第三个模糊,第四个调整大小
浮动
float:left
定位
相对定位:会在自己原来位置上进行偏移 ,偏移之后会保留原来的位置
绝对定位:不会保留位置,一般用于自绝父相
固定定位:会固定在那个位置,随着页面滑动也不会消失
元素的显示和隐藏
display:none 不保留位置
visibility:visible
visvility:hidden 保留位置
overflow:hidden 溢出隐藏
鼠标样式
cursor
default 默认的
pointer 小手
move 移动
text 文本
not-allowd 禁止
轮廓线
一般不用outline,去掉
input {
outline:none;
}
文本域
textarea {
outline:none;
resize:none;
}
垂直居中
vertical只针对行内元素和行内块元素
baseline 底部 middle 居中 top 顶部
文字溢出省略号
先强制一行内显示文本
white-space:nowrap
超出部分进行隐藏
verflow:hidden
将超出部分用省略号代替
text-overflow:elllipsis
css精灵技术
有效减少服务器接受和发送请求的次数,提高页面加载速度
将图片放在一张图片上通过postion进行定位
滑动门
a设置背景左侧,padding撑开合适宽度
span设置背景右侧,padding撑开合适宽度剩下由文字继续撑开宽度
之所以a包含span就是因为整个导航都是可以点击的