一、效果分析

根据图片分析得出该页面的组成部分，由标题、副标题、图片、正文、下划线、以及链接组成
在这里插入图片描述

二、开始实现

  • 首先下载好图文素材，并将其保存在和准备建立html的文件同一文件夹
    在这里插入图片描述

  • 打开Dreamweaver2021，新建立一个html5格式的文档
    在这里插入图片描述

  • 建立好文档之后我们根据组成部分利用html将网页结构建立起来，正文我们使用<div>盒子模型,并着手将文字填入到对应的区域
    在这里插入图片描述

  • 接下来我们使用<style>标签直接用嵌入式的方式引入CSS用以实现效果

<style>
		h2{
			font-size: 32px;
			font-style: normal;
			font-family:"微软雅黑";
				/*定义标题h2的字号*/
		}
		.box{
			line-height: 35px;
			width: 100em;
			/*定义类名为box的div正文文本行间距*/
			/*定义div盒子模型宽度*/
		}
		.one{
			 color:#1570BE;	
			 font-style: normal;
			/*定义标题内特殊字体的颜色，清除<em>的默认斜体属性*/
		}
		.two{
			color: red;
			font-style: normal;
			/*定义正文中特殊字体的颜色，并清除<em>的默认斜体属性*/
		}
		.three{
			color: #B2BCC6;
			/*定义文章末尾字体颜色*/
		}
		.link{
			color: #1570BE;
			/*定义文章末尾网址字体颜色*/
		}
	</style>
三、实现完成（具体的代码作用清留意注释）使用option+fn+f12快捷键用浏览器打开进行预览。

在这里插入图片描述

代码展示：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>动手实践</title>
	<style>
		h2{
			font-size: 32px;
			font-style: normal;
			font-family:"微软雅黑";
				/*定义标题h2的字号*/
		}
		.box{
			line-height: 35px;
			width: 100em;
			/*定义类名为box的div正文文本行间距*/
			/*定义div盒子模型宽度*/
		}
		.one{
			 color:#1570BE;	
			 font-style: normal;
			/*定义标题内特殊字体的颜色，清除<em>的默认斜体属性*/
		}
		.two{
			color: red;
			font-style: normal;
			/*定义正文中特殊字体的颜色，并清除<em>的默认斜体属性*/
		}
		.three{
			color: #B2BCC6;
			/*定义文章末尾字体颜色*/
		}
		.link{
			color: #1570BE;
			/*定义文章末尾网址字体颜色*/
		}
	</style>
</head>
<body>
	<h2 align="center" class="box1"> 把握<em class="one">移动端字体设计</em>的七大准则</h2>
	<div align="center">更新时间：<em class="one">2020年06月6日17时26分</em>	来源：<em class="one">问答精灵</em></div><br>


<img src="img.jpg" align="left" hspace="30" width="500" alt="图片" >
	

	<div class="box">
		•<em class="two">留足空间，字体并非弯弯曲曲的线条排列，</em>它主要在于周围和相互间的空间。<br>

•行宽是一行文字的长度，<em class="two">是一行文字的理想长度</em>，因为很难让每一行都精确吻合。<br>
•行距是行之间的空间，行距太紧凑，<em class="two">会让视线难以以行尾扫视到下一行首。</em><br>
•所有字体至少都有一种最佳状态，<em class="two">使字体在浏览器中愚能保持字形的抗锯齿选项。</em><br>
•你读的多数内容是<em class="two">居左对齐，右边沿参差不齐的</em>，这样看起来更<em class="two">有节奏。</em><br>
•增湿文字与背景对比的同时，我们也要<em class="two">减少不同层次文字间的反差</em>。<br>
•<em class="two">按比例调整宇间距</em>，为移动端调整字号时，要意识到字间距发生了必要的变化。
		<br></div>

		<hr size="2px">
		<em class="three">原文链接：
			<em class="link">http://www.woshipm.com/pd/136680.html</em>
				文章分类：<em class="link">艺术设计</em></em>
</body>
</html>

###欢迎加入QQ群一同交流学习937864538
# css # html5 # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟