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

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

ID：51336685

大小：444.50 KB

页数：5页

时间：2020-03-10

web前端开发技术实验报告 实验三.doc_第1页
web前端开发技术实验报告 实验三.doc_第2页
web前端开发技术实验报告 实验三.doc_第3页
web前端开发技术实验报告 实验三.doc_第4页
web前端开发技术实验报告 实验三.doc_第5页
资源描述：

《web前端开发技术实验报告 实验三.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

2、p标记进行定义；4.应用

标记、标记、边框属性、背景属性等设计页面结构效果。三、实验原理盒子模型：把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
标记：是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。边框属性：使用border-style、border-width、border-color等属性可以实现丰富的边框效果。padding属性：设置内边距，即元素内容与边框

3、之间的距离，也常常称为内填充。margin属性：设置外边距，即元素边框与相邻元素之间的距离。background-color：设置网页元素的背景颜色，默认值为transparent，即背景透明，这时子元素会显示其父元素的背景。background-image属性：将图像作为网页元素的背景。标记：行内元素。与之间只能包含文本和各种行内标记，如加粗标记、倾斜标记等，中还可以嵌套多层。四、实验步骤1、结构分析宣传页面包含图片、标题及段落等。2、样式分析宣传页面中应用了

4、CSS样式表、用了

设置盒子模型。53、制作页面结构使用background-image背景属性插入图片。使用

、

标记和

标记分别设置标题和段落文本。用了

标签设置了一个盒子。用了标签加粗字体。还用了标签，整体控制小盒子。4、定义CSS样式在css样式表中应用了width和height设置了盒子的大小，用了margin和padding设置了外边距和内边距。在css样式表中还对标签中的设置了大小、字体、颜色以及背景。五、实验代码及网页效果图1．搭建基本结构关键代码如下：

5、dy>

正在播放《不完美小孩-TFBOYS》

不完美小孩
演唱：TFBOYS
千：
当我的笑灿烂像阳光
当我的梦做得更漂亮
全世界在为我鼓掌
只有你担心我受伤
源：
全世界在等我飞更高
你却在心疼我小小翅膀
为我撑起沿途熟悉的地方
凯：
当我必须像个完美的小孩<

6、br/>满足所有的期待
你却好像格外欣赏
我犯错犯傻的模样
合：
我不完美的梦
你陪着我想

不完美小孩
横划可切换

效果如图3-1所示。5图3-1效果图2．定义CSS样式关键代码如下：*{margin:0;padd

7、ing:0}.all{width:350px;height:470px;border:#E1E1E1solid1px;margin:50pxauto;}.one{line-height:40px;border-bottom:#E1E1E11px;font-family:"微软雅黑";}.two{font-size:15px;font-family:"微软雅黑";color:#FFF;background:url(2.jpg)no-repeat;text-align:center}span{display:inline-block;width:70

8、px;height:60px;}.three{background:url(01.png)no-repeat}.four{font-si

当前文档最多预览五页，下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。