web前端开发技术实验报告 实验三
更新时间:2023-07-24 14:10:01 阅读量: 实用文档 文档下载
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="all">
<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></span>
<span><h6>不完美小孩</h6><p class="big four">横划可切换
</p></span>
<span></span>
<span></span>
<span></span>
</div></div>
</body>
效果如图3-1所示。
web实验报告
图3-1 效果图
2.定义CSS样式
关键代码如下:
<style type="text/css">
*{margin:0;padding:0}
.all{width:350px; height:470px; border:#E1E1E1 solid 1px; margin:50px auto;}
.one{line-height:40px; border-bottom:#E1E1E1 1px ; font-family:"微软雅黑";}
.two{font-size:15px; font-family:"微软雅黑"; color:#FFF; background:url(2.jpg) no-repeat; text-align:center }
span{display:inline-block; width:70px; height:60px;}
.three{background:url(01.png) no-repeat}
.four{font-size:10px; font-family:"微软雅黑"; color:#000;}
.big{color:#3F9;}
.small{font-size:18px}
.five{background:url(02.png) no-repeat}
.six{background:url(03.png) no-repeat}
web实验报告
</style>
效果如图3-2所示。
图3-2 效果图
六、实验总结
1.学会了如何运用<div>标签定义盒子,并在css样式表中使用width,height,border等属性来设置盒子的大小、样式以及填充背景。并用margin和padding设置内外边距。
2.在<body>标签中编辑正文和标题,应用<h4>,<h6>和<p>标签来分别设置标题,正文和段落。
3.在<body>标签中应用了<span>标签,知道了“display:inline-block”是将<span>标记转换为行内块元素,然后对其应用的宽度、高度及边框设置。
正在阅读:
web前端开发技术实验报告 实验三07-24
非谓语动词的做题步骤05-24
好氧池易出现的问题07-10
财务管理第一次作业06-08
自然之道说课稿05-20
室外管网技术交底 - 图文01-02
国贸练习题12-20
以案说法--说说职工福利费的那点事会计实务经验之谈04-17
10-11基础工程试题03-19
- 教学能力大赛决赛获奖-教学实施报告-(完整图文版)
- 互联网+数据中心行业分析报告
- 2017上海杨浦区高三一模数学试题及答案
- 招商部差旅接待管理制度(4-25)
- 学生游玩安全注意事项
- 学生信息管理系统(文档模板供参考)
- 叉车门架有限元分析及系统设计
- 2014帮助残疾人志愿者服务情况记录
- 叶绿体中色素的提取和分离实验
- 中国食物成分表2020年最新权威完整改进版
- 推动国土资源领域生态文明建设
- 给水管道冲洗和消毒记录
- 计算机软件专业自我评价
- 高中数学必修1-5知识点归纳
- 2018-2022年中国第五代移动通信技术(5G)产业深度分析及发展前景研究报告发展趋势(目录)
- 生产车间巡查制度
- 2018版中国光热发电行业深度研究报告目录
- (通用)2019年中考数学总复习 第一章 第四节 数的开方与二次根式课件
- 2017_2018学年高中语文第二单元第4课说数课件粤教版
- 上市新药Lumateperone(卢美哌隆)合成检索总结报告
- 实验
- 前端
- 开发技术
- 报告
- web