实验目的掌握内部CSS样式和外部CSS样式文件。掌握应用CSS样式的方式。实验环境Editplus实验内容(考核实验)制作个人网页实验步骤制作一个个人网页制作如图所示页面效果。使用的图像在photo目录下要求对页面进行排版(固定宽度且居中的版式),如下图。排版思路:宽度固定而且居中的版式是网络中最常见的排版方式之一,首先将所有页面内容用一个大<div>包裹起来,指定该<div>的ID为container,这个ID在整个页面中是唯一的。部分代码如下:body{ margin:0px;padding:0px; text-align:center; background:#e9fbff;}解释:margin:0px;-align:center;这是整个排版的关键语句,将页面<body>中的所有元素都设置为居中。#container{ position:relative; margin:0auto; padding:0px; width:700px; text-align:left; background:url()repeat-y;}解释: position:relative;相对定位,设置块相对于原来的位置。由于<body>已经设置了居中,因此这里不需要再调整,只是考虑到浏览器的兼容性,加上这句代码。margin:0auto;非常关键的一句,它使得该块与页面的上下边界距离为0,左右则自动调整。这一句代码的完整写法为 margin:0auto0auto;这里采用了简写。width:700px;设定固定宽度为700PXtext-align:left;用来覆盖<body>中设置的对齐方式,使得#container中的所有内容恢复左对齐。部分代码展示如下:<head><title>个人主页</title><style><!--body,html{ margin:0px; padding:0px; text-align:center; background:#e9fbff;}#container{ position:relative; margin:0auto; padding:0px; width:700px; text-align:left; background:url()repeat-y;}#banner{ margin:0px;padding:0px;}#links{ font-size:12px; margin:-18px0px0px0px; padding:0px; position:relative;。。。。。。。(后面自己把内容添加完整)</style></head><body><divid="container">/*将所有页面内容用一个大<div>包裹起来,指定该<div>的ID为container*/ <divid="banner"> <imgsrc=""border="0"> </div> <divid="links"> <ul> <li>首页</li> <li>心情日记</li> <li>Free</li> <li>一起走到</li> <li>从明天起</li> <li>纸飞机</li> <li>下一站</li> </
实验六 使用CSS排版(考核实验) 来自淘豆网m.daumloan.com转载请标明出处.
