3、制作页面结构

使用background-image背景属性插入图片。使用

、

标记与

标

记分别设置标题与段落文本。用了

标签设置了一个盒子。用了标

签加粗字体。还用了标签,整体控制小盒子。

4、定义CSS样式

在css样式表中应用了width与height设置了盒子的大小,用了margin

与padding设置了外边距与内边距。在css样式表中还对标签中的设置了

大小、字体、颜色以及背景。

五、实验代码及网页效果图

1.搭建基本结构

关键代码如下:

正在播放《不完美小孩-TFBOYS》

不完美小孩
演唱:TFBOYS
千:
当我的笑灿烂像阳光

web前端开发技术实验报告 实验三

/>当我的梦做得更漂亮
全世界在为我鼓掌
只有您担心我受

伤
源:
全世界在等我飞更高

您却在心疼我小小翅膀
为我撑起沿途熟悉的地方

凯:
当我必须像个完美的小孩
满足所有的期待

您却好像格外欣赏
我犯错犯傻的模样
合:
我不完美

的梦
您陪着我想

不完美小孩

横划可切换

效果如图3-1所示。

图3-1 效果图

web前端开发技术实验报告 实验三

2.定义CSS样式

关键代码如下:

效果如图3-2所示。

web前端开发技术实验报告 实验三

图3-2 效果图

六、实验总结

1.学会了如何运用

标签定义盒子,并在css样式表中使用

width,height,border等属性来设置盒子的大小、样式以及填充背景。并用

margin与padding设置内外边距。

2.在标签中编辑正文与标题,应用

,

与

标签来分别设置

标题,正文与段落。

3、在标签中应用了标签,知道了“display:inline-block”

就是将标记转换为行内块元素,然后对其应用的宽度、高度及边框设置。

2024年6月14日发(作者：终清奇)

web前端开发技术实验报告 实验三

长 春 大 学

20 15 — 2016学年第 二 学期

Web前端开发技术

课程

实 验 报 告

学 院: 计算机科学技术

专 业: 软件工程

班 级: 软件15402

学 号: 041440210

姓 名: 王 悦

任课教师: 车 娜

实验三 CSS网页布局

一、实验目的

1、掌握CSS盒子模型的概念,能够灵活运用盒子模型布局页面;

2、掌握盒子模型相关属性,能够使用它们熟练地控制网页元素;

3、理解块元素与行内元素的区别,能够对它们进行转换。

二、内容及要求

运用盒子模型的相关属性实现网页弹出框效果,满足如下要求:

1、网页弹出框由上面的标题与下面的宣传内容两部分组成;

2、标题通过h2定义;

3、在段落文本中内容部分由h3与p标记进行定义;

4、应用

标记、标记、边框属性、背景属性等设计页面结构效

果。

三、实验原理

盒子模型:把HTML页面中的元素瞧作就是一个矩形的盒子,也就就是一个

盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)

web前端开发技术实验报告 实验三

与外边距(margin)组成。

标记:就是一个区块容器标记,可以将网页分割为独立的、不同的部分,

以实现网页的规划与布局。

边框属性:使用border-style、border-width、border-color等属性可以

实现丰富的边框效果。

padding属性:设置内边距,即元素内容与边框之间的距离,也常常称为内

填充。

margin属性:设置外边距,即元素边框与相邻元素之间的距离。

background-color:设置网页元素的背景颜色,默认值为transparent,

即背景透明,这时子元素会显示其父元素的背景。

background-image属性:将图像作为网页元素的背景。

标记:行内元素。与之间只能包含文本与各种行内标

记,如加粗标记、倾斜标记等,中还可以嵌套多层。

四、实验步骤

1、结构分析

宣传页面包含图片、标题及段落等。

2、样式分析

宣传页面中应用了CSS样式表、用了

设置盒子模型。

3、制作页面结构

使用background-image背景属性插入图片。使用

、

标记与

标

记分别设置标题与段落文本。用了

标签设置了一个盒子。用了标

签加粗字体。还用了标签,整体控制小盒子。

4、定义CSS样式

在css样式表中应用了width与height设置了盒子的大小,用了margin

与padding设置了外边距与内边距。在css样式表中还对标签中的设置了

大小、字体、颜色以及背景。

五、实验代码及网页效果图

1.搭建基本结构

关键代码如下:

正在播放《不完美小孩-TFBOYS》

不完美小孩
演唱:TFBOYS
千:
当我的笑灿烂像阳光

web前端开发技术实验报告 实验三

/>当我的梦做得更漂亮
全世界在为我鼓掌
只有您担心我受

伤
源:
全世界在等我飞更高

您却在心疼我小小翅膀
为我撑起沿途熟悉的地方

凯:
当我必须像个完美的小孩
满足所有的期待

您却好像格外欣赏
我犯错犯傻的模样
合:
我不完美

的梦
您陪着我想

不完美小孩

横划可切换

效果如图3-1所示。

图3-1 效果图

web前端开发技术实验报告 实验三

2.定义CSS样式

关键代码如下:

效果如图3-2所示。

web前端开发技术实验报告 实验三

图3-2 效果图

六、实验总结

1.学会了如何运用

标签定义盒子,并在css样式表中使用

width,height,border等属性来设置盒子的大小、样式以及填充背景。并用

margin与padding设置内外边距。

2.在标签中编辑正文与标题,应用

,

与

标签来分别设置

标题,正文与段落。

3、在标签中应用了标签,知道了“display:inline-block”

就是将标记转换为行内块元素,然后对其应用的宽度、高度及边框设置。