由于今天出去有事,所以没有时间听很多课,所以干脆写了一个代码来练习这几天自己学的东西:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页布局综合运用</title>
</head>
<style type="text/css">
#wrap{border:1px #000000 solid; background-color:#FFFFCC;margin:0 auto; text-align:center}/*浅黄*/
.header{height:70px; background-color:#3300FF;font-size:40px; font-family:"方正兰亭超细黑简体"}/*蓝色*/
.left{width:400px; height:800px; margin:5px;background-color:#CC00CC; float:left}/*紫色*/
.top{border:1px #000000 solid;height:370px;margin:10px; font-family:"方正兰亭超细黑简体"; font-size:16px}
.bottom{border:1px #000000 solid;height:370px;margin:10px}
.center{width:400px;height:800px; margin:5px;background-color:#FF6666;float:left;font-family:"方正兰亭超细黑简体"; font-size:32px}/*橙色*/
.right{width:640px;height:800px; margin:5px;background-color: #00FFFF; float:left}/*浅绿色*/
.footer{height:70px; background-color:#66FF00; clear:both;font-size:40px; font-family:"宋体"}/*绿色*/
</style>
<body>
<div id="wrap">
<div class="header">我是萌萌哒的头部</div>
<div class="left">
<div class="top">
/*如下是一个简单的表格*/
<table width="289" height="299" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>雪</td>
<td>落</td>
<td>苍</td>
<td>茫</td>
</tr>
<tr>
<td>雪</td>
<td>若</td>
<td>白</td>
<td>发</td>
</tr>
<tr>
<td>雪</td>
<td>若</td>
<td>花</td>
<td>凋</td>
</tr>
<tr>
<td>惹</td>
<td>乱</td>
<td>飞</td>
<td>鸟</td>
</tr>
</table>
</div>
<div class="bottom">
/*插入图片以及超链接*/
<img src="啦啦啦图片.jpg" />
<a href="http://blog.csdn.net/snowing1022/article/details/49952171">啦啦啦~点我进博客</a></div>
</div>
/*插入文本*/
<div class="center"><p>头上一片星光</p>
<p>脚下满目痍疮</p>
<p>隐约有腐朽的气息</p>
<p>又好似嫩绿倾吐的芬芳</p>
<p>我们在成长</p>
<p>一定会走过弯路</p>
<p>总会有那一米阳光</p>
<p>让你前方明亮</p>
<p>既然是必经之路</p>
<p>何不丢掉世俗的眼光</p>
<p>或许暂时会被遗忘</p>
<p>请坚持你的信仰</p></div>
<div class="right">
/*复杂表格(课程表)*/
<table width="570" height="770" border="1" align="center" cellpadding="5" cellspacing="1">
<tr>
<td colspan="2" align="center">课程类别</td>
<td colspan="1" align="center">学分</td>
<td colspan="2" align="center">百分比</td>
<td colspan="1" align="center">学时</td>
<td colspan="2" align="center">备注</td>
</tr>
<tr>
<td rowspan="2" align="center">通识课程</td>
<td colspan="1" align="center">I类</td>
<td rowspan="1" align="center">38</td>
<td colspan="2" align="center">23.75%</td>
<td colspan="1" align="center">592+16+3周</td>
<td colspan="2" align="center"></td>
</tr>
<tr>
<td rowspan="1" align="center">II类</td>
<td rowspan="1" align="center">10</td>
<td colspan="2" align="center">6.25%</td>
<td colspan="1" align="center"></td>
<td colspan="2" align="center"></td>
</tr>
<tr>
<td colspan="2" align="center">学科基础课程</td>
<td colspan="1" align="center">46</td>
<td colspan="2" align="center">28.75%</td>
<td colspan="1" align="center">640+192</td>
<td colspan="2" align="center"></td>
</tr>
<tr>
<td rowspan="2" align="center">专业课程</td>
<td colspan="1" align="center">专业主干课程</td>
<td rowspan="1" align="center">40</td>
<td colspan="2" align="center">25.00%</td>
<td colspan="1" align="center">192+112+26.5周</td>
<td colspan="2" align="center"></td>
</tr>
<tr>
<td rowspan="1" align="center">专业选修课程</td>
<td rowspan="1" align="center">20</td>
<td colspan="2" align="center">12.50%</td>
<td colspan="1" align="center">224+192</td>
<td colspan="2" align="center"></td>
</tr>
<tr>
<td colspan="2" align="center">个性课程</td>
<td colspan="1" align="center">6</td>
<td colspan="2" align="center">3.75%</td>
<td colspan="1" align="center"></td>
<td colspan="2" align="center"></td>
</tr>
<tr>
<td colspan="2" align="center">总计</td>
<td colspan="1" align="center">160</td>
<td colspan="2" align="center">100%</td>
<td colspan="1" align="center"></td>
<td colspan="2" align="center"></td>
</tr>
</table></div>
<div class="footer">我是啦啦啦的尾部</div>
</div>
</body>
</html>
以上是一个比较简单代码,只分了几个框架,毕竟掌握的还不是很多,而且时间有限,没办法尝试那么多 。以后还要继续努力,争取做出更加丰富的网页,具有更多的功能。fighting!!!