HTML&CSS实验(7)

【实验目的】

  学习一个通用的布局设计。

【实验工具】

  浏览器和编辑器。三种可选编辑方式：
  可以采用Visual Studio、Dreamweaver等具有网页编辑功能的软件打开并编辑页面，或者直接在Eclipse或netbeans下编辑运行。
  也可以使用在线调试：http://172.18.187.11:8080/lab/html7/

【实验内容】

1、阅读给定的框架(sysu.html)。
  1)整个框架分为：header、nav、subnav、mainbody、footer五个部分(div)。
  2)除了main，每个区都定义了高度和宽度，并且宽度均为“998px”，并用样式”margin:0 auto”对中。整个网页定义了背景色”#005825”。
  3)为了以后可以定位内部的logo等元素，header采用“position:relative”，其它4个区均属于正常流。
  4)main的背景色为白色”#FFFFFF”，没有定义宽度，让它扩展到整个网页宽，并且包含三个部分：mainbody，quicklinks，sublinks。它的高度是由这三部分的高度决定的。这三个部分的宽度均为“998px”， 用样式”margin:0 auto”对中。

  以下步骤逐步加入各个部分的html和style，visual studio、netbeans和eclipse的菜单中都有自动格式化操作，做完每步都可以格式化html。

   2、加入header.css(增加语句<link rel="stylesheet" href="css/header.css">)和header.html(拷贝粘贴)到sysu.html中。
   完成后截图：

   问题1：header分为三个区(div)：logo, version, searchbox, 采用什么样式令它们放置在同一行？
   答：通过position: absolute;将logo, version, searchbox放置在同一行（abosolute为绝对定位，可以相对于非static的最靠近的祖先元素进行定位 ）

   问题2： search按钮如何与search输入框垂直对中的？
   答：通过vertical-align: middle;实现search按钮与search输入框的垂直对中。

  3、加入nav.css和nav.html（菜单栏）。
   完成后截图：

   问题1：nav中的菜单项为什么可以排在一行？
   答：内联元素（例如span、a）在没有任何布局属性作用时，默认排列方式是在同行排列，直到宽度超出包含它的容器宽度时才自动换行。

   问题2：菜单项之间的竖线是怎么实现的？
   答：通过background: url(../images/nav-spe.jpg) no-repeat left;来实现菜单项之间的竖线的。

  4、加入subnav.css和subnav.html(子菜单栏)。*子菜单是通过javascript显示出来的（已经加入到网页中了）。
   把/test/下的div{}删除，并在body中加入背景图bodybg.jpg，得到中大主页的菜单样子（www.sysu.edu.cn）。
   完成后截图：

   问题1：子菜单栏的竖线是怎么实现的？
   答：在subnav.html中手动加入的“|”。

  5、main的mainbody由indexline区和cols区组成。indexline区存放宣传画，cols区存放内容。 indexline包含box区和content_main区。每个区包含一幅图（原来每个区包含多副图，做成自动播放模式）。
  这一步加入indexline.css和 indexline.html。
  完成后截图：

  问题1：box区和content_main区为什么可以排在同一行？
  答：将他们设为了浮动元素，其中box使用了float:right,content_main使用了float:left。

  6、cols又分为两列colsleft和cols02。colsleft又分为四个区：两个类名为cols01的区，一个隔离区（clear），一个公告（gonggao）区。第一个cols01区有两个栏目，第二个cols01区有三个栏目。
   这一步加入colsleft.css和colsleft.html。
   完成后截图：

  问题1：两个类名为cols01为什么可以排在同一行？它们为什么可以垂直对齐？
  答：2个cols01的类都设置了float:left的属性。

  问题2：clear区的作用是什么？还有替代方法吗？
   答：图像的左侧和右侧均不允许出现浮动元素：可以在需要清除浮动的元素中定义CSS属性：overflow:auto；来替代。

   问题3：colsleft栏目的标题中的间隔线和标题下面的点线是怎么加入的？
   答：通过background: url(../images/title-spe.jpg) right no-repeat;标题中的间隔线；通过background: url(../images/dot.png) no-repeat left;来实现标题下面的点线。

   问题4：cols01中的栏目采用了浮动方法吗？
   答：采用了float: left;

  问题5：每个栏目边框下面的阴影是怎么加入的？
   答：通过在 .channel_shadow中加入如下样式实现：background: url(../images/bo-shadow.jpg) no-repeat bottom center;

   问题6：为什么中大校报一栏的图像url没有出现在colsleft.html中？
   答：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）,src属性的值是规定在 iframe 中显示的文档的 URL。

  7、加入cols02.css和cols02.html。
   完成后截屏：

   问题1：cols02为什么可以和colsleft排在一行？
   答：因为cols02和colsleft都设置了float:left的属性。

   8、加入quicklinks.html和quicklinks.css。
   完成后截图：

  9、加入sublinks.html和sublinks.css。
   完成后截图：

  10、加入footer.html和footer.css。
   完成后截图：

   问题1：footer中三块为什么可以排在一行？它们之间的间隔线是怎么做到的？
   答：footer中三块可以排在一行是因为3个buttom的元素都设置float:left的属性； 他们之间的间隔线是通过给左边2个元素设置样式： border-right: #FFFFFFF1px solid;来实现的。

   问题2：footer中的背景颜色是在哪里设置的？
   答：footer继承自body，body的背景颜色设置是绿色的，footer中没有设置背景颜色，所以也是绿色的。

【完成情况】

  是否完成了这些步骤？(√完成 ×未做或未完成)
  1 [√] 2 [√] 3[√] 4 [√] 5[√] 6 [√] 7[√] 8[√] 9[√] 10[√]

【实验体会】

  （1）在给body中加入背景图bodybg.jpg时，通过在body中添加样式background-image: url(“images/bodybg.jpg”);来实现，但是发现footer处也加入了这个背景图。试了一下把footer的背景色强行设为绿色，然后宽度设为100%，但这样的话footer的内容会左移；最后发现在body那里再加上 background-repeat :repeat-x ;就可以了,即：

background-image: url("images/bodybg.jpg");background-repeat :repeat-x ;

  （2）通过这次实验，我知道了整个网页是如何做出来的，在进行网页设计时，可以分为好多个文件，然后再通过头文件来调用，这样做的好处是：整个结构清楚明了，易于修改和维护，避免了在将近千行的代码中做修改的尴尬。