【day06】css
一.背景(Background)
1. background-color 背景颜色
2. background-image:url(图像URL);背景图片
3. background-repeat: 背景重复
repeat默认值|repeat-x水平重复|
repeat-y垂直重复|no-repeat不重复
4. background-position: 背景位置
value 水平位置 value垂直位置
说明:
a.background-position方向
水平方向: left center right
垂直方向: top center bottom
b.只有一个方向值
此值代表水平方向,而垂直方向默认为垂直居中
c.background-position:value值 value值
正值背景图往右,负值背景图往左。
如果大盒子小图一般正值
如果小盒子大图一般负值
5. background-attachment 背景固定
scroll默认值:有滚动条背景图像跟滚动条卷上去|
fixed 固定:有滚动条背景图像不跟滚动条卷上去
缩写形式:
background:color image repeat
attachment position
二.CSS精灵(CSS sprites)
原理:将多个小的背景图像整合到一张大图上,
减轻服务器负担
说明:CSS精灵(小盒子大图),所以background-position
都是负值,最大值 (0,0)
三.列表(Lists)
(1) list-style-type:disc 默认值。实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用项目符号
(2) list-style-image:url(图像URL);
(3) list-style-position:outside|inside
缩写形式
list-style:type image position;
说明: 常用:list-style:none;
新闻列表常用:
.list li{
background:url(images/dot.png) no-repeat left center;
padding-left:12px;
}