网页设计与开发-实验报告-3

最新推荐文章于 2024-08-08 15:03:10 发布

笨笨的企鹅

最新推荐文章于 2024-08-08 15:03:10 发布

阅读量313

点赞数

分类专栏： Web前端文章标签： css 前端

本文链接：https://blog.csdn.net/baiziyuandyufei/article/details/127473822

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇实验报告展示了如何使用CSS属性实现诗词的排版效果。通过设置`

`、`

`和`

`等元素的font-family、font-size、color、line-height等属性，以及背景图片和内内外边距，创建了一个具有古风特色的诗词展示页面。重点突出了李清照《如梦令》的排版设计，包括字体选择、字号调整、行间距和颜色设定。

摘要由CSDN通过智能技术生成

网页设计与开发-实验报告-3

网页设计与开发-实验报告-3

网页设计与开发-实验报告-3

文字相关的CSS属性

属性名称	用途
font-family	设置字体
font-size	设置字号
letter-spacing	字间距
word-spacing	词间距
line-height	行间距常规比例为10:12，即用字10点，则行间距12点
color	文字颜色
段落p的padding	内边距
段落p的margin	外边距
font-weight	加粗字

矩形框标记`<div>`的CSS属性

属性名称	用途
background-color	背景色
background	背景图片 background:url(a.jpg);

学生实验

参照本章实验建立一个如下图所示的HTML文档

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <title>诗词排版效果</title>
        <style type="text/css">
            .poemAuthor{
                font-family:宋体;
                font-size:14px;
            }
	        .poemText{
                font-family:monospace;
                font-size:24px;
                font-weight:bold;
                letter-spacing:12px;
                line-height:2.5;
                color:#B22222;
            }
	        .poemComment{
                font-family:宋体;
                font-size:14px;
                letter-spacing:3px;
                line-height:1.5;
                text-align:left;
            }
            .emphasize{
                font-weight:bold;
            }
            div{
                width:650px;
                margin:0 auto;
                text-align:center;
                background:url(a.jpg);
                padding: 20px;
            }
            H1{
                font-family:黑体;
                font-size:44px;
                color:#B22222;
                letter-spacing:12px;}
        </style>
    </head>
        <body>
            <div>
                <p><h1>如梦令</h1></p>
                <p class="poemAuthor">【宋】李清照</p>
                <p class="poemText">
                    昨夜雨疏风骤，浓睡不消残酒。
                    <br>
                    试问卷帘人，却道“海棠依旧”。
                    <br>
                    “知否，知否？应是绿肥红瘦。”
                </p>
                <p class="poemComment">
                    <span class="emphasize">【作者简介】</span>
                    李清照（1084年3月13日～1155年5月12日）号易安居士，汉族，山东省济南章丘人。
                    宋代（南北宋之交）女词人，婉约词派代表，有“千古第一才女”之称。
                    所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。
                    形式上善用白描手法，自辟途径，语言清丽。
                    论词强调协律，崇尚典雅，提出词“别是一家”之说，反对以作诗文之法作词。
                    能诗，留存不多，部分篇章感时咏史，情辞慷慨，与其词风不同。
                    有《易安居士文集》《易安词》，已散佚。
                    后人有《漱玉词》辑本。今有《李清照集校注》。
                </p>
            </div>
        </body>
</html>