长春大学 2015— 2016学年第 二 学期Web前端开发技术课程实验报告学 院: 计算机科学技术专 业: 软件工程 班 级: 软件15402 学 号: 041440210 姓 名: 王悦 任课教师: 车娜 实验三 CSS网页布局一、,能够灵活运用盒子模型布局页面;,能够使用它们熟练地控制网页元素;,能够对它们进行转换。二、内容及要求运用盒子模型的相关属性实现网页弹出框效果,满足如下要求:;;;<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>标签中的设置了大小、字体、颜色以及背景。五、:<body><div><div><h4>正在播放《不完美小孩-TFBOYS》</h4></div><div><p>不完美小孩<br/>演唱:TFBOYS<br/>千:<br/>当我的笑灿烂像阳光<br/>当我的梦做得更漂亮<br/>全世界在为我鼓掌<br/>只有你担心我受伤<br/>源:<br/><strong>全世界在等我飞更高</strong><br/>你却在心疼我小小翅膀<br/>为我撑起沿途熟悉的地方<br/>凯:<br/>当我必须像个完美的小孩<br/>满足所有的期待<br/>你却好像格外欣赏<br/>我犯错犯傻的模
web前端开发技术实验报告+实验三 来自淘豆网m.daumloan.com转载请标明出处.
