简单后台+简单CSS

Css选择器权重

1.行内样式
2.ID选择器
3.类选择器
4.标签选择器
简单后台代码

代码部分

<title>后台管理系统</title>
  </head>
  <body>
   <header>
          <div class="top"> 
             <img class="jh" src="./images/jh.jpg" alt="">
             <p class="top_text">火星警局管理后台</p>
          </div>
  </header>
 <aside>
  <div class="memu_1">
      <a class="memu" href="https://www.baidu.com" target="content">百度菜单</a><br />
      <a class="memu" href="https://www.php.cn" target="content">php菜单</a><br />
      <a class="memu" href="https://www.163.com" target="content">网易菜单</a><br />
      <a class="memu" href="https://www.qq.com" target="content">腾讯菜单</a><br />
      <a class="memu" href="https://www.weixn.com" target="content">微信菜单</a><br />
  </div>
</aside>
<main>
  <div class="box">
 <iframe class="main" srcdoc="欢迎使用火星管理系统" name="content"></iframe>
  </div>
</main>
<footer>本程序由火星公司开发</footer>  
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      .jh{
          width: 30px;
          float: left;
          padding-top: 10px;
          }
      .top_text{
          line-height: 40px;
          color: crimson;
          font-size: 20px;
          text-indent: 1em;
      }
      header{
          background-color: blue;
          width: 100%;
          height: 50px;
      }
      .top{
        padding-left: 80px;
      }
      .memu_1{
          width: 100px;
          text-align: center;
      }
      .memu{
          text-decoration: none;
          color: cadetblue;
          line-height: 30px;
          border: 1px solid;
      }
      aside{
          background-color: #ccc;
          width: 7%;
          height:800px;
          float: left;
      }
      .main{
          width: 92%;
          height: 797px;
      }
      footer{
          background-color: cadetblue;
          height: 80px;
          text-align: center;
          line-height: 80px;
      }
  </style>

代码运行结果

Css选择器权重

简单后台代码

相关文章