当前位置:网站首页> 经验杂谈>正文

如何给网页表格增加颜色效果,值得收藏

发布于:2021-02-20 20:28:57发布者:天晴问友| 评论:0条

网页页面有多种元素,例如图片,声音,视频等。也有用来统计数据,处理用户信息的表格,承载网页中的内容。而有颜色的表格,往往比纯色的表格要美观许多。下面,我们就开始为网页中的表格增加颜色效果。

工具/材料

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)

相关经验+更多
  • 武汉越王勾践剑交通卡怎么获得

    武汉最近推出了立体交通卡,名叫“越王勾践剑”,光听名字就觉得很霸气。相信很多小伙伴想获得,接下来小编就为你带来武汉越王勾践剑交通卡购买的方法。武汉越王勾践剑交通卡怎么获得1、微信搜索“武汉通行”,点击武汉通行公众号2、点击进入公众号3、点击框中所指位置4、进入文章页面,找到立即购买点击就能下单了5、使用须知想要第一时间了解玩机技巧、app教程吗?那么关注天晴下载准没错,网站每天都会分享热门的教程哦

  • 苹果2021秋季发布会新品有哪些

    苹果2021秋季发布会有哪些新品?万众期待的发布会在本月15日将会举行,iPhone13的推出大家早就已经了解了,那么还有哪些新品会出现呢?接下来小编带来了详细全面的新品介绍,别错过了哦!苹果2021秋季发布会新品有哪些时间:2021.9.15地点:总部 Apple Park直播网址:请点击新产品:IPhone 13 系列此前对于这个系列早就已经官宣过了,推陈出新,不论是从外观、内部功能、续航能力

  • 小米商城学生认证怎么弄

    近日小米商城上线了感恩活动,只要是符合条件的大学生就可以获得相关的福利。那么我们该如何证明自己的学生身份呢?方法还是比较多样的,有需要的可以看看接下来的内容哦!小米商城学生认证怎么弄学信网认证登录自己的学信网,输入相关的密码,然后找到自己的大学生在线验证报告即可。或者登录小米商城,点击学生,然后输入姓名、身份证号、手机号和学信网的验证码也可以哦!输入验证码,然后等待工作人员验证成功以后就可以领取该

  • 华为个性化后壳怎么定制

    我们很多人在购买手机时都会看中后壳颜色,喜欢不同颜色的用户有时可能会因为颜色不全,而放弃购买,华为新推出了“个性化后壳”服务,可以满足用户们更换后壳的需要,实现颜色自选,快来看看后壳支持哪些型号吧。华为个性化后壳服务是什么昨日有网友发现,在华为官网上新推出了“个性化后壳”服务项目,对于很多人来说手机后壳非常容易摔坏,或者是自己看腻了后壳颜色,可以通过自费进行后壳更换,再也不用自己买后膜贴在手机上了

经验评论

评论列表(条(包括审核中))