网页设计实验报告3.docxVIP

《网页设计》实验报告 实验序号： 3 实验项目名称：使用盒、 div 、span 等样式化 lounge 休闲吧，并 使用 float 进行布局和排版 学 号 姓 名 专业、班 实验地点 指导教师 实验时间 一、实验目的及要求 目的：深入理解盒模式，掌握 div 、span 的使用，熟练运用 float 进行布局排 版。 要求：将“ lounge 休闲吧”这个网页进行盒的样式化，并进行分栏布局排版。 二、实验设备（环境）及要求 文本编辑器编写 三、实验内容与步骤 1、在纸上构造网站大概模块和点出需要突出的主题。 、把标题做成浅绿色，跟站点的主题颜色相匹配。字体改成具有可读性的 sans-serf 。 3、将饮料做成专栏模块，并用 float 将模块向右漂移。 4、将音乐 CD和艺术家样式化。 5、将页脚居中，并用小字体显示。 6、样式化链接。 7、修饰网站，将主题突出。应用边框补白颜色和颜色等将网站样式化，美观网 站，给读者视觉上的舒适感受。 四、实验结果与数据处理 （图在下方） 1、用 h1、h2 样式化标题，使其变突出了，给人开门见山之感。用 line-height 增加文本的行间距，美化页面 2、样式化了文本，使其变得醒目，整个页面也增色不少。字体是 serif ，跟住 文本不同。 3、用 div 元素和 id 标记了饮料模块。通过 CSS用 float 将其漂移到网页右侧， 重新样式化了模块，让人禁不住想喝一杯。 4、用 span和 id 标记链接。通过 CSS样式化了链接。使链接在不同的状态显 示出不同的颜色，整个网页更加美观饱和。 5、改变边框模式、补白和修改边界的值，设置背景，美化网站， （Border 、padding 、margin ）。 6、用  id  标志页脚，设置页脚的属性，  text-align: center;  position:fixed; padding:15px; margin:10px;font-size:90%;  使其居中且始终在网站最下面显 示。 五、分析与讨论 自学过程的体会，以及自学过程中碰到的问题。 六、教师评语  成绩 签名： 日期：