实习三 CSS盒子模型与网页布局

实习三 CSS盒子模型与网页布局
一、实习目的
1、深入理解CSS盒模型及其属性；
2、熟练掌握CSS的定位方法；
3、掌握IETest软件的使用方法。

二、实习内容
4、用CSS完成常见的几种网页布局形式的练习；
5、使用Div+CSS，完成“实习一”中“index.htm”页面的布局；
6、在多种浏览器上对网页测试。

7、实习题目
1. 利用“实习一”中的素材，通过用DIV+CSS的形式重新完成对index.htm网页
的布局。

2. 在所用计算机上安装“FireFox浏览器”和“Chrome谷歌浏览器”，并对所
作的网页进行测试。

3. 课后独立完成课本第6章所要求的网页。

（所需素材在202.117.179.110中提
供）
四、实习要求
8、根据指导书实例和操作步骤，独立完成实习内容。

9、记录实验中出现的问题，以用解决办法。

10、以上三个实验题目必须完成，要求提交源代码及相关素材。

以下是我的截图：
五、实验总结
这次的实验做的很不容易，第一次做实验三的时候我看实验题看了好长的时间，突然觉得好难啊，以前的实验总是按着实验指导的步骤一步一步的进行就行了，而且书上还有非常清晰的知识点，但是这次却是直接自己设置css 进行设计网页，当时对css 还不是很了解，所以感觉手足无措，最后设想着一个一个的盒子的布局和嵌套，觉得想的时候觉得很清晰，但是真正开始做的时候却不知道怎么做，当时试着做的时候一个一个盒子都是从上到下排列的，整个都变形了。

后来看有同学做出来了，有用浮动的内容，但是我对这部分内容完全不知道，后来老师上课的时候有讲这部分内容，这第二次再做的时候就觉得进行的顺利多了，但是在做的时候还是遇到了很多的问题。

首先就是，先设置的在一个大盒子里面设置两个盒子，分别装左边和右边的部分，但是在设置的时候不知道怎么回事，左边和右边中间老师空出来一大部分，当时觉得很奇怪，后来请教老师以后才知道原来是图片太小的缘故，在设置盒子
大小的时候要注意图片的整个宽度，这是我原来完全没有考虑到的，一开始我还一点一点地调试各个盒子的大小呢。

然后就是进行孙悟空图片和简介的设置，当时一直没有办法将这两部分的内容放到一行里面，我的设计是设计一个大盒子，然后里面装两个盒子，里面分别放置孙悟空图片和简介。

但是，无论我怎么设置盒子的大小，都没有办法使这两个小盒子并列在一排里面，请教了老师，原来是因为图片太大的缘故，我当时以为只要设置好盒子的大小就可以了，图片不会超过盒子的大小，谁知道很本不是这样子的，图片太大会把盒子撑开来，后来老师帮我把盒子的引用放到引用图片的里面，而不是外面，就解决了这个问题。

原来稍微变动一下位置就有这么大的不同。

实验的第一题做完以后我感觉对CSS的理解比以前深了好多，但是第三题真的是让我费了好大的心血。

做这道题几乎断断续续的花费了我好几天的时间，因为这道题需要用到好多书上的知识，而我对这部分知识的掌握又不太好，其实说实话，我看到书上有这个例子，所以就想说直接把书上的代码拼凑起来就行了吧，但是想了想还是觉得不好，我觉得书上写的很复杂，而且不连贯，跟我的思路不太一样，更关键的是，如果我按着书上的写，那其实还是相当于我什么都没有做，所以我就没看书，完全根据老师给的例子的样子按着自己的想法做的。

所以可能我做出来的网页的效果跟老师的不一样，而且有很多地方做的很不好。

在做的过程中我真的遇到了很多的问题，有的问题很快就解决了，但是有的却花了我好长时间才明白。

说实话，因为我做的时间很长，所以中间有的遇到的问题我都给忘记了，根据我能想到的，大概有一下几种。

11、刚开始做的时候有个很大的失误，就是没有进行整体的规划布局，这个失误到后面尤为突出，因为后面做的越多，好多盒子的大小的确定就越困难，在过程中，我经常遇见的问题就是一行装不下了，页面整个混乱了，这都是原来没有准确估计页面的分布的造成，这一点一定要牢记，以后不能这样子了。

12、就是关于超链接的问题，因为我设置的网页上有三个地方需要有超链接，也就是鼠标的移动对超链接地方的设置，其中两个地方是一样，但是另一个地方不一样，由于知识没有掌握好，我刚开始的时候对这点很纠结，因为我一设置就是对所有的都通用，这一点我一直都很不理解，我甚至准备好下次上课的时候问问老师，但是后来我翻书的时候突然明白了，可以使用后代选择器啊，幸好我看见了这部分的内容，当时真的是非常的激动。

13、关于网页右边的几个圆框的设置我也费了不少的时间，其中最另问我困惑的就是我已经设置好圆框，也设置字体是居中，但是当我设置完检查显示的时候却发现字体都有部分跑出去框框了，这点另我很纠结，所以在代码中我可能有的地方用了换行符来调整字体的位置。

14、最最难的地方就是关于上方那几个小标题的设置了，真的很难，我当时设置的时候想的使用两个背景图片，正常情况下显示的是蓝色的图片，当鼠标放上去的时候显示的是橙色的图片，我当时设置的时候还成功了，但是不知道为什么，当我把几个都加上小图标的时候就又不成功了，而且有个关键的就是橙色框框和蓝色框框的大小不一样，所以当时就想着要不用滑动技术，就是将一张图片先显示上面的部分，当鼠标放上时再显示下面的部分，但是在设置的时候我一直不成功，书上有这个例子，但是我没有完全明白，我照着第6章和第4章的例子各自试了试，都不行。

而且后来我才发现，这个图片太大了，根本没有办法在一
行上面设置4个小图标，我就想还是按刚开始的想法吧，所以就又试了试，我当时还是不成功，后来发现了，是因为我在引入背景图片的后面设置了不平铺，所以没有显示出来图标，这点我是真的不明白，不知道为什么。

后来设置成功以后我还专门各自设置了一下框框的大小，所以在鼠标放上之前和放上的时候会发现大小有变动。

15、还有就是左匡里面靠下的有三个图片并排放置的那一块，我没有那么大的空间放置，所以尤其是字体，我就缩小了很多，也导致了网页不太美观。

我这次做完以后要好好的看看书，将书上的这部分内容好好理解一下，我觉得这样比较好，因为有了做这些的例子，我就会更加明白将重点放在哪里，而且在也能更加容易的理解和记忆，也会对书上各部分的内容更加的感兴趣。