1.在CSS中position属性值absolute表示什么定位?
绝对定位,不占据原在文档的空间,并且在定位后成块状元素.
2.在网页中z-index对没有设置定位的网页元素有效吗?
无效;
z-index属性只对定位元素有效
如果元素没有设置定位,z-index将不会起作用
3.使用CSS3中2D变形分别可以操作元素的哪些效果?
缩放 scale(x, y)
倾斜 skew(deg, deg)
旋转 rotate(deg)
移动 translate(x, y)
4.使用CSS3动画属性实现动画的步骤是什么?
先使用keyframes定义动画
再使用animati属性定义
5.第九章PPT第25页学员操作(制作QQ彩贝热销时装页面)
html代码:
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QQ彩贝</title>
<link type="text/css" rel="stylesheet" href="demo.css"/>
</head>
<body>
<div>
<ul id="sp1">
<li><a href="#">超级信用卡</a></li>
<li>线上线下课累计彩贝积分</li>
<li><img id="sp6" src="pic/1.bmp"/></li>
</ul>
<ul id="sp2">
<li><a href="#">彩贝抢霸</a></li>
<li>每天10点更新</li>
<li><img src="pic/2.bmp"/></li>
</ul>
<ul id="sp3">
<li><a href="#">热门优惠劵</a></li>
<li>全场免费领取</li>
<li><img src="pic/3.bmp"/></li>
</ul>
<ul id="sp4">
<li><a href="#">促销活动</a></li>
<li>汇集全网优惠</li>
<li><img src="pic/4.bmp"/></li>
</ul>
<ul id="sp5">
<li><a href="#">精挑细选</a></li>
<li>给你最好的选择</li>
<li><img src="pic/5.bmp"/></li>
</ul>
</div>
</body>
css代码:
*{
margin: 0px;
padding: 0px;
}
div{
margin: 20px auto;
width: 600px;
height: 300px;
border: 1px gray solid;
}
ul{
list-style: none;
display: inline-block;
box-sizing: border-box;
float: left;
}
ul li:nth-of-type(2){
font-size: 10px;
height: 20px;
line-height: 20px;
display: block;
transform: translate(10px,20px);
}
a{
display: block;
text-decoration: none;
color: darkgray;
font-weight: bold;
font-size: 14px;
height: 30px;
line-height: 30px;
transform: translate(10px,20px);
}
a:hover{
text-decoration: underline;
}
#sp1{
width: 200px;
height: 300px;
border: 1px gray solid;
}
#sp2{
width: 200px;
height: 150px;
border: 1px gray solid;
}
#sp3{
width: 200px;
height: 150px;
border: 1px gray solid;
}
#sp4{
width: 200px;
height: 150px;
border: 1px gray solid;
}
#sp5{
width: 200px;
height: 150px;
border: 1px gray solid;
}
#sp6{
position: relative;
top: 100px;
left: 20px;
}
img{
transition:all 1s ease-out;
position: relative;
top: -20px;
left: 80px;
}
img:hover{
transform: translate(-12px,0);
}