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

长 春 大 学 20 15 — 2016学年第 二 学期 Web前端开发技术 课程 实 验 报 告 学 院： 计算机科学技术 专 业： 软件工程 班 级： 软件15402 学 号： 041440210 姓 名： 王 悦 任课教师： 车 娜 实验三 CSS网页布局 一、实验目的 1.掌握CSS盒子模型的概念，能够灵活运用盒子模型布局页面； 2.掌握盒子模型相关属性，能够使用它们熟练地控制网页元素； 3.理解块元素与行内元素的区别，能够对它们进行转换。 二、内容及要求 运用盒子模型的相关属性实现网页弹出框效果，满足如下要求： 1.网页弹出框由上面的标题和下面的宣传内容两部分组成； 2.标题通过h2定义； 3.在段落文本中内容部分由h3和p标记进行定义； 4.应用div标记、span标记、边框属性、背景属性等设计页面结构效果。 三、实验原理 盒子模型：把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 div标记：是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。 边框属性：使用border-style、border-width、border-color等属性可以实现丰富的边框效果。 padding属性：设置内边距，即元素内容与边框之间的距离，也常常称为内填充。 margin属性：设置外边距，即元素边框与相邻元素之间的距离。background-color：设置网页元素的背景颜色，默认值为transparent， 即背景透明，这时子元素会显示其父元素的背景。 background-image属性：将图像作为网页元素的背景。 span标记：行内元素。span与/span之间只能包含文本和各种行内标记，如加粗标记strong、倾斜标记em等，span中还可以嵌套多层span。 四、实验步骤 1、结构分析 宣传页面包含图片、标题及段落等。 2、样式分析 宣传页面中应用了CSS样式表、用了div设置盒子模型。 3、制作页面结构 使用background-image背景属性插入图片。使用h4、h6标记和p标记分别设置标题和段落文本。用了div标签设置了一个盒子。用了strong标签加粗字体。还用了span标签，整体控制小盒子。 4、定义CSS样式 在css样式表中应用了width和height设置了盒子的大小，用了margin和padding设置了外边距和内边距。在css样式表中还对span标签中的设置了大小、字体、颜色以及背景。 五、实验代码及网页效果图 1．搭建基本结构 关键代码如下： body div class=all div class=oneh4正在播放《不完美小孩-TFBOYS》/h4/div div class=two p不完美小孩br /演唱：TFBOYSbr /千：br /当我的笑灿烂像阳光 br /当我的梦做得更漂亮 br /全世界在为我鼓掌 br /只有你担心我受伤br /源：br /strong class=big small全世界在等我飞更高/strong br /你却在心疼我小小翅膀 br /为我撑起沿途熟悉的地方 br /凯：br /当我必须像个完美的小孩 br /满足所有的期待br /你却好像格外欣赏 br /我犯错犯傻的模样 br /合： br /我不完美的梦 br / 你陪着我想 br / /p /div span/span spanh6不完美小孩/h6p class=big four横划可切换 /p/span span/span span/span span/span /div/div /body 效果如图3-1所示。 图3-1 效果图 2．定义CSS样式 关键代码如下： style type=text/css *{margin:0;padding:0} .all{width:350px; height:470px; border:#E1E1E1 solid 1px; margin:50px auto;} .one{line-height:40px; border-bottom:#E1E1E1 1px ; font-family:微软雅黑;} .two{font-size:15px; font-family:微软雅黑; color:#FFF; background:url(2.jpg) no-repeat; text-align:center } span{d