由HTML结构以及CSS样式来组成，通过效果图可看出页面由上面图片与下面段落文本组成，段落文本中有部分特殊的字体效果
1.首先我们打开Dreamweaver2021，点击新建文件，按照惯例我们依然将title进行设置
2.进入到开发页面，开始搭建结构
3.首先我们将下载好的图片素材文档使用<img src>标签将图片素材导入到HTML当中，并使用alt属性对图片加上标注
4.在<p>标签中输入对应的段落文本文字
5.接下来我们将需要实现特殊字体效果的文字标记出来使用css对其进行控制
<p>
<em>导语</em>
：臭豆腐是
<strong>长沙</strong>
有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香〞是亡的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年…
<em>【详情】</em>
</p>
火宫殿臭豆腐 ：价格 18 元
6.接下来按command+n新建一个CSS文件，并将其保存到html同文件夹
7.建立完成css文件后，使用<link>标签将css文件使用外链式的方式引入到html文件中。导入后还要添加一个rel="stylesheet"属性，声明这是一个css样式表文件
<link href="美食专栏.css" rel="stylesheet" type="text/css">
8.接下来在CSS中我们使用标签选择器对<p>标签进行字体的统一设置
/* CSS Document */
p {
font-size: 24px;/*设置字体大小*/
line-height: 50px;/*行间距*/
text-indent: 2em;/*首行缩进*/
}```
9.接下来依然按照标签选择器对需要实现特殊效果的文本进行设置，由于价格字体更为特殊，所有价格我们使用的是类选择器对其单独设计
color: darkblue;
}
strong{
color: red
}
.price{
color: red;
font-size: 28px; /*使用类选择器对价格字体进行特殊设置*/
}```
10.最后我们保存文档并按option+fn+f12使用浏览器预览效果！