HTML5前端设计——课表制作

HTML5的功能对于前段的设计应用比较广泛。在里面中利用table标签作为主要的布局，通过合并单元格，设置单元格的背景颜色，字体颜色以及div大小，同时利用HTML5的css选择器，使修饰代码少了很多，只要麻烦在于合并单元格和th标签的大小。同时利用css样式表和代码分离，采用外链式link链接。下面是利用HTML5和css样式进行的课表制作代码及效果图。

	
		
		
		
	
	
		

			

				
			
			

				

					

						
3月
						
周一
						
周二
						
周三
						
周四
						
周五
						
周六
						
周日
					
					

						
08:00 08:45
						

						
视觉设计基础@实验楼207
						
软件工程@五教南101
						
电路与电子技术@五教南201
						
电路与电子技术@实验楼205
						
UI界面设计@实验楼209
						

					
					

						
08:55 09:40

					
					

						
10:10 10:55
						
操作系统@教学楼南201
						

						
UI设计界面@五教南508
						
操作系统@三实验楼209
						

					
					

						
11:05 11:50

					
					

						
14:20 15:05
						
电路与电子技术@五教南301
						
大学体育健美操选项@西区山顶篮球场
						

						
软件工程导论@1教307
						

					
					

						
15:15 16:00

					
					

						
16:20 17:05
						
形势与政策IV@五教北702
						

						

						
web前端高端技术@东区第三实验室
						
操作系统@八教低阶1
						

					
					

						
17:15 18:00

					
					

						
19:00 19:45
						
UI界面设计@第三实验楼209
						
Photoshop图像处理@第三实验楼205
						
Photoshop图像处理@第三实验楼209
						
web前端高端技术@第三实验楼209
						

						
web前端高端技术@第三实验楼205
						

					
					

						
19:55 20:40

					
					

						
11

					
				
			
		
	

下面是css样式修饰：

.fi-box{
	width:555px;height:90px;		
}
*{margin:0px;padding: 0px;}
.box{
	width:530px;
	height:90px;
}
img{
	width:555px;
	height:90px;
}
table{
	width:555px;
	height: 800px;
	border:1px sky blue;
	color: aliceblue;
	
}
tr th{
	width: 80px;height: 40px;
	background-color: gainsboro;
	color:black;
}
table tr td{
	background-color: azure;}
#shijie{background-color: gold;}
#dianlu{background-color: #00CED1;}
#caozuo{background-color: coral;}
#ph{background-color: cyan;}
#web{background-color: chartreuse;}
#xingshi{background-color: darkturquoise;}
#ruanjian{background-color: hotpink;}
#daxue{background-color: fuchsia;}
td:first-child{
	color: #7FFF00;
}

效果图如下：