教程
挑战
列表

#1 重生之我用 AI 学 Web

注意

这是测试的版本

标题

h1h6,一共六级标题。

HTML
<h1>标题 1</h1> <h2>标题 2</h2> <h3>标题 3</h3> <h4>标题 4</h4> <h5>标题 5</h5> <h6>标题 6</h6>

给六个标题字体颜色换一下,注意:color 表示字体颜色

CSS
h1 { color: red; } h2 { color: orange; } h3 { color: yellow; } h4 { color: green; } h5 { color: blue; } h6 { color: purple; }

颜色的表示可以是英文,也可以是十六进制(注意前面有个井号),也可以是 RGB。

比如

CSS
h1 { color: #333333; } h2 { color: rgb(163, 174, 46); }

段落

p 表示段落

HTML
<p> 月光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月,天上却有一层淡淡的云,所以不能朗照;但我以为这恰是到了好处——酣眠固不可少,小睡也别有风味的。月光是隔了树照过来的,高处丛生的灌木,落下参差的斑驳的黑影,峭楞楞如鬼一般;弯弯的杨柳的稀疏的倩影,却又像是画在荷叶上。塘中的月色并不均匀;但光与影有着和谐的旋律,如梵婀玲上奏着的名曲。 </p>

font-size 改变字体大小,line-height 改变行高。注意单位是 px(像素)

CSS
p { font-size: 24px; line-height: 48px; text-indent: 2em; }

text-indent: 2em; 表示首行缩进 2 个字符(单位不是 px,而是 em)

任务

标题和段落的简单美化。

要求

完成下面《白鹭》散文(节选)的排版:

  • 标题:使用 h1 标签,设置字号 32px,颜色黑色;
  • 每个段落:设置字号 28px,颜色(#333),行间距 40px,首行缩进两字符;

文字材料

白鹭

白鹭是一首精巧的诗。

色素的配合,身段的大小,一切都很适宜。

白鹤太大而嫌生硬,即如粉红的朱鹭或灰色的苍鹭,也觉得大了一些,而且太不寻常了。

然而白鹭却因为它的常见,而被人忘却了它的美。

那雪白的蓑毛,那全身的流线型结构,那铁色的长喙,那青色的脚,增之一分则嫌长,减之一分则嫌短,素之一忽则嫌白,黛之一忽则嫌黑。

效果

白鹭

白鹭是一首精巧的诗。

色素的配合,身段的大小,一切都很适宜。

白鹤太大而嫌生硬,即如粉红的朱鹭或灰色的苍鹭,也觉得大了一些,而且太不寻常了。

然而白鹭却因为它的常见,而被人忘却了它的美。

那雪白的蓑毛,那全身的流线型结构,那铁色的长喙,那青色的脚,增之一分则嫌长,减之一分则嫌短,素之一忽则嫌白,黛之一忽则嫌黑。

总结

HTML

标题:h1 到 h6
段落:p

CSS

color 字体颜色
font-size 字体大小
line-height 行间距
text-indent: 2em; 表示首行缩进2字符

HTML
CSS
JS
选项
<div class="welcome">黄岩一职</div>
预览