拼图页面的制作

最新推荐文章于 2023-03-06 17:15:50 发布

森林树苗

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量438

点赞数 1

分类专栏： educoder实训平台答案文章标签： css elementui html

本文链接：https://blog.csdn.net/m0_57382477/article/details/122515461

版权

educoder实训平台答案专栏收录该内容

35 篇文章 124 订阅

订阅专栏

第1关：拼图页面的制作

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>拼图效果</title>
<!-- ********* Begin ********* -->
<style type="text/css">
*{margin:0; padding:0;}
.box{
	width:604px;
	height:454px;
	margin:0 auto;
	border:5px solid #aaa;
	/* ********* Begin ********* */
	border-radius:30px            ;
	/* ********* End ********* */
}
.one{
	width:604px;
	height:227px;
	/* ********* Begin ********* */
	border-radius:30px 30px 0 0            ;
	/* ********* End ********* */
}
.two{
	width:604px;
	height:227px;
	/* ********* Begin ********* */
	border-radius:0 0 30px 30px            ;
	/* ********* End ********* */
}
</style>
<!-- ********* End ********* -->
</head>
<body>
<div class="box">
	<div class="one"></div>
	<div class="two"></div>
</div>
</body>
</html>

第2关：拼图页面的制作-多背景图片设置

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>拼图效果</title>
<style type="text/css">
*{margin:0; padding:0;}
.box{
	width:604px;
	height:454px;
	margin:0 auto;
	border:5px solid #aaa;
	border-radius:30px;
}
.one{
	width:604px;
	height:227px;
	background-image:url(https://www.educoder.net/api/attachments/2072664),url(https://www.educoder.net/api/attachments/2072665),url(https://www.educoder.net/api/attachments/2072666);
	/* ********* Begin ********* */
	background-repeat:   no-repeat               ;
	background-position:   left,center,right             ;
	/* ********* End ********* */
	border-radius:30px 30px 0 0;
}
.two{
	width:604px;
	height:227px;
	background-image:url(https://www.educoder.net/api/attachments/2072667),url(https://www.educoder.net/api/attachments/2072668),url(https://www.educoder.net/api/attachments/2072669);
	/* ********* Begin ********* */
	background-repeat:  no-repeat               ;
	background-position:   left,center,right             ;
	/* ********* End ********* */
	border-radius:0 0 30px 30px;
}
</style>
</head>
<body>
<div class="box">
	<div class="one"></div>
	<div class="two"></div>
</div>
</body>
</html>

森林树苗

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
拼图页面的制作

第1关：拼图页面的制作<!doctype html><html><head><meta charset="UTF-8"><title>拼图效果</title><style type="text/css">*{margin:0; padding:0;}.box{ width:604px; height:454px; ma
复制链接

扫一扫