案例：
图片资源:
参考代码：
<!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>
更多推荐
HTML5网页设计基础——拼图效果
发布评论