1.在CSS中position属性值absolute表示什么定位?
答:absolute:绝对定位。
2.在网页中z-index对没有设置定位的网页元素有效吗?
答:有效;未设置绝对定位时所处的环境,z-index值是0。
3.使用CSS3中2D变形分别可以操作元素的哪些效果?
答:4种2D变形的使用:
2D位移:translate();
2D缩放:scale();
2D倾斜:skew();
2D旋转:rotate()。
4.使用CSS3动画属性实现动画的步骤是什么?
答:使用@keyframes制作关键帧,用animation调用@keyframes声明的关键帧。
5.第九章PPT第25页学员操作(制作QQ彩贝热销时装页面)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
#father{
margin-top: 30px;
margin-left: 100px;
width: 800px;
height: 500px;
}
#part1{
width: 250px;
height: 400px;
border: 1px solid darkgray;
float: left;
}
#part1 ul li{
line-height: 20px;
padding-left:20px ;
padding-top:30px ;
}
#part1 li:last-of-type{
margin-left: 50px;
}
#part2{
width: 250px;
height: 400px;
border: 1px solid darkgray;
float: left;
}
#part2-1{
border: 1px solid darkgray;
border-top:none;
border-left:none;
border-right:none;
}
#part2-1 ul li{
margin-top: 10px;
margin-left: 20px;
}
#part2-2 ul li{
margin-top: 10px;
margin-left: 20px;
}
#part2 li:last-of-type{
margin-left: 125px;
}
#part3{
width: 250px;
height: 400px;
border: 1px solid darkgray;
float: left;
}
#part3-1{
border: 1px solid darkgray;
border-top:none;
border-left:none;
border-right:none;
}
#part3-1 ul li{
margin-top: 6px;
margin-left: 20px;
}
#part3-2 ul li{
margin-top: 6px;
margin-left: 20px;
}
#part3 li:last-of-type{
margin-left: 125px;
}
li:img{
transition: all 1s ease-out;
}
li img:hover{
transform: translate(-12px,0);
}
</style>
</head>
<body>
<div id="father">
<div id="part1">
<ul>
<li><strong>超级信用卡</strong></li>
<li>线上线下课累计彩贝积分</li>
<li><img src="1.bmp"></li>
</ul>
</div>
<div id="part2">
<div id="part2-1">
<ul>
<li><strong>彩贝抢霸</strong></li>
<li>每天10点更新</li>
<li><img src="2.bmp"></li>
</ul>
</div>
<div id="part2-2">
<ul>
<li><strong>促销活动</strong></li>
<li>汇集全网优惠</li>
<li><img src="3.bmp"></li>
</ul>
</div>
</div>
<div id="part3">
<div id="part3-1">
<ul>
<li><strong>热门优惠劵</strong></li>
<li>全场免费领取</li>
<li><img src="4.bmp"></li>
</ul>
</div>
<div id="part3-2">
<ul>
<li><strong>精挑细选</strong></li>
<li>给你最好的选择</li>
<li><img src="5.bmp"></li>
</ul>
</div>
</div>
</div>
</body>
</html>
未加载图片文件,内外边距还可微调。