10.28作业

最新推荐文章于 2024-08-23 09:47:36 发布

陈璆鸣

最新推荐文章于 2024-08-23 09:47:36 发布

阅读量70

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/BiAlex/article/details/134170315

版权

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);
			}

陈璆鸣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.28作业

绝对定位,不占据原在文档的空间,并且在定位后成块状元素.如果元素没有设置定位，z-index将不会起作用。移动 translate(x, y)z-index属性只对定位元素有效。倾斜 skew(deg, deg)先使用keyframes定义动画。缩放 scale(x, y)旋转 rotate(deg)再使用animati属性定义。
复制链接

扫一扫