10.19作业后台管理和简单选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
    a{
        text-decoration: none;
        color:black;
        border: 1px solid red;
    }
    /* 标签选择器 */
    h1{
            color: blue;
        }
        /* 属性选择器 
           class='h2'
           id='h2'
        */
        .h2{
            color: yellow;
        }
        #h2{
            color:purple;
        }
        /* 群组选择器 */
        h4,h5,h6{
            color:darkred;
        }
    </style>
</head>
<body>
    <h1>后台管理界面</h1>
    <nav>
    <a href="" target="content">首页</a>
    <a href="" target="content">我的收益</a>
    <a href="" target="content">广告列表</a>
    <a href="" target="content">我的广告位</a>
    <a href="" target="content">历史数据</a>
    </nav>
    <iframe srcdoc="<h1>后台管理界面，请选择导航栏</h1>" name="content" width="100%"></iframe>
    <h1>你好，皮皮</h1>
<h2 class="h2">你不好，皮皮</h2>
<h3 id="h2">你好不好，皮皮</h3>
<h4>你好，皮皮</h4>
<h5>你好，皮皮</h5>
<h6>你好，皮皮</h6>
</body>
</html>

代码展示如下

代码展示图

10.19作业 后台管理 和简单选择器

代码展示如下

相关文章