HTML5前端开发实战01-学生信息表
2025-01-29
C语言自学完备手册(33篇)
Android多分辨率适配框架
HTML5前端开发实战系列教程
MySQL数据库实操教程(35篇图文版)
推翻自己和过往——自定义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>