html5 文件管理模板
时间: 2023-10-19 13:05:10 浏览: 49
以下是一个简单的 HTML5 文件管理模板,你可以根据自己的需求进行修改和定制。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Manager</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
padding: 50px;
}
.file-list {
list-style-type: none;
padding-left: 0;
}
.file-list li {
margin-bottom: 10px;
}
.file-list li a {
display: block;
padding: 10px;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
}
.file-list li a:hover {
background-color: #eee;
}
.file-list li a i {
margin-right: 5px;
}
.btn-add-file {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>File Manager</h1>
<button class="btn btn-primary btn-add-file"><i class="fa fa-plus"></i> Add File</button>
<ul class="file-list">
<li><a href="#"><i class="fa fa-file"></i> File 1</a></li>
<li><a href="#"><i class="fa fa-file"></i> File 2</a></li>
<li><a href="#"><i class="fa fa-file"></i> File 3</a></li>
</ul>
<div class="modal fade" id="addFileModal" tabindex="-1" role="dialog" aria-labelledby="addFileModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="addFileModalLabel">Add File</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="file-name">File Name</label>
<input type="text" class="form-control" id="file-name" placeholder="Enter file name">
</div>
<div class="form-group">
<label for="file-description">Description</label>
<textarea class="form-control" id="file-description" rows="3" placeholder="Enter file description"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () {
// Show add file modal when add file button is clicked
$('.btn-add-file').click(function() {
$('#addFileModal').modal('show');
});
});
</script>
</body>
</html>
```
这个模板包含一个文件列表和一个添加文件的模态框。你可以通过修改样式和 JavaScript 代码来满足自己的需求。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)