快捷搜索:  汽车  科技

html网页设计新手入门(从零开始学网页制作-03)

html网页设计新手入门(从零开始学网页制作-03)<h1 align="center">俄媒盘点三大性价较高的度假胜地</h2> <p align="center"><font size="2" color="#545454">2020-08-20 00:02:38 来源:环球时报</font></p>标题居中对齐了在 <h1>、<p> 标签中添加 align 属性,如下:align 属性规定内容的水平对齐方式。align 属性有3个值:当 align="center" 的时候,就是居中对齐内容;当 align="left" 的时候,就是左对齐内容;当 align="right" 的时候,就是右对齐内容。

-接上文

html网页设计新手入门(从零开始学网页制作-03)(1)

上面我们做到了这一步

第三步

将标题居中

需要新学一个属性:

align 属性规定内容的水平对齐方式。

align 属性有3个值:

当 align="center" 的时候,就是居中对齐内容;当 align="left" 的时候,就是左对齐内容;当 align="right" 的时候,就是右对齐内容。

在 <h1>、<p> 标签中添加 align 属性,如下:

<h1 align="center">俄媒盘点三大性价较高的度假胜地</h2> <p align="center"><font size="2" color="#545454">2020-08-20 00:02:38 来源:环球时报</font></p>

html网页设计新手入门(从零开始学网页制作-03)(2)

标题居中对齐了

总结:align的值:center:居中;left:左对齐;right:右对齐。

第四步

在标题下面有一条横线,我们可以用 <hr/> 这个单标签实现:

<hr> 标签用于在 HTML 页面中创建一条水平线

html网页设计新手入门(从零开始学网页制作-03)(3)

再加入 <hr/> 后可以看到,只需要一个 <hr/> 即可在浏览器中显示一条水平线,这就是单标签和双标签区别,它只需要一个。不仅如此,我们还可以定义这条横线的长短、粗细、颜色。

可以试试看在 <hr/> 里面加入以下内容:

<hr size="2" width=200px color="red"/>

html网页设计新手入门(从零开始学网页制作-03)(4)

中间红色的线就是加属性后的<hr/>

size:规定 hr 元素的厚度;width:规定 hr 元素的宽度(px是像素的意思,例如100px是100像素); color:规定 hr 元素呈现的颜色。

第五步

最后一步,把文字写进<p>标签里面

<p>世界上有许多美丽的国家,去那里旅游无需办理繁琐的证件手续,而且还可以欣赏到不一样的风景。 俄罗斯“健康生活网”与旅游门户网站“摩登门”为大家推荐一些经济实惠、性价比比较高的旅游国度,让大家好好畅游一番。 </p> <p>1.亚美尼亚</p> <p>2.黑山共和国</p> <p>3.摩洛哥</p>

html网页设计新手入门(从零开始学网页制作-03)(5)

细心的你可能会发现,为什么成品图3个国家名字的行高间隔很小,而上面的行高却间隔很大

这时我们需要认识一个新标签<br/>

<br/> 可以插入一个换行符,它与<p>标签区别是:<p>标签在换行时,还会在相邻的段落之间插入一些垂直的行间距(行高)。这个标签和上面的<hr/>同样属于单标签。

所以我们稍微修改一下,并加入颜色:

<p><font color="#f00">1.亚美尼亚<br/>2.黑山共和国<br/>3.摩洛哥</font></p>

html网页设计新手入门(从零开始学网页制作-03)(6)

完全一样了

以下是完整html代码:

html网页设计新手入门(从零开始学网页制作-03)(7)

html网页设计新手入门(从零开始学网页制作-03)(8)

END

你学到了<h1> - <h6>标签、<font>标签、<!--注释-->、align 属性、<hr/>标签、<br/>标签。

你已经能自己做出一个简单的网页了。

猜您喜欢: