快捷搜索:  汽车  科技

html零基础学习网页(从零开始学网页制作-04)

html零基础学习网页(从零开始学网页制作-04)你会发现无论怎么刷新浏览器,还是一片空白。试一试在<body></body>加上<div></div><div> 可以定义文档中的分区或节;<div> 标签可以把文档分割为独立的、不同的部分。我们暂且把 div 看作是一个盒子。现在我们要做的就是让浏览器显示盒子,并把盒子变成长方形,然后染上黑,红,金这3种颜色。

尝试用DIV制作德国国旗

html零基础学习网页(从零开始学网页制作-04)(1)

德意志联邦共和国,简称德国,国旗由3种颜色长方形所构成。

我们需要制作出3个长方形来组合成德国国旗,需要用到<div>标签。

什么是div?

<div> 可以定义文档中的分区或节;<div> 标签可以把文档分割为独立的、不同的部分。

我们暂且把 div 看作是一个盒子

现在我们要做的就是让浏览器显示盒子,并把盒子变成长方形,然后染上黑,红,金这3种颜色。

试一试在<body></body>加上<div></div>

你会发现无论怎么刷新浏览器,还是一片空白。

这是因为<div>这个盒子没有正常完全的显示,所以需要样东西:

第一:缺少宽度和高度;我们要在纸上画出长方形,就必须有长和宽,<div>也是同理。

第二:缺少边框或背景颜色;要想让<div>这个盒子能被我们看见,通常是给它加个边框或者背景颜色。

二者缺一不可,为了这两样东西,我们需要把 style 添加到<div>中:

<div style="width:500px;height:100px;background:rgb(0 0 0);"></div>

html零基础学习网页(从零开始学网页制作-04)(2)

然后刷新浏览器,会出现一个黑色长方形:

html零基础学习网页(从零开始学网页制作-04)(3)

我们来看一下加入<div>的html代码:

<div style="width:500px;height:100px;background:rgb(0 0 0);"></div>

style:它定义了<div>的样式,也就是说,要让div变成什么样子,就需要style来改变div。style等于号后面的width、height、background都属于style的属性。

width:定义div的宽度。

height:定义div的高度。

background:定义div的背景颜色。【 黑色:rgb(0 0 0) 红色:rgb(255 0 0) 金色:rgb(255 200 0) 】

只是一行简单的代码,我们就已经完成了国旗1/3的制作,那么依葫芦画瓢,你自己写出剩下两行代码吧~

答案:

html零基础学习网页(从零开始学网页制作-04)(4)

html零基础学习网页(从零开始学网页制作-04)(5)

总结:<div></div>这个盒子需要 宽width、高height、背景颜色background才能正常显示出来。

猜您喜欢: