homework

佚名 6年前 (2019-04-17) 随笔 414人围观抢沙发百度已收录

尽量使用语义明确的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5</title>
    <link rel="stylesheet" href="./HTML5.css">
</head>
<body>
<!--头部导航栏-->
 <header>
     <nav id="nav">
         <ul>
             <li><a href="https://www.baidu.com" class="active">百度一下</a></li>
             <li><a href="https://www.google.com">谷歌一下</a></li>
             <li><a href="https://www.yahoo.com">雅虎一下</a></li>
             <li><a href="https://www.yahoo.com">雅虎一下</a></li>
             <li><a href="https://www.yahoo.com">雅虎一下</a></li>
         </ul>
     </nav>
 </header>

<!--侧边菜单-->
 <aside>
     <div id="menu">
       <button>close</button>
      <ul>
          <li>
              <h3><span class="glyphicon glyphicon-hdd"></span> Dashboard</h3>
              <ul>
                 <li><a href="#">set</a></li>
                 <li><a href="#">test</a></li>
                 <li><a href="#">css3</a></li>
                 <li><a href="#">html</a></li>
              </ul>
          </li>
           <li>
              <h3><span class="glyphicon glyphicon-tasks"></span> Tasks</h3>
              <ul>
                 <li><a href="#">vue</a></li>
                 <li><a href="#">anguler</a></li>
                 <li><a href="#">react</a></li>
                 <li><a href="#">jquery</a></li>
              </ul>
          </li>
           <li>
              <h3><span class="glyphicon glyphicon-hdd"></span> Calender</h3>
              <ul>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
              </ul>
          </li>
           <li>
              <h3><span class="glyphicon glyphicon-heart"></span> Favourites</h3>
              <ul>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
              </ul>
          </li>
      </ul>
  </div>

 </aside>

<!--主要区域-->
 <main>
     <div class="main_m">
     <h1>一级标题</h1>
         <hr>
      <article>
          <h2>二级标题</h2>
          <p>正文如下:</p>
          <p>第一个段落，民主富强和谐</p>
          <p>第二个段落，民主富强和谐</p>
          <p>第三个段落，民主富强和谐</p>
          <p>第四个段落，民主富强和谐</p>
          <p>第五个段落，民主富强和谐</p>
          <p>第六个段落，民主富强和谐</p>
      </article>
         <hr>
     <h3>三级标题</h3>
         <hr>
     <h4>四级标题</h4>
         <hr>
     <h5>五级标题</h5>
         <hr>
     <h6>六级标题</h6>
     </div>
 </main>

<!--尾部版权等区域-->
 <footer>
     <div>
      <p>Copyright © 2019-2099 Frank, All rights resrerved.</p>
     </div>
 </footer>

</body>
</html>

css

body ,ul{margin: 0; padding: 0;height:100%;}
ul{list-style:outside none none;     }
#nav{
    width: 100%;
    height: 45px;
    background-color: #459df5;
}

#nav ul{
    margin: 0 auto;
    width: 1000px;
}

#nav li{
      display: inline-block;
      width: 120px;
      height: 45px;
      line-height: 45px;
      float: left;
 }

 #nav li a{
    text-decoration: none;
    color: white;
    display: block;
    text-align: center;
    font-size: 20px;
 }

  #nav li a:hover{
    background-color: #338ce6;
  }

 .active{
    background-color: #338ce6;
 }


 *{
            margin: 0;
            padding: 0;
        }


        #menu{
            width: 300px;
            float: left;
            background: #3b3b3b;;
            height: 600px;
            color: #fff;          <--隐藏侧边栏-->
            transform: translateX(-300px);
            padding-left: 20px;
            transition: all .5s ease;
        }
       #menu button{
            font-size: 30px;
            background: #3b3b3b;
            border: none;
            position: relative;
            left: 120px;
            top: 0px;
            margin: 20px;
        }
        #menu li {
            list-style: none;
            font-size: 20px;
            padding-top: 10px;
        }
        #menu li>h3{
            cursor: pointer;
        }
        #menu li a{
            color: #fff;
            text-decoration: none;
            text-indent: 13px;
            margin-left: 40px;;

        }
        #menu li>ul{
            display: none;
        }
        #menu ul ul li>a:hover{
            display: block;
            width: 236px;
            border-left: 6px solid rgb(95, 255, 76);
            background: #000;
            transform: translate3d(3px,3px,0);
            transition: all 200ms ease ;
        }

        button{
            font-size: 30px;
            background: #3b3b3b;
            border: none;
            position: relative;
            left: 0px;
            top: 0px;
            margin: 20px;
            display: none;
        }
        #content{
            float: left;
            transform: translateX(-300px);
            transition: all .5s ease ;
        }
        #content  button{
            width: 60px;
            height: 60px;
            background: rgba(68, 181, 255, 0.95);
            color: #fff;
            font-size: 14px;
            border-radius: 4px;
            box-shadow: 2px 2px 2px #23527c;
        }
        .menu-change{
            trsform:translateX(0px);
            transition: all .5s ease;
        }

        main{height:100%;min-height:100%;}

        .main_m{padding-bottom:60px;height:10px;}

        footer{position:absolute; left:50%; bottom:4px; width:100%; height:50px; margin-left:-50px;}