今天分享一段代码，效果如附图，
代码如下：
<!DOCTYPE >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<title>高度自适应的三行三列宽度固定布局</title>
</head>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
font-size:14px;
}
body{
font-family:"楷体";
font-size:37px;
background:#FFCCFF;
text-align:center;
}/*设置页面所有参数*/
.bigbox{
margin:0 auto;
}/*设置最大盒子的参数，居中*/
.top{
background-color:#6633FF;
margin-bottom:10px;
text-align:center;
}/*设置头部信息*/
.center{
margin-bottom:10px;
}
.box1{
width:200px;
background-color:#90DB98;
float:left;
}
.box2{
height:600px;
float:left;
margin:0 5px;
}
.box3{
width:200px;
background-color:#00FFCC;
float:right;
}
.footer{
background-color:#ccc;
clear:both;
text-align:center;
}
.guanggao{
margin-left:1100px;
margin-top:350px;
width:250px;
height:200px;
position:fixed;
float:right;
background-color:#0000FF;
}
a{color:#333;text-decoration:none; padding:10px 30px 10px 30px ;
background-color:#ccc;}
ul{list-style:none; height:70px; border-bottom:5px solid #F60;
padding-left:30px;}
ul li{float:left; margin-top:20px;}
a.on, a:hover{ color:#fff;background-color:#F60;padding:10px 45px
10px 45px;}
ol{ list-style:none; width:100px}
ol a{color:#333;text-decoration:none}
.nav li a{
display:block;
text-indent:20px;
height:30px; line-height:30px; width:100px; background-
color:#efefef; margin-bottom:1px;}
.nav li a:hover{ background-color:#F60; color:#fff;}
-->
</style>
<body>
<div class="bigbox">
<div class="top">
<ul class="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">成绩查询</a></li>
<li><a href="#">资料查找</a></li>
<li><a href="#">教师在线</a></li>
<li><a href="#">交流论坛</a></li>
<form action="" method="post" >
<input type="text" value="" name="sousuo" />搜
索 </form>
</ul>
</div>
<div class="guanggao">
<h1>盗墓笔记周边抱枕</h1>
<p >发布时间：2015年10月29日</p>
<p >售价：370元</p>
<p >图片仅供参考，如有需要，可来图定制哦</p>
<p ><img src="370.jpg" title="张起灵" width="100px"
height="90px"></p>
<p > 用我一生换你十年天真无邪。</p>
</div>
<div class="center">
<div class="box1">
<form name="forml" method="post" action="注册页面.html">
<h1 class="">登录页面</h1>
账户:<input name="username" type="text" size="15" placeholder="您的
账户"><br>
<br>
密码:<input name="password" type="text" size="15" placeholder="您的
密码"><br><br>
<input type="submit" name="submit" value="提交">/*这里可以跳转到注册页面，注册页面代码在下方*/
<input type="reset" name="submit2" value="重置">
<br><br>
</form>
<p>幾米，一位用画笔描绘梦想、吸引无数读者画迷为之疯狂，
知名度迅速窜升的当红绘本作家，同时却也是一个腼腆善良的中年男子，偏好
简单的居家生活，低调而淡泊。幾米的个性害羞内向，不擅长用言语表达，他
用敏锐细腻的心去感受周遭的人与事，将情感、思绪藉由「绘画」传达他对大
千世界的看法，作品风貌多变，创作力源源不绝，因此看幾米的作品，就像是
走入他的内在，幾米的故事引领着每一位欣赏他作品的人看到并相信世界上的
美与善，同时也反应了现代人生活中的点点滴滴，因此每个人都能在他的故事
找到一个映照和寄托，或许这就是幾米作品的迷人之处。>幾米，绘本作家，
文化大学美术系毕业，曾在广告公司工作十二年，后来为报纸、杂志等各种出
版品画插画 。1998年开始创作，发表《森林里的秘密》和《微笑的鱼》，拿
下当年度中国时报开卷最佳童书、
民生报好书大家读年度最佳童书，以及联合报读书人最佳童书
奖。 1999年出版《向左走．向右走》，开创出成人绘本的新型式，兴起一股
绘本创作风潮。本书获选为1999年金石堂十大最具影响力的书，并已改
编成电影、电视剧。之后陆续推出《听幾米唱歌》、《月亮忘
记了》、《森林唱游》、《我的心中每天开出一朵花》等作品，展现惊人的创
作力和多变的叙事风格。
</p>
<P> 民生报好书大家读年度最佳童书，以及联合报读书人最佳
童书奖。 1999年出版《向左走．向右走》，开创出成人绘本的新型式，兴起
一股绘本创作风潮。本书获选为1999年金石堂十大最具影响力的书，并已改
编成电影、电视剧。之后陆续推出《听幾米唱歌》、《月亮忘
记了》、《森林唱游》、《我的心中每天开出一朵花》等作品，展现惊人的创
作力和多变的叙事风格。</P>
</div>
<div class="box2">
<table border="1" align="center">
<tr>
<td rowspan="3">课程性质</td>
<td rowspan="3">序号</td>
<td rowspan="3">课程代码</td>
<td rowspan="3">课程名称</td>
<td rowspan="3">课程名称（英文）</td>
<td rowspan="3">学分</td>
<td colspan="4">教学学时</td>
<td rowspan="3">开通学期</td>
</tr>
<tr><td colspan="2">理论</td>
<td rowspan="2">实践</td>
<td rowspan="2">实践（周）</td>
</tr>
<tr>
<td >课内</td>
<td>课外</td>
</tr>
<tr>
<td rowspan="13">I类通识课程</td>
<td>1</td>
<td>T5130F1001</td>
<td>大学英语（1）</td>
<td>College English(1)</td>
<td>3</td>
<td>48</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>T5130F2001</td>
<td>大学英语(2)</td>
<td>College English(2)</td>
<td>3</td>
<td>48</td>
<td></td>
<td></td>
<td></td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>T5130F3001</td>
<td>大学英语(3)</td>
<td>College English(3)</td>
<td>3</td>
<td>48</td>
<td></td>
<td></td>
<td></td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>T8020F4001</td>
<td>专业英语</td>
<td>Speciality English</td>
<td>2</td>
<td>32</td>
<td></td>
<td></td>
<td></td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>T8020C0001</td>
<td>计算机与软件工程概论</td>
<td>An Introduction to Computer and SE</td>
<td>2</td>
<td>32</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>6</td>
<td>T802SC0001</td>
<td>计算机应用实训</td>
<td>Computer Application Practice</td>
<td>0.5</td>
<td></td>
<td></td>
<td>16</td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>7</td>
<td>T6210J1001</td>
<td>体育（1）</td>
<td>Physical Education(1)</td>
<td>1</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>8</td>
<td>T6210J2001</td>
<td>体育（2）</td>
<td>Physical Education(2)</td>
<td>1</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td>2</td>
</tr>
<tr>
<td>9</td>
<td>T6210J3001</td>
<td>体育（3）</td>
<td>Physical Education(3)</td>
<td>1</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td>3</td>
</tr>
<tr>
<td>10</td>
<td>T6210J4001</td>
<td>体育（4）</td>
<td>Physical Education(4)</td>
<td>1</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td>4</td>
</tr>
<tr>
<td>11</td>
<td>T6230J0001</td>
<td>军事理论</td>
<td>Military Theory and Training</td>
<td>1.5</td>
<td>24</td>
<td>8</td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>12</td>
<td>T623KJ0001</td>
<td>军事技能训练</td>
<td>Military skills training</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>13</td>
<td>T7210P0001</td>
<td>中国近现代史纲要</td>
<td>Outline of Contemporary Chinese History</td>
<td>2</td>
<td>32</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
</table>
<p><img src="logo.jpg" title="logo" width="900" height="300"/></p>
<table width="900" height="30" 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>
<a href="#"><img
src="http://img.mukewang.com/536c9dc30001135400800080.jpg" /></a>
<a href="#"><img
src="http://img.mukewang.com/536c9de300012a0500800080.jpg".
width="80" height="80" /></a> <a href="#"><img
src="http://img.mukewang.com/536c9dfe0001b81b00800080.jpg"
width="80" height="80" /></a> <a href="#"><img
src="http://img.mukewang.com/536c9fa00001f6dd00800080.jpg"
width="80" height="80" /></a> <a href="#"><img
src="http://img.mukewang.com/536c9fad0001f29800800080.jpg"
width="80" height="80" /></a> <a href="#"><img
src="http://img.mukewang.com/536c9fb90001d71b00800080.jpg"
width="80" height="80" /></a>
</div>
<div class="box3">
<ol class="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">成绩查询</a></li>
<li><a href="#">资料查找</a></li>
<li><a href="#">教师在线</a></li>
<li><a href="#">交流论坛</a></li>
<li><a href="#">个人信息</a></li>
<li><a href="#">作业进度</a></li>
<li><a href="#">资料查找</a></li>
<li><a href="#">教务在线</a></li>
<li><a href="#">大神来战</a></li>
</ol>
</div>
</div>
<div class="footer">jx370出版，盗版必究</div>
</div>
</body>
</html>
注册页面代码：
<!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">
<!--
body{font-family:"新宋体";background-color:#ff99cc;padding-top:40px}
table,tr,td{;font-family:"楷体";font-size:25px;padding-left:100px;}
h1{text-align:center;font-size:37px;color="#9900ff";}
-->
</style>
<body>
<form name="forml" method="post" action="">
<table width="700" align="center" cellpadding="20" >
<h1>注册表</h1>
<tr><td>姓名:<input name="username" type="text" size="20" placeholder="您的姓名"></td></tr>
<tr><td>年龄:<input name="age" type="text" size="20" placeholder="您的年龄"></td></tr>
<tr><td>性别:<input name="sex" type="radio" value="男" checked>男
<input name="sex" type="radio" value="女">女</td></tr>
<tr><td>生日:<input name="birthday" type="date" value="" placeholder="您的生日"></td></tr>
<tr><td>职业:<select name="work"size="" >
<option value="教师" selected>教师</option>
<option value="医生">医生</option>
<option value="律师">律师</option>
<option value="演员">演员</option>
<option value="厨师">厨师</option>
</select></td></tr>
<tr><td>工作年限:<input name="workingyear" type="range" min="1" step="1" max="20" value="3"></td></tr>
<tr><td>爱好:<input name="like" type="checkbox" value="音乐">音乐
<input name="like" type="checkbox" value="运动">运动
<input name="like" type="checkbox" value="阅读">阅读
<input name="like" type="checkbox" value="跳舞">跳舞
</td></tr>
<tr><td>电子邮箱:<input name="eamil" type="email" placeholder="您的电子邮箱"></td></tr>
<tr><td>备注:<textarea name="textarea" cols="40" rows="6"></textarea></td></tr>
<tr><td>
<input type="submit" name="submit" value="提交">
<input type="reset" name="submit2" value="重置"></td></tr>
</table>
</form>
</body>
</html>
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
