<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/SmoothScroll.min.js"></script> <!-- js for gallery --> <script src="js/darkbox.js"></script> <!-- /js for gallery --> <!-- js for back to top --> <script src="js/main.js"></script> <!-- /js for back to top --> <!-- js for nav-smooth scroll --> <script> $(document).ready(function(){ // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
时间: 2024-03-11 18:44:30 浏览: 24
这是一个包含多个JavaScript文件的HTML文件中的一部分代码。这些JavaScript文件用于添加一些功能和效果,例如:
1. jQuery.min.js - 用于添加交互功能和动态效果的JavaScript库。
2. Bootstrap.min.js - 用于创建响应式网站和网页元素的JavaScript框架。
3. SmoothScroll.min.js - 用于平滑滚动到页面上的不同部分的JavaScript插件。
4. darkbox.js - 用于显示图库的JavaScript插件。
5. main.js - 用于添加“回到顶部”按钮的JavaScript文件。
此外,代码中的最后一个JavaScript函数是用于添加导航栏平滑滚动效果的JavaScript函数。当用户单击导航栏链接时,该函数将平滑滚动到页面上的不同部分,而不是直接跳转到该部分。
相关问题
<script type="text/javascript" src="js/bootstrap.min.js"></script>
同样,这也不是一个问题,这是一个 HTML 标签,用于引入 Bootstrap 框架的 JavaScript 文件。通过这个标签,网页可以使用 Bootstrap 提供的一些 JavaScript 功能,如弹窗、下拉菜单、轮播等。需要注意的是,这个标签必须在引入 jQuery 和 Bootstrap CSS 文件之后引入。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户</title> <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/4.5.3/css/bootstrap.css}"> <style type="text/css"> .odd{ background-color: antiquewhite; } .even{ background-color: aquamarine; } </style> <script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.js}"></script> <script type="text/javascript" th:src="@{/webjars/bootstrap/4.5.3/js/bootstrap.min.js}"></script> </head> <body> <table border="3" class="table"> <tr> <th>序号</th><th>用户名</th><th>角色</th> </tr> <tr th:each="user:${users.list}"> <td th:text="${user.userId}">0</td> <td th:text="${user.userName}">地球</td> <td th:text="${user.roleName}">admin</td> </tr> </table> </body> </html>美化这个页面,使表格占满页面
可以尝试以下样式代码来美化页面,使表格占满页面:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户</title>
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/4.5.3/css/bootstrap.css}">
<style type="text/css">
.odd{
background-color: antiquewhite;
}
.even{
background-color: aquamarine;
}
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.table{
width: 100%;
}
</style>
<script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/4.5.3/js/bootstrap.min.js}"></script>
</head>
<body>
<table border="3" class="table">
<tr>
<th>序号</th><th>用户名</th><th>角色</th>
</tr>
<tr th:each="user:${users.list}">
<td th:text="${user.userId}">0</td>
<td th:text="${user.userName}">地球</td>
<td th:text="${user.roleName}">admin</td>
</tr>
</table>
</body>
</html>
```
这里使用了 flex 布局,将页面垂直居中,同时让表格宽度为 100% ,占满整个页面。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
<html> <head> <title>人员管理界面</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> </head> <body> 员工列表 —— 显示所有员工信息 ID 姓名 电话号 地址 职位 职位编号 状态 证件照 <c:forEach items="${employees}" var="employees"> ${employees.id} ${employees.name} ${employees.phonenumber} ${employees.address} ${employees.job} ${employees.jobid} ${employees.state} ![]()
更改 | 删除 </c:forEach> </body> </html>给这个界面的表格实现一个分页的功能,每页的最大数目为5
![](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)