实验内容
2.0 制作一个简单的页面， 要求：
1)菜单始终在屏幕的上方(无论拖动);
2)网页的结构如附件所示。每个区块之间，需要有边距和空白。
3)在屏幕的右下方，固定一个“联系电话”的方框；不随滚动条而改变位置。
4)进行界面设计。要求有布局、色彩、字体等因素的考虑；
2.1 基于以前的实验所做的网页，重新分栏/分区块（如果之前未分栏，先分栏显示页面）。使得html内容不变，但不同的css所控制的版面布局不同。
实验过程
1、首先先实现附件图片中的简单页面，在<body>标签中首先写好分栏分局的<div>，分别为网页主体wrap、导航nav、内容main、内容1content1、内容2content2、页脚footer、联系方式positioned。
2、接着我们在这些div标签下给各个部分添加一些内容，导航栏nav内容如下：
在main下的content1中为了添加图片和新闻列表，这里多加三个div标签：title、pic_news、news_list,同时加一个span标签date。具体内容如下：
同理content2下的内容和content1类似：
在页尾footer中添加“厦门大学”四个字：
在悬浮的联系方式positioned中，加入一些联系方式：
3、在填充所有内容以后，开始在css表中对其进行布局排版，首先对整个body的颜色设置#f5f5f5，对wrap设置宽度以及margin使其居中：
4、接着开始实现导航栏nav始终在屏幕的上方的功能，利用position的fixed属性使其固定在网页的某个位置，并调整其top、left等位置：
接下来设置导航栏的样式，包括li、a以及他们的状态：
保存并在浏览器中看一下效果：
5、然后我们对整个内容区域main先设置整体距顶部的间距margin-top为80px；以及高度height设置为800px；背景颜色background-color改为#FFF；然后我们对content1和content2设置宽高以及float设置为left,使其能够并列显示。
6、接下来我们设置一些content1里面的title、pic_news、news_list、date进行样式设计：
再同样对content2里的内容进行样式设计：
保存并在浏览器中看一下效果：
7、然后我们做一下页脚，对footer以及foo设置宽高以及文字居中，并设置float为left：
保存并在浏览器中看一下效果：
8、最后我们把悬浮的联系方式positioned同样使用position:fixed使其能够悬浮固定在页面的右下角：
接着对联系方式里面的内容connecttitle、connect设置样式：
保存并在浏览器中看一下效果：
9、看一下整体效果，观察在滚动状态下菜单栏和联系方式的状态，确定固定没有问题后实验2.0任务实现：
10、然后我们先来看一下实验2.1中原来的网页是什么样的布局：
很明显我原来的布局是上面分三个区块横向布局，下面是竖向排版，分析一下上面的布局，我觉得上面的三个区块横向分布有些拥挤，所以最好将最左边的区块做成悬浮，然后将原本在中间的区块移到右边，以免整个页面的重心过于左边，下面的竖向的布局暂时不变：
11、首先，由于我原来的界面在布局的时候使用了标签table，所以这次为了方便布局，我把整个table结构都改成了以div标签定义的布局（花了我好长时间）
改之前：
改之后：
12、改完以后我们就可以对原css表进行重新布局，首先找到内容区左边对应的box_left，其原代码如下：
.box_left{
width:20%;
margin-top:30px;
padding:0;
background:#EDEDED;
float:left;
}
接下来，我们要使其悬浮固定在页面的左侧，所以使用position:fixed来固定，同时设置固定的top、left的位置，并设置边框border:
.box_left{
width:15%;
margin-top:30px;
padding:0;
background:#EDEDED;
position:fixed;
top: 120px;
left: 0px;
border:2px solid #ccc;
}
13、这样之后存在一个问题就是，原本设置悬浮float在left的box_left现在已经不占地方，因此原本在中间区块和右侧区块都会左移，这样固定在左侧的box_left就会遮挡住我们想要看到的部分，为解决这个问题，我们接下来需要对中间区块box_middle和box_right设置float:right，同时又能实现我们想要的中间和右边的区块交换显示：
原box_middle和box_right:
.box_middle{
float:left;
margin-top:30px;
margin-left:30px;
}
.box_right{
float:left;
width:27%;
margin-left:30px;
}
现在我们把他们改成右浮动并且设置合适间距：
.box_middle{
float:right;
margin-top:30px;
margin-right:120px;
margin-left:40px;
}
.box_right{
float:right;
width:27%;
margin-left:30px;
}
然后我们保存一下css表并观察一下效果：
这时候我们就能看到在滚动页面的时候原本固定的左侧的导航栏现在可以实现悬浮固定，而原来在中间的内容也交换到了右边，整个页面变得不那么拥挤。
实验心得
1、页面布局的时候尽量少使用table标签！原先做的网页因为整个网页的框架都在table中构建，所以后续很难优化排版，而且在使用的过程中也存在很多不便，所以这次花了很长时间改成div标签，但是改完以后在换布局的时候就很方便，所以以后尽量使用css排版布局设置样式。
2、学习了最基础的页面布局，同时也学会了如何让区块不随着滚动下拉而改变位置，在实验2.0中学会后也立即试验在实验2.1中，感觉对页面的布局有很大帮助。
3、在页面的局部方面还存在很大问题，原本的网页过于简单，后面需要多学习一些javascript应用在网页中实现更多动态的东西。
