如何給網頁表格增加顏色效果

網頁頁面有多種元素，例如圖片，聲音，視頻等。也有用來統計數據，處理用戶信息的表格，承載網頁中的內容。而有顏色的表格，往往比純色的表格要美觀許多。下面，我們就開始為網頁中的表格增加顏色效果。

工具/材料

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="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
</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>
07
在表格的第一列，奇數行，顯示紅色，代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
</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" ng-class="{'danger':odd}" ></td>
<td ng-bind="u.age" ></td>
<td ng-bind="u.work"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
08
運行程序
09
為表格的第三例，分行顯示不同的顏色，代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Title</title>

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
</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" ng-class="{'danger':odd}" ></td>
<td ng-bind="u.age" ></td>
<td ng-bind="u.work" ng-class="{'danger':even,'success':odd}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
10
再次運行程序。
End

發表于 2017-11-29 00:00
閱讀 ( 895 )
分類：電腦網絡

如何給網頁表格增加顏色效果

工具/材料

操作方法

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章