10月28日作业

最新推荐文章于 2024-09-09 22:16:15 发布

pengyuzhou_5

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量45

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/m0_74349974/article/details/134213537

版权

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>

未加载图片文件，内外边距还可微调。

pengyuzhou_5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
10月28日作业

答：使用@keyframes制作关键帧，用animation调用@keyframes声明的关键帧。未设置绝对定位时所处的环境，z-index。1.在CSS中position属性值absolute表示什么定位？2D位移：translate()；2D旋转：rotate()。2.在网页中z-index对没有设置定位的网页元素有效吗？2D缩放：scale()；2D倾斜：skew()；3.使用CSS3中2D变形分别可以操作元素的哪些效果？答：absolute：绝对定位。4.使用CSS3动画属性实现动画的步骤是什么？
复制链接

扫一扫