下载此文档

WEB第十四周实验报告(使用CSS排版).doc

文档分类：IT计算机 | 页数：约10页举报非法文档有奖

1/10

下载提示

1.该资料是网友上传的，本站提供全文预览，预览什么样，下载就什么样。
2.下载该文档所得收入归上传者、原创者。
3.下载的文档，不会出现我们的网址水印。

同意并开始全文预览

(约 1-6 秒)

1/10 下载此文档

文档列表 文档介绍

软件工程系实验报告封面

课程名称: WEB编程
课程代码: SS2026
实验指导老师: 凌以珂
实验报告名称: 使用CSS排版
本实验报告包括以下几个内容: 一、实验(实践)目的
二、实验(实践)环境
三、实验(实践)实现过程
四、实验(实践)分析与总结
五、指导教师评语与评分
学生姓名:
学号:
教学班:
递交日期: 2012/12/6
我申明,本报告内的实验已按要求完成,报告完全是由我个人完成,并没有抄袭行为。我已经保留了这份实验报告的副本。

申明人(签名):邓家海
实验题目
实验6使用CSS排版
实验地点及组别
S306
实验时间
2012/12/6
一、实验目的和要求
1、目的
掌握内部CSS样式和外部CSS样式文件。
掌握应用CSS样式的方式。
2、要求
掌握内部CSS样式和外部CSS样式文件。
掌握应用CSS样式的方式。
二、实验环境(本实验的硬件和软件环境及使用仪器等)
Editplus
三、实验实现过程
宽度固定而且居中的版式是网络中最常见的排版方式之一,首先将所有页面内容用一个大<div> 包裹起来,指定该<div>的ID为container,这个ID在整个页面中是唯一的。
部分代码如下:
body{
margin:0px;
padding:0px;
text-align:center;
background:#e9fbff;
}
解释:
margin:0px;指定页面四周的空隙都为0.
text-align:center;这是整个排版的关键语句,将页面<body>中的所有元素都设置为居中。
#container{
position: relative;
margin: 0 auto;
padding:0px;
width:700px;
text-align: left;
background:url() repeat-y;
}
解释:
position: relative;相对定位,设置块相对于原来的位置。由于<body>已经设置了居中,因此这里不需要再调整,只是考虑到浏览器的兼容性,加上这句代码。
margin: 0 auto; 非常关键的一句,它使得该块与页面的上下边界距离为0,左右则自动调整。这一句代码的完整写法为 margin: 0 auto 0 auto;这里采用了简写。
width:700px;设定固定宽度为700PX
text-align: left; 用来覆盖<body>中设置的对齐方式,使得#container中的所有内容恢复左对齐。
部分代码展示如下:
<head>
<title>个人主页</title>
<style>
<!--
body, html{
margin:0px;
padding:0px;
text-align:center;
background:#e9fbff;
}
#container{
position: relative;
margin: 0 auto;
padding:0px;
width:700px;
text-align: l

WEB第十四周实验报告(使用CSS排版) 来自淘豆网www.taodocs.com转载请标明出处.

WEB第十四周实验报告(使用CSS排版).doc

第十一课 CSS排版

第十一课 CSS排版

第十四周段落格式排版

第十一课 CSS排版

第十四周段落格式排版

第十四周段落格式排版

第十四周段落格式排版

WEB第十四周实验报告(使用CSS排版)

第十四周段落格式排版

第十一课 CSS排版