web前端开发技术实验报告 实验三
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
长春大学
20 15 —2016学年第二学期
Web前端开发技术课程
实验报告
学院:计算机科学技术
专业:软件工程
班级:软件15402
学号:041440210
姓名:王悦
任课教师:车娜
实验三 CSS网页布局
一、实验目的
1、掌握CSS盒子模型的概念,能够灵活运用盒子模型布局页面;
2、掌握盒子模型相关属性,能够使用它们熟练地控制网页元素;
3、理解块元素与行内元素的区别,能够对它们进行转换。
二、内容及要求
运用盒子模型的相关属性实现网页弹出框效果,满足如下要求:
1、网页弹出框由上面的标题与下面的宣传内容两部分组成;
2、标题通过h2定义;
3、在段落文本中内容部分由h3与p标记进行定义;
4、应用
果。
三、实验原理
盒子模型:把HTML页面中的元素瞧作就是一个矩形的盒子,也就就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)
与外边距(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
千:
当我的笑灿烂像阳光
/>当我的梦做得更漂亮
全世界在为我鼓掌
只有您担心我受伤
源:
全世界在等我飞更高
您却在心疼我小小翅膀
为我撑起沿途熟悉的地方
凯:
当我必须像个完美的小孩
满足所有的期待
您却好像格外欣赏
我犯错犯傻的模样
合:
我不完美的梦
您陪着我想
横划可切换不完美小孩
效果如图3-1所示。
图3-1 效果图
2.定义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{display:inline-block; width:70px; height:60px;}
、three{background:url(01、png) no-repeat}
、four{font-size:10px; font-family:"微软雅黑"; color:#000;} 、big{color:#3F9;}
、small{font-size:18px}
、five{background:url(02、png) no-repeat}
、six{background:url(03、png) no-repeat}
效果如图3-2所示。