一、jsion数据文件：fileList.js
var fileList = [{
name: 'aa',
size: '1.3M',
createTime: '2019-07-16 11:33',
url: './aa.doc',
remarks: '图片类型文件',
},{
name: 'bb',
size: '32.3M',
createTime: '2019-07-16 11:34',
url: './bb.doc',
remarks: 'Word类型文件',
},
{
name: 'cc',
size: '2.3K',
createTime: '2019-07-16 15:34',
url: './cc.doc',
remarks: 'Excel类型文件',
}];
二、html文件：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>文件管理</title>
<link href="./home.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app">
<h2>文件管理</h2>
<div>
<div class="file-title">
<span class="name-title">文件名</span>
<span class="size-title">大小</span>
<span class="createTime-title">日期</span>
<span class="remarks-title">备注</span>
</div>
<div class="file-content">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="./fileList.js"></script>
<script>
var strHtml = " ";
for(var i = 0;i < fileList.length; i++){
strHtml += "<div class='contentList'>";
strHtml += "<img src='./images/fileLogos.jpg'>";
strHtml += "<span class='name'><a href="+ fileList[i].url +">"+ fileList[i].name + "</a></span>";
strHtml += "<span class='size'>"+ fileList[i].size + "</span>";
strHtml += "<span class='createTime'>" + fileList[i].createTime + "</span>";
strHtml += "<span class='remarks'>" + fileList[i].remarks + "</span></div>";
}
$(".file-content").append(strHtml);
</script>
三、css文件：home.css
#app{
1200px;
margin: 0 auto;
}
.file-title{
border: 1px solid #dcdee2;
1200px;
height: 60px;
line-height: 60px;
border-bottom: none;
}
.name-title{
/* border: 1px solid blue; */
display: inline-block;
180px;
font-size: 18px;
font-weight: 600;
color: #17233d;
padding-left: 10px;
}
.size-title{
/* border: 1px solid blue; */
display: inline-block;
180px;
font-size: 18px;
font-weight: 600;
color: #17233d;
padding-left: 10px;
}
.createTime-title{
/* border: 1px solid blue; */
display: inline-block;
250px;
font-size: 18px;
font-weight: 600;
color: #17233d;
padding-left: 10px;
}
.remarks-title{
/* border: 1px solid blue; */
display: inline-block;
250px;
font-size: 18px;
font-weight: 600;
color: #17233d;
padding-left: 10px;
}
.file-content{
border: 1px solid #dcdee2;
1200px;
border-bottom: none;
}
/* .file-content span{
220px;
} */
.name{
/* border: 1px solid darkmagenta; */
display: inline-block;
155px;
color: #515a6e;
}
.size{
/* border: 1px solid darkblue; */
display: inline-block;
150px;
color: #515a6e;
}
span.createTime{
/* border: 1px solid forestgreen; */
display: inline-block;
290px;
color: #515a6e;
}
.remarks{
/* border: 1px solid forestgreen; */
display: inline-block;
170px;
color: #515a6e;
}
a{
text-decoration: none;
font-size: 18px;
}
.line{
border: 0.5px solid #dcdee2;
1200px;
margin-top: 10px;
}
img{
40px;
height: 40px;
margin-left: 10px;
margin-right: 10px;
display: inline-block;
line-height: 30px;
/* border: 1px solid red; */
}
.contentList{
/* border: 1px solid red; */
line-height: 50px;
border-bottom: 1px solid #dcdee2;
display: flex;
align-items: center;
}