web前端开发技术实验报告实验三_第1页
web前端开发技术实验报告实验三_第2页
web前端开发技术实验报告实验三_第3页
web前端开发技术实验报告实验三_第4页
web前端开发技术实验报告实验三_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

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

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

4、及段落等。2、样式分析宣传页面中应用了CSS样式表、用了<div>设置盒子模型。3、制作页面结构使用background-image背景属性插入图片。使用<h4>、<h6>标记和<p>标记分别设置标题和段落文本。用了<div>标签设置了一个盒子。用了<strong>标签加粗字体。还用了<span>标签，整体控制小盒子。4、定义CSS样式在css样式表中应用了width和height设置了盒子的大小，用了margin和padding设置了外边距和内边距。在css样式表中还对<span>标签中的设置了大

5、小、字体、颜色以及背景。五、实验代码及网页效果图1搭建基本结构关键代码如下：<body><div class="all"><div class="one"><h4>正在播放不完美小孩-TFBOYS</h4></div> <div class="two"><p>不完美小孩<br />演唱：TFBOYS<br />千：<br />当我的笑灿烂像阳光 <br />当我的梦做得更漂亮 <br /

6、>全世界在为我鼓掌 <br />只有你担心我受伤<br />源：<br /><strong class="big small">全世界在等我飞更高</strong> <br />你却在心疼我小小翅膀 <br />为我撑起沿途熟悉的地方 <br />凯：<br />当我必须像个完美的小孩 <br />满足所有的期待<br />你却好像格外欣赏 <br />我犯错犯傻的模样 <br />合： <br />我

7、不完美的梦 <br /> 你陪着我想 <br /></p></div><span></span><span><h6>不完美小孩</h6><p class="big four">横划可切换</p></span><span></span><span></span><span></span></div></div></body>效果

8、如图3-1所示。图3-1 效果图2定义CSS样式关键代码如下：<style type="text/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

9、; 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(03.png) no-repeat</style>效果如图3-2所示。图3-2 效果图六、实验总结1学会了如何运用<div>标签定义盒子，并在css样式表中使用width，height，border等属性来设置盒子的大小、样式以及填充背景。并用margin和padding设置内外边距。2在<body>标签中编辑正文和标题，应用<h4>,&l

人人文库> 全部分类> 应用文书 > 年终总结

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论