首页 > 其他分享> > 使用Dreamweaver进行简单的美食专栏图文混排/html图文混排/链入式导入css样式/案例演示

使用Dreamweaver进行简单的美食专栏图文混排/html图文混排/链入式导入css样式/案例演示

2022-01-23 16:04:13 作者：互联网

一、案例实现过程如下

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