如图所示
下面是源代码:
<!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>Document</title>
<style>
.container{
width:800px;
height:300px;
background-color: turquoise;
border:solid 2px greenyellow;
border-radius:30px;
margin:0 auto;
}
.num{
width:60px;
height:60px;
border:6px solid deepskyblue;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 30px;
color: forestgreen;
margin:0 auto;
}
.pic{
width:180px;
height:300px;
float:left;
}
img{
width:180px;
height:280px;
margin-left:50px;
margin-top:10px;
margin-bottom:10px;
}
.news{
float:right;
width:500px;
height:300px;
}
h3{
margin:0 auto;
font-family: "楷体";
color:lightpink;
}
p{
font-family: "楷体";
}
</style>
</head>
<body>
<div class="container">
<div class="pic">
<img src="images/b4.jpg" alt="">
</div>
<div class="news">
<div class="num">一</div>
<h3>书法</h3>
<p>该诗写于1972年。余光中的祖籍是福建永春,他于1949年离开大陆去台湾。[5]当时由于政治原因,台湾和大陆长时间的隔绝,致使余光中多年没有回过大陆。他一直思念亲人,渴望祖国的统一和亲人的团聚。在强烈的思乡之情中,诗人在台北厦门街的旧居内写下了这首诗。</p>
</div>
</div>
<div class="container">
<div class="pic">
<img src="images/a11.jpg" alt="">
</div>
<div class="news">
<div class="num">二</div>
<h3>书法</h3>
<p>该诗写于1972年。余光中的祖籍是福建永春,他于1949年离开大陆去台湾。[5]当时由于政治原因,台湾和大陆长时间的隔绝,致使余光中多年没有回过大陆。他一直思念亲人,渴望祖国的统一和亲人的团聚。在强烈的思乡之情中,诗人在台北厦门街的旧居内写下了这首诗。</p>
</div>
</div>
<div class="container">
<div class="pic">
<img src="images/a10.jpg" alt="">
</div>
<div class="news">
<div class="num">三</div>
<h3>故宫</h3>
<p>该诗写于1972年。余光中的祖籍是福建永春,他于1949年离开大陆去台湾。[5]当时由于政治原因,台湾和大陆长时间的隔绝,致使余光中多年没有回过大陆。他一直思念亲人,渴望祖国的统一和亲人的团聚。在强烈的思乡之情中,诗人在台北厦门街的旧居内写下了这首诗。</p>
</div>
</div>
</body>
</html>