web前端中制作简单页面实现让文字在图片旁边_web前端在图片周围显示-CSDN博客

本文链接：https://blog.csdn.net/galaxyrt/article/details/117387134

如图所示

下面是源代码：

<!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>