網頁頁面有多種元素 ， 例如圖片 ， 聲音 ， 視頻等 。 也有用來統計數據 ， 處理用戶信息的表格 ， 承載網頁中的內容 。 而有顏色的表格 ， 往往比純色的表格要美觀許多 。 下面 ， 我們就開始為網頁中的表格增加顏色效果 。 工具/材料 webstorm
【如何給網頁表格增加顏色效果】bootstrap文件
操作方法 01 在編譯環境（webstorm）右擊工程名 ， 新建一個如bg.html文件 ， (如圖:新建一個HTML文件）
02 找到bootsrap文件夾 ， 把所需要的bootstrap文件引入到bg.html文件里面（如圖：引入bootsrap等文件）
03 在<body>標簽里面初始化數據 ， 代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-init="userlist=[{user:'lucy',age:20,work:'UI設計'},{user:'lily',age:23,work:'前端開發工程師'},{user:'王 雷',age:25,work:'人事部經理'},{user:'李杰',age:26,work:'軟件工程師'}]">
</body>
04 制作一個帶有邊框響應式表格 ， 表頭的內容包括（姓名 ， 年齡 ， 職業 ， 索引）等信息
05 運行程序 ， 在網頁頁面的中間位置 ， 會出現一個網頁頭部的內容
06 利用ng-repeat把數據綁定到表格中 ， 代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href=https://vvvtt.com/article/"node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src=https://vvvtt.com/article/"node_modules/bootstrap/dist/js/bootstrap.min.js">
<script src=https://vvvtt.com/article/"node_modules/angular/angular.min.js">
</head>
<body ng-init="userlist=[{user:'lucy',age:20,work:'UI設計'},{user:'lily',age:23,work:'前端開發工程師'},{user:'王 雷',age:25,work:'人事部經理'},{user:'李杰',age:26,work:'軟件工程師'}]">
<div class="container" >
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>職業</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in userlist">
<td ng-bind="u.user" ></td>
<td ng-bind="u.age" ></td>
<td ng-bind="u.work"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
猜你喜歡
- 手機如何編程C語言
- 怎么制作網頁扇形分區圖形
- 如何制作一個弧形軌跡運動的球體圖案
- 如何創建一個文本選擇器
- 如何查看qq動態密碼？
- 如何將手機恢復出廣設置
- 如何預防兔子不同生育期疾病
- 如何教會倉鼠用倉鼠浴沙
- 如何不讓龍貓咬龍貓籠子
- 如何完善PPAPI插件