编程笔记

编程笔记

html5/CSS/盒子模型/<div>/实现一个图文混排的网页效果/动手实践
2025-01-29

一、效果分析

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

二、开始实现
  • 首先下载好图文素材,并将其保存在和准备建立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>