效果如下：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片的布局</title>
<style type="text/css">
.all {
/* 宽度 */
800px;
/* 左右居中 */
margin: 0 auto;
}
.title {
/* 宽度 */
100%;
/* 高度度 */
height: 75px;
/* 浮动 */
float: left;
/* 弹性盒子 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.title_con {
/* 文字大小 */
font-size: 20px;
/* 文字粗细 */
font-weight: 900;
/* 文字行高 */
line-height: 75px;
/* 外边距 */
margin: 0 20px;
}
.title_left {
/* 展示为块级元素 */
display: block;
/* 宽度 */
40%;
/* 高度 */
height: 2px;
/* 渐变的背景 */
background-image: linear-gradient(to left, #C7C7C7, white);
}
.title_right {
/* 展示为块级元素 */
display: block;
/* 宽度 */
40%;
/* 高度 */
height: 2px;
/* 渐变的背景 */
background-image: linear-gradient(to right, #C7C7C7, white);
}
.five {
/* 宽度 */
100%;
/* 高度 */
height: 150px;
/* 浮动 */
float: left;
}
.five-item {
/* 宽度 */
18%;
/* 高度 */
height: 100%;
/* 浮动 */
float: left;
/* 外边距 */
margin: 0 1%;
}
.five-item>img {
/* 宽度 */
100%;
/* 高度 */
height: 100%;
/* 园角 */
border-radius: 10px;
/* 背景阴影 */
box-shadow: 7px 7px 7px #C0C0C0
}
.four {
/* 宽度 */
100%;
/* 高度 */
height: 300px;
/* 浮动 */
float: left;
}
.four>img {
/* 宽度 */
25%;
/* 高度 */
height: 50%;
/* 浮动 */
float: left;
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<span class="title_left"></span>
<span class="title_con">平台特色</span>
<span class="title_right"></span>
</div>
<div class="five">
<div class="five-item">
<img src="http://b1-q.mafengwo.net/s11/M00/13/A3/wKgBEFszfaOAaPX1AAT4-s_99WU62.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90">
</div>
<div class="five-item">
<img src="http://n1-q.mafengwo.net/s6/M00/B7/4B/wKgB4lMOz1iAZM1yAAQcApX2rY446.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50">
</div>
<div class="five-item">
<img src="http://b1-q.mafengwo.net/s5/M00/91/06/wKgB3FH_RVuATULaAAH7UzpKp6043.jpeg">
</div>
<div class="five-item">
<img src="http://b1-q.mafengwo.net/s6/M00/BE/68/wKgB4lMO0pyATG6rAAdmdUCVt-031.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50">
</div>
<div class="five-item">
<img src="http://n1-q.mafengwo.net/s6/M00/B7/4B/wKgB4lMOz1iAZM1yAAQcApX2rY446.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50">
</div>
</div>
<div class="title">
<span class="title_left"></span>
<span class="title_con">设计企业</span>
<span class="title_right"></span>
</div>
<div class="four">
<img src="http://b1-q.mafengwo.net/s11/M00/13/A3/wKgBEFszfaOAaPX1AAT4-s_99WU62.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90">
<img src="http://n1-q.mafengwo.net/s6/M00/B7/4B/wKgB4lMOz1iAZM1yAAQcApX2rY446.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50">
<img src="http://b1-q.mafengwo.net/s5/M00/91/06/wKgB3FH_RVuATULaAAH7UzpKp6043.jpeg">
<img src="http://b1-q.mafengwo.net/s6/M00/BE/68/wKgB4lMO0pyATG6rAAdmdUCVt-031.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50">
<img src="http://b1-q.mafengwo.net/s5/M00/91/06/wKgB3FH_RVuATULaAAH7UzpKp6043.jpeg">
<img src="http://b1-q.mafengwo.net/s6/M00/BE/68/wKgB4lMO0pyATG6rAAdmdUCVt-031.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50">
<img src="http://b1-q.mafengwo.net/s11/M00/13/A3/wKgBEFszfaOAaPX1AAT4-s_99WU62.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90">
<img src="http://n1-q.mafengwo.net/s6/M00/B7/4B/wKgB4lMOz1iAZM1yAAQcApX2rY446.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50">
</div>
</div>
</body>
<script type="text/javascript">
/* 使用原生的 js 替换上面的图片 */
var arr_five = [{
src: 'http://b1-q.mafengwo.net/s11/M00/13/A3/wKgBEFszfaOAaPX1AAT4-s_99WU62.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90'
},
{
src: 'http://b1-q.mafengwo.net/s5/M00/91/06/wKgB3FH_RVuATULaAAH7UzpKp6043.jpeg'
},
{
src: 'http://n1-q.mafengwo.net/s6/M00/B7/4B/wKgB4lMOz1iAZM1yAAQcApX2rY446.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50'
},
{
src: 'http://b1-q.mafengwo.net/s5/M00/91/06/wKgB3FH_RVuATULaAAH7UzpKp6043.jpeg'
},
{
src: 'http://b1-q.mafengwo.net/s11/M00/13/A3/wKgBEFszfaOAaPX1AAT4-s_99WU62.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90'
}
];
var str_five = ''
for (let f of arr_five) {
str_five += '<div class="five-item"><img src="' + f.src + '"></div>'
}
document.getElementsByClassName('five')[0].innerHTML = str_five
/* 使用原生的 js 替换上面的图片 */
var arr_four = [{
src: 'http://b1-q.mafengwo.net/s11/M00/13/A3/wKgBEFszfaOAaPX1AAT4-s_99WU62.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90'
},
{
src: 'http://n1-q.mafengwo.net/s6/M00/B7/4B/wKgB4lMOz1iAZM1yAAQcApX2rY446.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50'
},
{
src: 'http://b1-q.mafengwo.net/s5/M00/91/06/wKgB3FH_RVuATULaAAH7UzpKp6043.jpeg'
},
{
src: 'http://b1-q.mafengwo.net/s6/M00/BE/68/wKgB4lMO0pyATG6rAAdmdUCVt-031.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50'
},
{
src: 'http://b1-q.mafengwo.net/s5/M00/91/06/wKgB3FH_RVuATULaAAH7UzpKp6043.jpeg'
},
{
src: 'http://b1-q.mafengwo.net/s6/M00/BE/68/wKgB4lMO0pyATG6rAAdmdUCVt-031.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50'
},
{
src: 'http://b1-q.mafengwo.net/s11/M00/13/A3/wKgBEFszfaOAaPX1AAT4-s_99WU62.jpeg?imageView2%2F2%2Fw%2F700%2Fh%2F600%2Fq%2F90%7CimageMogr2%2Fstrip%2Fquality%2F90'
},
{
src: 'http://n1-q.mafengwo.net/s6/M00/B7/4B/wKgB4lMOz1iAZM1yAAQcApX2rY446.jpeg?imageView2%2F2%2Fw%2F600%2Fq%2F50'
}
];
var str_four = ''
for (let f of arr_four) {
str_four += '<img src="' + f.src + '">'
}
document.getElementsByClassName('four')[0].innerHTML = str_four
</script>
</html>
声明：所有的图片只用于学习、不用做任何商业用途。如有侵权，立马删除。