HTML5前端开发实战01-学生信息表

最新推荐文章于 2022-05-07 15:00:55 发布

谷哥的小弟

最新推荐文章于 2022-05-07 15:00:55 发布

阅读量3.3k

点赞数 5

分类专栏： HTML5前端开发实战文章标签： HTML CSS JavaScript 项目源码

本文链接：https://blog.csdn.net/lfdfhl/article/details/100067752

版权

HTML5前端开发实战专栏收录该内容

8 篇文章 77 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

开篇

大概两年前我写了《讲给Android程序员看的前端和后台教程》；在这个专栏中介绍了前端开发基本技能，例如：HTML5、CSS、JavaScript等等。然后由于它的定位就是基础理论知识所以在项目开发这方面就略显不足了。为了弥补欠缺，我打算新开一个专栏《HTML5前端开发实战》讲解前端项目；恳请各位斧正，多谢。

OK，先来看一下今天要做的小项目——学生信息表；效果图如下：
在这里插入图片描述

代码如下:

<html>
	<head>
		<style type="text/css">
			#studentTable {
				font-family: "微软雅黑";
				width: 80%;
				border-collapse: collapse;
				text-align: center;		
				/* 水平居中 */
				margin: auto;
			}

			/* 表头 */
			th {
				font-size: 20px;
				padding: 5px 0;
				background: #A7C942;
				color: #ffffff;
			}

			/* 单元格 */
			td {
				font-size: 16px;
				border: 1px solid #98bf21;
				padding: 5px 7px;
			}

			/* 设置奇数行中的单元格td的背景颜色 */
			tr:nth-of-type(odd) td {
				background-color: #EAF2D3;
			}
		</style>
	</head>

	<body>
		<table id="studentTable">
			<tr>
				<th>姓 名</th>
				<th>年 龄</th>
				<th>城 市</th>
			</tr>
			<tr>
				<td>杨倩倩</td>
				<td>18</td>
				<td>成都</td>
			</tr>
			<tr>
				<td>李思思</td>
				<td>19</td>
				<td>天津</td>
			</tr>
			<tr>
				<td>王乐天</td>
				<td>17</td>
				<td>太原</td>
			</tr>
			<tr>
				<td>赵甜恬</td>
				<td>19</td>
				<td>昆明</td>
			</tr>
			<tr>
				<td>孙悦灵</td>
				<td>17</td>
				<td>广州</td>
			</tr>
			<tr>
				<td>陈清敏</td>
				<td>18</td>
				<td>贵阳</td>
			</tr>
		</table>
	</body>
</html>

谷哥的小弟

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
5
评论
HTML5前端开发实战01-学生信息表

大概两年前我写了《讲给Android程序员看的前端和后台教程》；在这个专栏中介绍了前端开发基本技能，例如：HTML5、CSS、JavaScript等等。然而由于它的定位就是基础理论知识，所以在项目开发这方面就略显不足了。为了弥补欠缺，我打算新开一个专栏《HTML5前端开发实战》讲解前端项目；恳请各位斧正，多谢。
复制链接

扫一扫