css盒子模型实验报告总结_css实验报告

实验题目使用

CCS

美化“北京奥运吉祥物——福娃”网站

一、

实验目的

用

CCS

美化网站，来控制网页样式。首先进行布局分析包括网页的头部，

网页主体等。然后是摸块布局设计，页面总体布局设计、链接页面的

CSS

的文

件、

要遵循设计页面的通用规则，

设计

#heard

对象部分由网页的

logo

部分和导

航区构成，在是设计

#content

对象部分，

content

分为三列，第一行由分为头

片新闻区，新闻区和公告栏，第二行分为福娃简介和福娃揭秘，第三行是精彩

图片区、名人说福娃和投票调查区。最终使

CSS

用美化网站

.

。通过本次实验能

熟练掌握

CSS

美化网站的基本技巧和技能，在以后的学习、工作生活中能够应

用，为我们工作带来，生活带来方便。

二、

实验内容

1

、页面总体布局设计，可以通过对选择“插入记录

布局对象

DIV

标

签”

命令的方法进行布局，

也可以通过在代码视图中直接编写源代码的方进行

布局，布局页面的

HTM

框架的代码。

2

、连接页面的

CSS

文件，先建一个名为

styie.css

的文件，然后打开

CSS

样式面板，单击附加样式表，连接超链接。

3

、

设计网页的通用规则。

通用规则对所有的标记都起作用，

绝大部分标

记都会涉及属性。打开

CSS

样式面板双击新建的那个文件，单击确定按钮，

，

用相同的方法设置

BODAY

的字体和方法。

4

、设计

#header

对象部分。包括

logo#logo

和导航

#nav.

网页

logo

部分

是一个中间栏固定，左右栏自适应的结构，并在

fianshlogo

中插入透明

fiansh

、

动画；

导航区域由

#NAV#navbgl

两个区组成，

使用

css

中超链接属性。

5

、设计

#content

对象部分，

#maincon

为中间列，宽度固定，左右两列

没有内容因此不需要考虑，而主体显示部分为三行，分别显示网页不同区域。

6

、设计

#footer

对象部分。

三、

实验情况和实验结果

1

页面总体布局

2

网页

logo

效果图