web前端开发技术实验报告 实验三(4)
发布时间：2021-06-05
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>标记转换为行内块元素，然后对其应用的宽度、高度及边框设置。
上一篇：广电银通电子密码锁方案
下一篇：第七章 会计职业道德教育与修养
