web_tests
/
基本css.htm

<!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>css选择器</title>
    <style>
        .biaoti{
            font-family: '黑体';
            font-size: 18px;
            font-weight: bold;
        }
        .symd{
            font-size: 20px;
            color: white;
            font-weight: bold;
            font-family: '微软雅黑';
            background-color: blue;
            font-style: italic;
        }
        a{
            color: greenyellow;
        }
        .synr > li > a{
            color: red;
        }
        #main_body{
            background-image: url("bg.jpg");
            background-position: center;
        }
    </style>
</head>
<body>
    <div id="main_body">
        <div style="margin-left: 10px;">
            <h1 style="text-align: center; font-size: 24px; font-family: '隶书'; font-weight: bold; margin: 0px;padding: 10px;">第5次  CSS基本选择器</h1>
            <p>注意：本试验指导文件即为<a href="http://www.baidu.com" target="_blank">第5次 CSS基本选择器.html</a>，以下实验项目均以本文件为操作对象。另除本行外，本网页中 其它超链接均为红色。</p>
            <p class="biaoti">一 实验目的</p>
            <ol class="symd">
                <li>掌握CSS样式的语法规则；</li>
                <li>掌握CSS样式的基本选择器的使用；</li>
                <li>掌握CSS样式表的定义位置；</li>
                <li>重点培养应用CSS样式的能力。</li>
            </ol>
            <p class="biaoti">二 实验内容</p>
            <ol class="synr" style="line-height: 20px; font-size: 15px; letter-spacing: 5px;">
                <li>使用<a href="http://www.baidu.com" target="_blank">行内样式表</a>修饰本页面中的第一行的文字为h1、居中、隶书，加粗，24px；</li>
                <li>使用嵌入样式表，创建一个名为biaoti的类选择器将本网页中所有二级标题（如“实验目的”等）变成黑体、18px、加粗；</li>
                <li>创建一个symd类用以修饰“实验目的”中的文字为斜体，微软雅黑，20px，白色，加粗，且背景为浅蓝色；</li>
                <li>所有的超链接是绿色；</li>
                <li>所有“实验内容”中的<a href="http://www.baidu.com" target="_blank">超链接</a>是红色、20px；</li>
                <li>使用CSS使得网页背景变为下图且不平铺居中置顶显示；</li>
                <li>将“实验内容”中各行之间的间距设至10px，已知字体是16px大小的，并设定字与字之间的间隔为5px。完成后，页面效果如下图将所示。</li>
                <li>请将图下面的诗《临洞庭上张丞相》变成类似下图白居易的诗的竖排的古文风格。</li>
            </ol>
            <table style="writing-mode: tb-rl;">
                <tr><td style="line-height:2">临洞庭上张丞相</td></tr>
                <tr><td style="text-align: end; line-height: 4;">唐. 孟浩然</td></tr>
                <tr><td>八月湖水平 涵虚混太清</td></tr>
                <tr><td>气蒸云梦泽 波撼岳阳城</td></tr>
                <tr><td>欲济无舟楫 端居耻圣明</td></tr>
                <tr><td>坐观垂钓者 徒有羡鱼情</td></tr>
            </table>
            <p style="padding-bottom: 10px;">说明：文本书写顺序属性writing-mode。</p>
        </div>
    </div>

</body>
</html>