长 春 大 学 ２ 0 15 — ２ 016 学年第 二 学期 Ｗ ｅ b 前端开发技术 课程实 验 报 告学 院： 计算机科学技术 专 业: 软件工程 班 级： 软件 15 ４ 02 学 号： 041 ４ 40 ２ 1 ０ 姓 名： 王 悦 任课老师： 车 娜 实验三 CSS 网页布局一、实验目得1、掌握 CSS 盒子模型得概念，能够灵活运用盒子模型布局页面;2、掌握盒子模型相关属性，能够使用它们熟练地控制网页元素;3、理解块元素与行内元素得区别,能够对它们进行转换。二、内容及要求运用盒子模型得相关属性实现网页弹出框效果，满足如下要求：1、网页弹出框由上面得标题与下面得宣传内容两部分组成；２、标题通过 h ２定义;3、在段落文本中内容部分由 h3 与 p 标记进行定义；4、应用
标记、边框属性、背景属性等设计页面结构效果.三、实验原理盒子模型:把Ｈ TM Ｌ页面中得元素瞧作就是一个矩形得盒子,也就就是一个盛装内容得容器。每个矩形都由元素得内容、内边距（padding）、边框(ｂorder)与外边距(m ａ rg ｉ n)组成。＜div>标记:就是一个区块容器标记，可以将网页分割为独立得、不同得部分，以实现网页得规划与布局。边框属性:使用 b ｏｒ d ｅ r－ｓ ty ｌｅ、bord ｅｒ—width、bord ｅ r—col ｏ r 等属性可以实现丰富得边框效果。ｐ addin ｇ属性:设置内边距，即元素内容与边框之间得距离,也常常称为内填充。ｍａ rgin 属性:设置外边距,即元素边框与相邻元素之间得距离。b ａckgr ｏ u ｎ d—color：设置网页元素得背景颜色,默认值为 transpar ｅｎ t,即背景透明,这时子元素会显示其父元素得背景。b ａｃ kground－ima ｇｅ属性：将图像作为网页元素得背景。之间只能包含文本与各种行内标记,如加粗标记等，＜ｓ pa ｎ＞中还可以嵌套多层设置盒子模型.３、制作页面结构使用 b ａ ckgr ｏ un ｄ-image 背景属性插入图片。使用<ｈ 4＞、<ｈ 6＞标记与〈p>标记分别设置标题与段落文本.用了〈ｄ i ｖ〉标签设置了一个盒子。用了
