特征布局4

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8"/>
<title></title>
<style type="text/css">
*{margin: 0;
padding: 0;}
.outer{
width: 960px;
height: 269px;
background-color: azure;
border: 1px solid #a1a1a1;
margin: 100px auto 0;
}
.box{width: 920px;
height: 219px;
border-top: 1px solid #a1a1a1;
margin: 0 auto;
}
p{margin-left: 20px;
font: bold 18px "微软雅黑";
color:#000;
padding: 12.5px;
}
.pic1{padding: 20px 12.5px 0px 0px;}
.pic2{padding: 20px 12.5px 0px 12.5px;}
.pic3{padding: 20px 0px 0px 12.5px;}
.pic4{padding: 25px 12.5px 38px 0px;}
.pic5{padding: 25px 12.5px 38px 12.5px;}
.pic6{padding: 25px 0px 38px 12.5px;}
</style>
</head>
<body>
<div class="outer">
<p>图片展示</p>
<div class="box">
<img class = "pic1" src="goods.jpg" alt="图片">
<img class = "pic2" src="goods.jpg" alt="图片">
<img class = "pic2" src="goods.jpg" alt="图片">
<img class = "pic2" src="goods.jpg" alt="图片">
<img class = "pic3" src="goods.jpg" alt="图片">
<img class = "pic4" src="goods.jpg" alt="图片">
<img class = "pic5" src="goods.jpg" alt="图片">
<img class = "pic5" src="goods.jpg" alt="图片">
<img class = "pic5" src="goods.jpg" alt="图片">
<img class ="pic6" src="goods.jpg" alt="图片">
</div>
</div>
</body>
</html>

特征布局4.html.png

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 5,438评论 0 0
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,875评论 0 1
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,375评论 0 11
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,239评论 0 8
  • 老公最近很忙,应酬也多,手头的活也很多,又要组织会议,每天固定去给一个老病号换药…… 我不忙,但也没给自己轻松……...
    薛小禅阅读 663评论 0 0