这个练习主要是是练习最近几天学到的知识，没有很好的设计布局都是自己随意组合的。很多知识未熟练的运用，并且没有熟记标签，所以对网页的修饰效果并不好。以后要用用不熟的标签和提高自己的设计思维。
html文件（test8.html）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>作者：一叶扁舟</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./test8.css">
<style type="text/css">
.mid_link {
list-style-type: none;
}
.mid_link li {
float: left;
margin-left: 50px;
margin-top: 18px;
}
.bottom_style7 {
margin-top: 8px;
margin-left: 4px;
width: 300px;
height: 450px;
float: left;
border: 2px solid green;
background-color: silver;
}
a:alink {
text-decoration: none;
}
.bottom_style8 {
width: 220px;
height: 450px;
margin-top: 8px;
margin-left: 4px;
border: 2px solid red;
float: left;
background-color: #8080FF;
}
</style>
</head>
<body>
<!--
顶层状态栏布局
-->
<div class="top_style1">
<div class="top_style2" style="float: left; display: inline;">
邮箱:
<input type="text" value="账号"></input>
<input type="password" />
<input type="button" value="登陆" style="background-color: red;" />
<input type="button" value="注册" />
</div>
<div class="top_style3">
<b>设置为主页</b>
</div>
<div>
<a href="http://www.fjnu.edu.cn/">转到学校的主页</a>
</div>
</div>
<!--
中间部分布局
-->
<div class="mid_style4">
<div class="mid_style5">
<img style="width: 200px; height: 100%;"
src="http://www.fjnu.edu.cn/page/main250/images/main3.jpg" />
</div>
<div class="mid_style6"
style="width: 580px; height: 100%; border: 2px solid blue; margin-left: 8px;">
<ul class="mid_link">
<li>
<a href="http://www.baidu.com">百 度</a>
</li>
<li>
<a href="http://www.sina.com.cn/">新 浪</a>
</li>
<li>
<a href="http://www.163.com/">网 易</a>
</li>
<li>
<a href="http://www.sohu.com/">搜 狐</a>
</li>
<li>
<a href="http://www.qq.com/">腾 讯</a>
</li>
</ul>
</div>
</div>
<!--
下面的布局
-->
<span
style="margin-top: 8px; float: left; width: 260px; border: 2px solid green; height: 450px;">
<h2>
学校简介：
</h2> <a style="weight: 5px;" herf="http://www.fjnu.edu.cn/"><b>福建师范大学</b>
</a>（Fujian Normal University），
简称“福师大”，坐落于中国东南名城、福建省省会——福州市，是福建省人民政府与教育部共建高校，
是中国建校最早的师范大学之一，是福建省本科一批招生高校 ，是全国博士学位授予单位和全国首批硕士学位授予单位
，是福建省重点建设三所高水平大学之一 。在中国校友会网《2014中国大学评价研究报告》中，福建师范大学综合排名全国第93位， 福建第三位
。在《武书连2014中国734所大学排行榜》中，福建师范大学综合排名全国第97位，福建第三位 。 </span>
<span class="bottom_style7">
<h3>
新闻
</h3> </span>
<span class="bottom_style8">
<h3>
广告
</h3> </span>
</body>
</html>
css文件（test8.css）:
body {
margin: 0px auto;
width: 800px;
height: 1000px;
border: 1px solid green;
}
.top_style1 {
width: 100%;
height: 24px;
background-color: pink;
}
.top_style2 {
height: 100%;
margin-left: 8px;
}
.top_style3 {
margin-left: 15px;
height: 100%;
float: left;
margin-right: 15px;
}
.mid_style4 {
margin-top: 10px;
width: 100%;
float: left;
height: 300px;
margin-left: 4px;
}
.mid_style5 {
width: 200px;
height: 100%;
float: left;
background-color: #8000FF;
border: 2px solid gray;
}
div.mid_style6 {
background-color: green; border : 2px solid yellow;
width: 590px;
float: left;
heigth: 300px;
border: 2px solid yellow;
}
效果图：
原文地址：http://blog.csdn.net/u011662320/article/details/37891301
