2022年web前端开发技术实验报告实验三.pdf

《2022年web前端开发技术实验报告实验三.pdf》由会员分享，可在线阅读，更多相关《2022年web前端开发技术实验报告实验三.pdf（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、web前端开发技术实验报告实验三长 春 大 学20 15 2016学年第二学期Web 前端开发技术课程实 验 报 告学院:计算机科学技术专业:软件工程班级:软件 15402 学号:041440210 姓名:王 悦任课教师 :车 娜实验三 CSS 网页布局一、实验目的1、掌握 CSS 盒子模型的概念 , 能够灵活运用盒子模型布局页面; 2、掌握盒子模型相关属性 , 能够使用它们熟练地控制网页元素; 3、理解块元素与行内元素的区别, 能够对它们进行转换。二、内容及要求运用盒子模型的相关属性实现网页弹出框效果, 满足如下要求 : 1、网页弹出框由上面的标题与下面的宣传内容两部分组成; 2、标题通过

2、h2 定义; 3、在段落文本中内容部分由h3 与 p 标记进行定义 ; 4、应用 标记、 标记、边框属性、背景属性等设计页面结构效果。三、实验原理盒子模型 : 把 HTML页面中的元素瞧作就是一个矩形的盒子, 也就就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding) 、边框 (border)精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 1 页，共 5 页 - - - - - - - - - - web前端开发技术实验报告实验三与外边距 (margin) 组成。 标记: 就是一个区块容

3、器标记 , 可以将网页分割为独立的、 不同的部分 ,以实现网页的规划与布局。边框属性 : 使用 border-style、border-width、border-color等属性可以实现丰富的边框效果。padding 属性 : 设置内边距 , 即元素内容与边框之间的距离, 也常常称为内填充。margin属 性 : 设 置 外 边 距 , 即 元 素 边 框 与 相 邻 元 素 之 间 的 距 离 。background-color:设置网页元素的背景颜色 , 默认值为 transparent, 即背景透明 , 这时子元素会显示其父元素的背景。background-image 属性: 将图像作为

4、网页元素的背景。标记: 行内元素。 与之间只能包含文本与各种行内标记, 如加粗标记 、倾斜标记 等,中还可以嵌套多层 。四、实验步骤1、结构分析宣传页面包含图片、标题及段落等。2、样式分析宣传页面中应用了 CSS样式表、用了 设置盒子模型。3、制作页面结构使用 background-image 背景属性插入图片。使用、标记与 标记分别设置标题与段落文本。用了 标签设置了一个盒子。用了 标签加粗字体。还用了 标签, 整体控制小盒子。4、定义 CSS样式在 css 样式表中应用了width 与 height设置了盒子的大小 , 用了 margin与 padding 设置了外边距与内边距。 在 cs

5、s 样式表中还对 标签中的设置了大小、字体、颜色以及背景。五、实验代码及网页效果图1. 搭建基本结构关键代码如下 : 正在播放不完美小孩 -TFBOYS 不完美小孩 演唱:TFBOYS 千:当我的笑灿烂像阳光 当我的梦做得更漂亮 全世界在为我鼓掌 只有您担心我受伤 源:全世界在等我飞更高 您却在心疼我小小翅膀 为我撑起沿途熟悉的地方 凯:当我必须像个完美的小孩 满足所有的期待 您却好像格外欣赏 我犯错犯傻的模样 合: 我不完美的梦 您陪着我想 不完美小孩 横划可切换 效果如图 3-1 所示。图 3-1 效果图精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载

6、名师归纳 - - - - - - - - - -第 3 页，共 5 页 - - - - - - - - - - web前端开发技术实验报告实验三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:微 软 雅 黑 ;

7、 color:#FFF; background: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; 、bigcolor:#3F9; 、smallfont-size:18px 、fivebackground:url(02、png) no-repeat 、sixbackground:url(

8、03、png) no-repeat 效果如图 3-2 所示。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 4 页，共 5 页 - - - - - - - - - - web前端开发技术实验报告实验三图 3-2 效果图六、实验总结1. 学 会 了 如 何 运 用 标 签 定 义 盒 子 , 并 在css样 式 表 中 使 用width,height,border等属性来设置盒子的大小、样式以及填充背景。并用margin 与 padding 设置内外边距。2. 在标签中编辑正文与标题, 应用 ,与标签来分别设置标题, 正文与段落。3、在标签中应用了 标签, 知道了“ display:inline-block”就是将 标记转换为行内块元素 , 然后对其应用的宽度、高度及边框设置。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 5 页，共 5 页 - - - - - - - - - -