新建2个文档一个存放css,一个存放需要的img图片
创建一个html文档，超文本标记语言书写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index_div.css">
<title>盒子模型</title>
</head>
<body>
<div class="box">
<div class="box_main">
<h1>
心之旅途
</h1>
<img src="img/图层 1.png" alt="" class="b1_img">
<img src="img/矩形 1.png" alt="" class="b1_img">
<img src="img/pic (3).png" alt="" class="b2_img">
<p>人生就是一次充满未知的旅行，在乎的是沿途的风景，在乎的是看风景的心情，旅行不会因为美丽的风景终止。走过的路成为背后的风景，不能回头不能停留，若此刻停留，将会错过更好的风景。</p>
<span>
独行旅者 · 2020-12-12
</span>
</div>
</div>
</body>
</html>
在css文档中创建一个css文件
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
height: 800px;
}
.box_main{
width: 580px;
margin: 0 auto;
}
.box_main h1{
font-size: 30px;
margin-top: 120px;
}
.b1_img{
display: block;
float: left;
}
.b2_img{
display: block;
margin-top: 35px;
margin-left: -12px;
}
.box_main p{
font-size: 18px;
margin-top: 20px;
line-height: 36px;
}
.box_main span{
font-size: 18px;
line-height: 36px;
float: right;
}