html5/CSS/盒子模型/＜div＞/实现一个图文混排的网页效果/动手实践

一、效果分析

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

二、开始实现

• 首先下载好图文素材，并将其保存在和准备建立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快捷键用浏览器打开进行预览。