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

来源：用户分享时间：2021-04-05 本文由

说明：文章内容仅供预览，部分内容可能不全，需要完整文档或者需要复制内容，请下载word后使用。下载word有问题请添加微信号:xxxxxx或QQ：xxxxxx 处理（尽可能给您提供完整文档），感谢您的支持与谅解。

web实验报告

图3-1 效果图

2．定义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>标记转换为行内块元素，然后对其应用的宽度、高度及边框设置。

搜索“diyifanwen.net”或“第一范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，第一范文网，提供最新高等教育web前端开发技术实验报告实验三(4)全文阅读和word下载服务。

web前端开发技术实验报告实验三(4).doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

本文链接：https://www.diyifanwen.net/wenku/1178441.html（转载请注明文章来源）

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