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>