请用html5标准完成以下页面布局(要求完整书写整个页面的html代码,不需要写CSS)

来源:互联网 发布:淘宝美工工具 编辑:程序博客网 时间:2024/05/21 19:38

(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>


0 0
原创粉丝点击