web前端开发技术实验报告 实验三(2)
发布时间:2021-06-05
发布时间:2021-06-05
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>设置盒子模型。
上一篇:广电银通电子密码锁方案
下一篇:第七章 会计职业道德教育与修养