請用html5標準完成以下頁面佈局(要求完整書寫整個頁面的html代碼,不需要寫CSS)

(1)、請用html5標準完成以下頁面佈局(要求完整書寫整個頁面的html代碼,不需要寫CSS)

<!--  寫得有點羅嗦,裏面很多css可以歸納出來一個的,另外,這個頁面也具有響應式web設計的味道,瀏覽器縮小,相應版塊也會適當縮小-->


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf8">
   <style>

    body{margin:0;padding:0;}

     header{
      border:solid 1px #CCC;
      border-radius:5px 5px 5px 5px;
      text-align:center;

     }
     .h20{height:60px;}
     .h40{height:40px;}
     .h500{height:500px;}
     nav{
      border:solid 1px #CCC;
      border-radius: 5px 5px 5px 5px;
      margin:30px 0;
      text-align: center;
     }
     article{
      border:solid 1px #CCC;
      border-radius:5px 5px 5px 5px;
      margin:20px 25%;
      position:absolute; 
      width:74%;
      text-align: center;

     }
     aside{
      border:solid 1px #ccc;
      border-radius:5px 5px 5px 5px;
      margin:20px 0 0 10px;
      width:20%;
      text-align: center;
      float:left;
     }
     footer{
      border:solid 1px #CCC;
      border-radius:5px 5px 5px 5px;
      margin:20px 0;
      margin-top:540px; 
      text-align: center;
     
     }
    .hauto{
      border:none 1px #CCC;
      border-radius:5px 5px 5px 5px;
      margin:auto 0;
      width:100%;
      text-align: center;

    }
   </style>
 
  </head>

  <header class="h20">頁頭</header>
  <nav class="h40">導航 </nav>
  <body>
  <article class="hauto">

    <aside class="h500"> 側邊欄</aside>
    
    <article class="h500"> 內容區 </article>
  
    <footer class="h40">頁尾</footer>
  </article>

  </body>

</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章