标签：图文混排 标签 臭豆腐 html CSS Dreamweaver 使用 选择器 css
一、案例实现过程如下
1、效果分析
由HTML结构以及CSS样式来组成，通过效果图可看出页面由上面图片与下面段落文本组成，段落文本中有部分特殊的字体效果
2、开始实现
1.首先我们打开Dreamweaver2021，点击新建文件，按照惯例我们依然将title进行设置
2.进入到开发页面，开始搭建结构
3.首先我们将下载好的图片素材文档使用<img src>标签将图片素材导入到HTML当中，并使用alt属性对图片加上标注
4.在<p>标签中输入对应的段落文本文字
- 接下来我们将需要实现特殊字体效果的文字标记出来使用
css对其进行控制
<body>
<p>
<em>导语</em>
：臭豆腐是
<strong>长沙</strong>
有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香〞是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年…
<em>【详情】</em>
</p>
<br>
<p>
<em>火宫殿臭豆腐</em>
：价格
<strong>18</strong>
元</p>
</body>
6.接下来按command+n新建一个CSS文件，并将其保存到html同文件夹
7.建立完成css文件后，使用<link>标签将css文件使用外链式的方式引入到html文件中。导入后还要添加一个rel="stylesheet"属性，声明这是一个css样式表文件
<link href="美食专栏.css"
rel="stylesheet" type="text/css">
8.接下来在CSS中我们使用标签选择器对<p>标签进行字体的统一设置
@charset "UTF-8";
/* CSS Document */
p {
font-size: 24px;/*设置字体大小*/
line-height: 50px;/*行间距*/
text-indent: 2em;/*首行缩进*/
}
- 接下来依然按照标签选择器对需要实现特殊效果的文本进行设置，由于价格字体更为特殊，所有价格我们使用的是类选择器对其单独设计
em{
color: darkblue;
}
strong{
color: red
}
.price{
color: red;
font-size: 28px; /*使用类选择器对价格字体进行特殊设置*/
}
- 最后我们保存文档并按option+fn+f12使用浏览器预览效果！
###欢迎加入QQ群一同交流学习937864538
标签：图文混排,标签,臭豆腐,html,CSS,Dreamweaver,使用,选择器,css 来源： https://blog.csdn.net/No1banana/article/details/122652502
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。