由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使用浏览器预览效果!