基于Web实现诗词欣赏网页——钱塘湖春行

最新推荐文章于 2024-04-23 18:18:03 发布

A_蓝小胖

最新推荐文章于 2024-04-23 18:18:03 发布

阅读量4.2k

点赞数 5

分类专栏： HTML Web应用文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_56069849/article/details/126635957

版权

HTML 同时被 2 个专栏收录

5 篇文章 4 订阅

订阅专栏

Web应用

5 篇文章 1 订阅

订阅专栏

来自Web网页应用时的学习，记录一下学习过程，本作品代码仅供参考。

一、代码：

<!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>
    <style>
        #textbox{
            border: 2px solid rgb(41, 40, 40);
            text-align: center;
            width: 850px;
            margin: 20px auto;
            margin-top: 0%;
            height: 500px ;
        }
        .title{
            color: rgb(116, 0, 0);
            font-size: 40px;
            font-weight: bold;
            font-family: 楷体;
        }
        #a{
            text-align: left;
            position: fixed;
            margin: 10px 5px;
        }
        .author{
            color: rgb(116, 0, 0);
            font-weight: bold; 
            font-family: 隶书;
            font-size: 20px;
        }
        #text{
            height: 45%;
            position: relative;
            width: 550px;
        }
        #left{
            width: 510px;
            height: 225px;
            margin-left: 25px;
            position: fixed;
        }
        #left p{
            margin-top: 35px;
            position: relative;
            letter-spacing: 4px;
            line-height: 40px;
            font-family: 方正姚体;
            color: rgb(116, 0, 0);
            font-size: x-large;
        }
        #right{
            margin-left: 505px;
            width: 330px;
            height: 225px;
            position: fixed;
        }
        #right img{
            text-align: left;
            margin-top: 10px;
            height: 210px;
            width: 160px;
        }
        #footer{
            text-align: left;
            margin-top: 40px;
        }
        #footer p{
            font-family: 楷体;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div id="textbox">
        <div id="a"><a href="">返回</a></div>
        <span class="title">钱塘湖春行</span>
        <p><span class="author">唐代：白居易</span></p>
        <hr color="green" size="5px">
        <div id="text">
                <div id="left">
                    <p>
                    孤山寺北贾亭西，水面初平云脚低。<br>
                    几处早莺争暖树，谁家新燕啄春泥。<br>
                    乱花渐欲迷人眼，浅草才能没马蹄。<br> 
                    最爱湖东行不足，绿杨阴里白沙堤。
                    </p>
                </div>
                <div id="right">
                    <img src="images/bjy.jpg" alt="">
                </div>
        </div>
        <div id="footer">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;简介: 白居易（772年－846年），字乐天，号香山居士，又号醉吟先生，祖籍太原，到其曾祖父时迁居下邽，生于河南新郑。白居易是唐代伟大的现实主义诗人，唐代三大诗人之一。白居易与元稹共同倡导新乐府运动，世称“元白”，与刘禹锡并称“刘白”。白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。</p>
        </div>
    </div>
</body>
</html>

二、结果展示：