HTML5网页设计基础——拼图效果

最新推荐文章于 2024-05-20 21:21:56 发布

无聊玩玩~

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量2.6k

点赞数 2

文章标签： html5 前端 html css3 网页设计

本文链接：https://blog.csdn.net/shengming_tutou/article/details/122775877

版权

案例：

图片资源:

参考代码：

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	*{
		margin:0;
		padding:0;
	}
	.wai{
		width:608px;
		height:454px;
		border:5px solid #999;
		margin:50px auto;
		border-radius: 30px;
	}
	
	.one,.two{
		width:606x;
		height:227px;
		
	}
	.one{
		
		background-image: url("../../素材/01.jpg"),url("../../素材/02.jpg"),url("../../素材/03.jpg");
		background-repeat:no-repeat;
		background-position: left center,center center,right center;
		border-radius: 30px 30px 0px 0px;
	}
	.two{
		background-image: url("../../素材/04.jpg"),url("../../素材/05.jpg"),url("../../素材/06.jpg");
		background-repeat:no-repeat;
	background-position: left center,center center,right center;
		border-radius:  0px 0px 30px 30px;
	}
	
	
</style>
<body>
	<div class="wai">
	<div class="one">
		<spen class="d1"></spen>
		<spen class="d2"></spen>
		<spen class="d3"></spen>
		</div>	
	<div class="two">
		<spen class="d4"></spen>
		<spen class="d5"></spen>
		<spen class="d6"></spen>
		</div>
	</div>
</body>
</html>

优惠劵

无聊玩玩~

关注关注

2
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
HTML5网页设计基础——拼图效果

案例：图片资源:参考代码：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><style> *{ margin:0; padding:0; } .wai{ width:608px; height:454px; border:5px solid #999;..
复制链接

扫一扫