页面布局基础，使用基本html标签和css层叠样式表对图文进行排版。
一、效果图1
二、源代码
html5
<div class="bg-w">
<div class="text">
<h1>悯农二首</h1>
<h3>唐李绅</h3>
<p> 锄禾日当午，</p>
<p> 汗滴禾下土。</p>
<p>谁知盘中餐，</p>
<p>粒粒皆辛苦。</p>
</div>
<img src="./img/img.png" alt="" class="img">
</div>css样式表
* {
margin: 0;
padding: 0;
list-style: none;
}
.bg-w {
margin: 50px auto;
border: 1px solid rgb(183, 36, 36);
width: 800px;
height: 300px;
padding: 100px 0 0 25px;
}
.text {
height: auto;
width: 200px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
h1,
h3,
p {
text-align: center;
}
p {
font-size: 28px;
}
.img {
position: absolute;
left: 650px;
top: 180px;
width: 400px;
height: 180px;
}二、效果图2
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黄鹤楼</title>
</head>
<body>
<style>
.section {
background-image: url(img/黄鹤楼.jpeg);/*如果需要替换图片，直接“./”（直接点斜杠，找到自己的图即可，不需要手动调整图片的大小）*/
background-repeat: round;
font: black normal 26px 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin: 150px auto 0 auto;
width: 800px;
height: 400px;
padding: 80px 0 0 100px;
}
.section a {
text-decoration: none;
}
.text {
background: rgba(196, 194, 194, 0.5);
border-radius: 8%;
border: 1px solid #cccc;
text-align: center;
width: 275px;
height: 300px;
}
</style>
<div class="section">
<article>
<div class="text">
<h1>
<a href="#">黄鹤楼</a>
</h1>
<h3>唐崔颢</h3>
<p>昔人已乘黄鹤去,此地空余黄鹤楼。</p>
<p> 黄鹤一去不复返,白云千载空悠悠</p>
<p>晴川历历汉阳树,芳草萋萋鹦鹉洲。</p>
<p>日暮乡关何处是?烟波江上使人愁。</p>
</div>
</article>
</div>
</body>
</html>