《web前端开发技术实验报告实验三.pdf》由会员分享，可在线阅读，更多相关《web前端开发技术实验报告实验三.pdf（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 a 长 春 大 学 20 15 2016 学年第 二 学期 Web 前端开发技术 课程 实 验 报 告 学 院：计算机科学技术 专 业：软件工程 班 级：软件 15402 2 学 号：041440210 姓 名：王 悦 任课教师：车 娜 实验三 CSS 网页布局 一、实验目的 1.掌握 CSS 盒子模型的概念，能够灵活运用盒子模型布局页面；2.掌握盒子模型相关属性，能够使用它们熟练地控制网页元素；3.理解块元素与行内元素的区别，能够对它们进行转换。二、内容及要求 运用盒子模型的相关属性实现网页弹出框效果，满足如下要求：1.网页弹出框由上面的标题和下面的宣传内容两部分组成；2.标题通过 h2
2、定义；3.在段落文本中内容部分由 h3 和 p 标记进行定义；4.应用标记、标记、边框属性、背景属性等设计页面结构效果。三、实验原理 盒子模型：把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。标记：是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。边框属性：使用 border-style、border-width、border-color等属性可以实现丰富的边框效果。padding属性：设置内边距，即元素内容与边框之间的距离，也常常称为内填
3、充。margin 属性：设置外边距，即元素边框与相邻元素之间的距离。background-color：设置网页元素的背景颜色，默认值为transparent，即背景透明，这时子元素会显示其父元素的背景。background-image属性：将图像作为网页元素的背景。标记：行内元素。与之间只能包含文本和各种行内标记，如加粗标记、倾斜标记等，中还可以嵌套多层。3 四、实验步骤 1、结构分析 宣传页面包含图片、标题及段落等。2、样式分析 宣传页面中应用了 CSS 样式表、用了设置盒子模型。3、制作页面结构 使用 background-image 背景属性插入图片。使用、标记和标记分别设置标题和段落文
4、本。用了标签设置了一个盒子。用了标签加粗字体。还用了标签，整体控制小盒子。4、定义 CSS 样式 在 css 样式表中应用了 width 和 height 设置了盒子的大小，用了 margin和 padding 设置了外边距和内边距。在 css 样式表中还对标签中的设置了大小、字体、颜色以及背景。五、实验代码及网页效果图 1搭建基本结构 关键代码如下：正在播放不完美小孩-TFBOYS 不完美小孩演唱：TFBOYS千：当我的笑灿烂像阳光 当我的梦做得更漂亮 全世界在为我鼓掌 只有你担心我受伤源：全世界在等我飞更高 你却在心疼我小小翅膀 为我撑起沿途熟悉的地方 凯：当我必须像个完美的小孩 满足所有
5、的期待你却好像格外欣赏 我犯错犯傻的模样 合：我不完美的梦 你陪着我想 不完美小孩横划可切换 4 效果如图 3-1 所示。图 3-1 效果图 2定义 CSS 样式 关键代码如下：*margin:0;padding:0.allwidth:350px;height:470px;border:#E1E1E1 solid 1px;margin:50px auto;.oneline-height:40px;border-bottom:#E1E1E1 1px;font-family:微软雅黑;.twofont-size:15px;font-family:微 软 雅 黑;color:#FFF;backgro
6、und:url(2.jpg)no-repeat;text-align:center spandisplay:inline-block;width:70px;height:60px;.threebackground:url(01.png)no-repeat.fourfont-size:10px;font-family:微软雅黑;color:#000;5.bigcolor:#3F9;.smallfont-size:18px.fivebackground:url(02.png)no-repeat.sixbackground:url(03.png)no-repeat 效果如图 3-2 所示。图 3-2 效果图 六、实验总结 1学会了如何运用标签定义盒子，并在 css 样式表中使用 width，height，border 等属性来设置盒子的大小、样式以及填充背景。并用 margin 和padding 设置内外边距。2在标签中编辑正文和标题，应用,和标签来分别设置标题，正文和段落。3.在标签中应用了标签，知道了“display:inline-block”6 是将标记转换为行内块元素，然后对其应用的宽度、高度及边框设置。