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

更新时间：2023-08-20 12:16:01 阅读量：高等教育文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

Web前端开发技术实验报告综合设计推荐度：
相关推荐

web实验报告

长春大学

20 15 — 2016学年第

课程

实验报告

学院：计算机科学技术

专业：软件工程

班级：软件15402

学号：姓名：

任课教师：车娜

web实验报告

实验三 CSS网页布局

一、实验目的

1.掌握CSS盒子模型的概念，能够灵活运用盒子模型布局页面；

2.掌握盒子模型相关属性，能够使用它们熟练地控制网页元素；

3.理解块元素与行内元素的区别，能够对它们进行转换。

二、内容及要求

运用盒子模型的相关属性实现网页弹出框效果，满足如下要求：

1.网页弹出框由上面的标题和下面的宣传内容两部分组成；

2.标题通过h2定义；

3.在段落文本中内容部分由h3和p标记进行定义；

4.应用<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>设置盒子模型。

web实验报告

3、制作页面结构

使用background-image背景属性插入图片。使用<h4>、<h6>标记和<p>标记分别设置标题和段落文本。用了<div>标签设置了一个盒子。用了<strong>标签加粗字体。还用了<span>标签，整体控制小盒子。

4、定义CSS样式

在css样式表中应用了width和height设置了盒子的大小，用了margin和padding设置了外边距和内边距。在css样式表中还对<span>标签中的设置了大小、字体、颜色以及背景。

五、实验代码及网页效果图

1．搭建基本结构

关键代码如下：

<body>

<div class="one"><h4>正在播放《不完美小孩-TFBOYS》</h4></div> <div class="two">

<p>不完美小孩<br />演唱：TFBOYS<br />千：<br />当我的笑灿烂像阳光 <br />当我的梦做得更漂亮 <br />全世界在为我鼓掌 <br />只有你担心我受伤<br />源：<br /><strong class="big small">全世界在等我飞更高</strong> <br />你却在心疼我小小翅膀 <br />为我撑起沿途熟悉的地方 <br />凯：<br />当我必须像个完美的小孩 <br />满足所有的期待<br />你却好像格外欣赏 <br />我犯错犯傻的模样 <br />合： <br />我不完美的梦 <br /> 你陪着我想 <br />

</p>

</div>

<span><h6>不完美小孩</h6><p class="big four">横划可切换

</p></span>

</div></div>

</body>

效果如图3-1所示。

web实验报告

图3-1 效果图

2．定义CSS样式

关键代码如下：

*{margin:0;padding:0}