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

2025-10-05 18:49:41

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>

各位亲爱的同学，国庆节放假7天。出门请大家注意安全，特别是要回家或者要远行旅游的同学，要注意人身安全。

</div>

</body>

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

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

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

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