标签:
CSS基本属性:
文本
a) scroll 背景图片随着页面的其余部分滚动
b) no 背景图固定
c) fixed
a) top 上
b) right 右
c) bottom 下
d) left 左
a) 高度 百分比(如果只设置一个值,第二个被默认为auto)
b) 百分比 以父元素的百分比来设置高度
c) cover:把背景图扩展到足够大完全覆盖背景区域,超出部分会被隐藏
d) contain:把背景图片扩展到最大尺寸使其高度完全适应内容区域。
列表
a) circle 空心圆
b) square 方块
c) lower-roman 小写罗马字符
d) upper-roman 大写罗马字符
e) lower-alpha 小写英文字母
f) upper-alpha 大写因为字母
表格
2. cursor:pointer; 将鼠标设置为手型。
线性渐变
Transform、Transition、Animation之间的区别:
Transform:对元素进行变形;
Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。
Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多个关键贞。
图片整理技术(Sprite图)
CSS sprite 是一种图片的处理方式,它允许网页设计师将很多张图片合并在同一张图档中,然后根据 CSS 档中的文字描述将图档分区块加载。如在一个div里,你可以设置在网页上显示这张图档中的某个区域的图片,然后根据用户的操作或选择改变在这个区域内显示的图片以及其他样式。其CSS样式示例代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>雪碧图练习</title>
<link rel="stylesheet" href="testSprite.css"/>
<style>
.divClass{
width:90px;
height:100px;
background-image:url("images/1.png");
background-size:500px 800px;
}
.divClass:hover{
width:80px;
height:100px;
background-image:url("images/1.png");
background-size:500px 800px;
background-position:-50px 0; //-50表示右边的图向横坐标左移动50px而纵坐标上保持不变
cursor:pointer;
}
</style>
</head>
<body>
<div class="divClass"></div>
</body>
</html>
标签:
原文地址:http://www.cnblogs.com/veganQian/p/5285729.html