雨巷 html css （vs code）

最新推荐文章于 2025-05-08 18:32:47 发布

热风暴

最新推荐文章于 2025-05-08 18:32:47 发布

阅读量155

点赞数 3

文章标签：前端 html css

本文链接：https://blog.csdn.net/2401_82506219/article/details/145244527

版权

素材

1.jpg

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>雨巷</title>
        <link rel="stylesheet" style="text/css" href="yux.css"/>
    </head>
    <body>
        <div class="pic_news">
            <h1> 雨巷</h1>
            <h2>戴望舒</h2>
            <p><img src="1.jpg" alt="" /></p>
            <p> 撑着油纸伞，独自
                彷徨在悠长、悠长
                又寂寥的雨巷，
                我希望逢着
                一个丁香一样的
                结着愁怨的姑娘。 </p>
            <p>她是有
                丁香一样的颜色，
                丁香一样的芬芳，
                丁香一样的忧愁，
                在雨中哀怨，
                哀怨又彷徨； </p>
            <p>她彷徨在寂寥的雨巷，
                撑着油纸伞，
                像我一样，
                像我一样地
                默默踟躇着
                冷漠、凄清，又惆怅。 </p>
            <p>她默默地走近，
                走近，又投出
                太息一般的眼光
                她飘过
                像梦一般地，
                像梦一般地凄婉迷茫。 </p>
            <p>像梦中飘过
                一枝丁香地，
                我身旁飘过这个女郎；
                她静默地远了，远了，
                到了颓圮的篱墙，
                走尽这雨巷。 </p>
            <p>在雨的哀曲里，
                消了她的颜色，
                散了她的芬芳，
                消散了，甚至她的
                太息般的眼光
                丁香般的惆怅。 </p>
            <p>撑着油纸伞，独自
                彷徨在悠长、悠长
                又寂寥的雨巷，
                我希望飘过
                一个丁香一样的
                结着愁怨的姑娘。 </p>
        </div>
    </body>
</html>

css

.pic_news { width: 800px; /* 控制内容区域的宽度，根据实际情况考虑，也可以不需要 */ }
.pic_news h2 {
    font-family: "隶书";
    font-size: 24px;
    text-align: right;
}
.pic_news img {
    float: left; /* 使图片旁边的文字产生浮动效果 */
    margin-right: 5px;
    height: 250px;
}

运行效果