1210作业(iframe与css基础）

创建一个后台操作界面

代码如下

    <header>
        <ul>
    <li><a href="1.html"></a></li>
            <li><a href="2.html">管理首页</a></li>
            <li><a href="3.html">数据管理</a></li>
            <li><a href="4.html">用户管理</a></li>
            <li><a href="5.html">网站首页</a></li>
        </ul>
    </header>
    <div class="container">
        <aside>
        <ul>
            <li><a href="1.html" target="webht">网站设置</a></li>
            <li><a href="2.html" target="webht">添加栏目</a></li>
            <li><a href="3.html" target="webht">添加文章</a></li>
            <li><a href="1.html" target="webht">友情链接</a></li>
            <li><a href="3.html" target="webht">模板设置</a></li>
        </ul>
        </aside>
        <main>
            <iframe srcdoc="<h1>迷你后台管理系统</h1>" name="webht"></iframe>
        </main>    
    </div>
    <footer><p>版权所有@SHU.KIM</p></footer>

css样式如下

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
  }
  body {
    width: 100vw;
    height: 100vh;
    display: grid;
    gap: 2px;
    grid-template-rows: 50px 1fr 50px;
  }
  header{
    background-color:#3d4466;
    text-align: center;
  }
  header li{
      float: left;
      list-style-type: none;
      padding: 5px;
      line-height: 40px;
      font-weight: bold;
    }
  header li a{
      color:#e2c4c4;
      padding: 2px 22px 2px 2px;
}
  footer {
    background-color:rgb(85, 81, 81);
    text-align: center;
    line-height: 50px;
    color: white;
  }
  .container {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
    padding: 10px;
    background-color:#8baeaf;
  }
  .container > aside {
    background-color: #d5f5f7;
    text-align: center;
  }
  aside li,a{
      margin-top: 20px;
      height: 30px;
      color:#5a2929;
  }
  .container > main {
    display: grid;
    background-color:mintcream;
    text-align: center;
    padding: 10px;
  }
  main iframe{
      border: 0;
      width: 100%;
      height: 100%;
  }

示例如下图

图下演示元素样式的四个来源

样式的优先级如下

标签选择器 < 类选择器 < ID选择器
强制优先等级 !important