实验六 使用CSS排版(考核实验).doc

实验6使用CSS排版一 实验目的1 掌握内部CSS样式和外部CSS样式文件。2 掌握应用CSS样式的方式。二 实验环境Editplus三 实验内容（考核实验）制作个人网页四 实验步骤1、 制作一个个人网页1) 制作如图所示页面效果。2) 使用的图像在photo目录下3) 要求对页面进行排版（固定宽度且居中的版式），如下图。排版思路：宽度固定而且居中的版式是网络中最常见的排版方式之一，首先将所有页面内容用一个大 包裹起来，指定该的ID为container，这个ID在整个页面中是唯一的。部分代码如下：bodymargin:0px; padding:0px;text-align:center;background:#e9fbff;解释：margin:0px;指定页面四周的空隙都为0.text-align:center;这是整个排版的关键语句，将页面中的所有元素都设置为居中。#containerposition: relative;margin: 0 auto;padding:0px;width:700px;text-align: left;background:url(container_bg.jpg) repeat-y;解释：position: relative;相对定位，设置块相对于原来的位置。由于已经设置了居中，因此这里不需要再调整，只是考虑到浏览器的兼容性，加上这句代码。margin: 0 auto; 非常关键的一句，它使得该块与页面的上下边界距离为0，左右则自动调整。这一句代码的完整写法为margin: 0 auto 0 auto;这里采用了简写。width:700px;设定固定宽度为700PXtext-align: left; 用来覆盖中设置的对齐方式，使得#container中的所有内容恢复左对齐。部分代码展示如下：个人主页!-body, htmlmargin:0px; padding:0px;text-align:center;background:#e9fbff;#containerposition: relative;margin: 0 auto;padding:0px;width:700px;text-align: left;background:url(container_bg.jpg) repeat-y;#bannermargin:0px; padding:0px;#linksfont-size:12px;margin:-18px 0px 0px 0px;padding:0px;position:relative;。（后面自己把内容添加完整） /*将所有页面内容用一个大 包裹起来，指定该的ID为container*/首页心情日记Free一起走到从明天起纸飞机下一站。（自己把内容添加完整）版权所有 2011.11.7 Next Station交谈中请勿轻信汇款、中奖信息、陌生电话，勿使用外挂软件。18:05:51您发送了一个窗口抖动。沈金花18:05:56介绍火车经过一个又一个站台，窗外漫卷的蒲公英向我微笑着。我逐渐记起了自己旅行的目的，一直都在下一站的前方。火车缓缓地驶入站台，汽笛声响的那一瞬间，车厢变得透明，我看见，自己和这长长的列车在一起，正在漫天飘舞着的蒲公英中飞行。转播设备我现在是在万泉河附近，我们的转播车就在旁边不远的地方，师傅马上将会把车开过来。我们的转播设备非常非常的先进，具体怎么先进我也说不清，师傅比我清楚，总之就是特别特别的先进。好，现在师傅已经来了。旅程夕阳染红蓝天带走美好的一天风吹过大地炫美的世界霞光点亮星辰燃起辽远的梦幻流星划过夜空忆起逝夜的歌声是谁昨夜背上行囊唱一首满载风尘的歌今夜才又想起