2022-4-12

留照

已于 2022-04-12 22:17:49 修改

阅读量83

点赞数

分类专栏： JavaHomeWork 文章标签： html5 css java

于 2022-04-12 22:09:05 首次发布

原文链接：http://t.csdn.cn/efGLO

版权

JavaHomeWork 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

自己去网上找一片文章（或者诗词），编写成网页，要求：
1、整个文章居中显示，字体：微软雅黑（或者其他支持的字体）
2、如果是文章则每个段落首行缩进2个字符，诗词除外
3、作者信息： 0.5倍字符，带下划线，并斜体
4、使用任意一张图片作为背景，且背景固定不随内容的滚动滚动
5、内容多复制几份，实现滚动条，使用锚点实现返回顶部，去到底部等功能
6、其他功能越多越好，可自己发挥…

<!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>HW</title>
</head>
<style>
    p {
        font-size: 1.5em;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }

    #title {
        font-family: LiSu, STLiti, "Microsoft YaHei",
            微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
        color: rgb(6, 6, 6);
        font-size: 2em;
        font-weight: bolder;
    }

    #author {
        font-style: italic;
        font-size: 1.2em;
        text-decoration: underline rgba(6, 6, 6, 0.714) .1rem;
        text-indent: 9.5em;
        color: rgb(69, 66, 52);
    }

    span {
        color: #3c2104;
        line-height: 10px;
    }

    body {
        background-color: #bc9f7e;
        background-image: url(../css/2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        text-align: center;
    }

    #a1 {
        display: block;
        text-align: right;
        position: fixed;
        top: 50px;
        right: 200px;
    }

    #a2 {
        display: block;
        text-align: right;
        position: fixed;
        bottom: 50px;
        right: 200px;
    }
</style>

<body>
    <a id="a1" href="#bottom"><img src="../css/4.png"></a>
    <p id="title">兰亭序</p>
    <p id="author">周杰伦</p>
    <span>
        <p>兰亭临帖 行书如行云流水
        <p>月下门推 心细如你脚步碎
        <p>忙不迭 千年碑易拓
        <p>却难拓你的美
        <p>真迹绝 真心能给谁
        <p>牧笛横吹 黄酒小菜又几碟
        <p>夕阳余晖 如你的羞怯似醉
        <p>摹本易写 而墨香不退与你同留余味
        <p>一行朱砂 到底圈了谁
        <p>无关风月 我题序等你回
        <p>悬笔一绝 那岸边浪千叠
        <p>情字何解 怎落笔都不对
        <p>而我独缺 你一生的了解
        <p>无关风月 我题序等你回
        <p>悬笔一绝 那岸边浪千叠
        <p>情字何解 怎落笔都不对
        <p>而我独缺 你一生的了解
        <p>无关风月 我题序等你回
        <p>悬笔一绝 那岸边浪千叠
        <p>情字何解 怎落笔都不对
        <p>独缺 你一生了解
        <p>弹指岁月 倾城顷刻间湮灭
        <p>青石板街 回眸一笑你婉约
        <p>恨了没 你摇头轻叹谁让你蹙着眉
        <p>而深闺 徒留胭脂味
        <p>人雁南飞 转身一瞥你噙泪
        <p>掬一把月 手揽回忆怎么睡
        <p>又怎么会 心事密缝绣花鞋针针怨怼
        <p>若花怨蝶 你会怨着谁
        <p>无关风月 我题序等你回
        <p>悬笔一绝 那岸边浪千叠
        <p>情字何解 怎落笔都不对
        <p>而我独缺 你一生的了解
        <p>无关风月 我题序等你回
        <p>手书无愧 无惧人间是非
        <p>雨打蕉叶 又潇潇了几夜
        <p id="bottom">我等春雷 来提醒你爱谁
    </span>
    <a id="a2" href="#title"><img src="../css/3.png"></a>
</body>

</html>

在这里插入图片描述

留照

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022-4-12

<!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>HW
复制链接

扫一扫