网页布局与样式设计-优快云博客

<!DOCTYPE html>
<html lang="zh-cn">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>
   </title>
   <meta name="format-detection" content="telephone=no, address=no">
   <meta name="apple-mobile-web-app-capable" content="yes" /> 
   <meta name="apple-touch-fullscreen" content="yes"/>
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style>
ul,li{list-style: none;margin: 0;padding:0}
body{margin:0;background: #ff9999}
.imgbox{
width:50vw;
height:80vw;
background: #ff9999;
float:left;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
/*.imgcontent{width: calc(100% - 30px);height:calc(100% - 30px);padding:15px;overflow: hidden;}*/
.imgbox:before{
content:'';
padding:5px;
box-sizing: border-box;
width:100%;
height:100%;
position: absolute;
background:
url('bg00.png') no-repeat 0 0,
url('bg01.png') no-repeat 0 100%,
url('bg10.png') no-repeat 100% 0,
url('bg11.png') no-repeat 100% 100%;
}

.imgcontent{width:100%;height:100%;padding:15px;box-sizing: border-box;overflow: hidden;position: relative;}
.imgcontent:before{
content:"";
width:calc(100% - 30px);
height: calc(100% - 12px);
display: block;
position: absolute;
top:6px;
left:15px;
z-index: 9;
background:
url('line.png') repeat-x 15px 0,
url('line.png') repeat-x 0 100%
}

.imgcontent:after{
content:"";
width:calc(100% - 12px);
height: calc(100% - 60px);
display: block;
position: absolute;
top:30px;
left:6px;
z-index: 9;
background:
url('line.png') repeat-y 0 0,
url('line.png') repeat-y 100% 0
}
.info{width:100%;height:100%;position: relative;overflow: hidden;}
.info img{width:100%;transform:translate(-50%,-50%);margin-top:50%;margin-left:50%;border-radius:5px}

.title{width:100%;position: absolute;bottom:0;left:0;background: rgba(0,0,0,.5);color:#fff;border-radius: 5px;padding:3px;}
</style>
</head>
<body>
<div>
<ul>
<li class="imgbox">
<div class="imgcontent">
<div class="info">
<div><img src="t1.png" ></div>
<div class="title">标题标题标题标题标题</div>
</div>

</div>
</li>
<li class="imgbox">
<div class="imgcontent">
<div class="info">
<div><img src="t2.jpg" ></div>
<div class="title">标题标题标题标题标题</div>
</div>
</div>
</li>
<li class="imgbox">
<div class="imgcontent">
<div class="info">
<div><img src="t1.png" ></div>
<div class="title">标题标题标题标题标题</div>
</div>

</div>
</li>
<li class="imgbox">
<div class="imgcontent">
<div class="info">
<div><img src="t1.png" ></div>
<div class="title">标题标题标题标题标题</div>
</div>
</div>
</li>
</ul>

</div>
</body>
</html>