CSS在网页中的应用-盒模型练习

2025-11-21 03:49:39

1、首先制作第一个图片，打开adobe dreamweaver软件，我的是2017版的，当然2018版或者其他版都也可以。打开后，点击文件-新建，双击“文档类型”里面第一个“HTML”，会出现有代码的页面。

CSS在网页中的应用-盒模型练习

2、接着制作盒子，在head部分写入这些代码：

<style>

div{
  border: dotted;
  width: 380px;
  height: 380px;
  padding: 30px 10px 40px 20px;
  border: 4px 10px 4px 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-image: url(images/bjtp.jpg);
  background-repeat: no-repeat;
  text-align: center;
  background-size: cover;
}
</style>

CSS在网页中的应用-盒模型练习

3、在body部分里写入以下代码（盒子制作）：

<body>

<div>

说是寂寞的秋的清,

说是辽远的海的相思.
假如有人问我的烦忧,
我不敢说出你的名字.

</div>

</body>

CSS在网页中的应用-盒模型练习

4、第一个页面盒子就制作好了。

CSS在网页中的应用-盒模型练习

5、同样的，制作第二个盒子head部分代码如下：

<style>

*{
  padding: 0;
  margin: 0;
}
#mybox{
  border: 1px #CCC solid;
  height: 300px;
  width: 350px;
  margin: auto;
}
#mybox h1{
  background-color: orange;
  text-align: center;
  font-size: 25px;
  padding: 12px;
  font-family: kaiti;
}
#mybox p{
  color: grey;
  padding: 10px;
  line-height: 30px;
  text-indent: 2em;
}
</style>

CSS在网页中的应用-盒模型练习

6、body部分代码如下：

<body>

<div id="mybox">
<h1>通知</h1>
各位亲爱的同学，国庆节放假7天。出门请大家注意安全，特别是要回家或者要远行旅游的同学，要注意人身安全。
</div>
</body>

CSS在网页中的应用-盒模型练习

7、制作出来的盒子页面如图：

CSS在网页中的应用-盒模型练习

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。