HTML5经典案例学习-----新元素添加文档结构

直接上代码了，大家如果发现问题了，记得提醒我哦，谢谢啦，嘻嘻

　　　

  1 <!DOCTYPE html>   <!-- 不区分大小写 -->
  2 <html lang="en">   <!-- 指定语言 -->
  3 <head>
  4     <meta charset="UTF-8">   <!-- 指定字符集 -->
  5     <title>Document</title>
  6     <style>
  7     /* 样式化结构元素 */
  8         header,footer,nav,article,aside,section{
  9             display: block;
 10         }
 11         body{
 12             padding-top:80px; 
 13         }
 14         a{
 15             text-decoration: none;
 16         }
 17         header{
 18             height: auto;
 19             position: fixed;
 20             top: 0px;
 21             left: 0px;
 22             width: 100%;
 23             height: 80px;
 24             padding: 0px 30px;
 25             background: gray;
 26         }
 27         header>h1{
 28             display: inline-block;
 29         }
 30         header>nav{
 31             float: right;
 32             margin-top: 20px;
 33             margin-right: 50px;
 34         }
 35         nav>ul>li{
 36             list-style: none;
 37             float: left;
 38             display: inline-block;
 39             margin: 0px 10px;
 40         }
 41         article{
 42             float: right;
 43             width: 60%;
 44             margin: 50px 0px;
 45             background: #E0EEE0;
 46         }
 47         aside{
 48             width: 30%;
 49             float: left;
 50             background: #B0E2FF;
 51         }
 52         footer{
 53             position: fixed;
 54             bottom: 0px;
 55             left: 0px;
 56             text-align: center;
 57             display: block;
 58             width: 100%;
 59             background: #C1CDCD;
 60         }
 61     </style>
 62 </head>
 63 <body>
 64     <!-- 样式需要自己添加 -->
 65     <header>
 66         <h1>
 67             <abbr title="Hypertext Markup Language">HTML</abbr>5,for Fun &amp; Profit
 68         </h1>
 69         <nav>
 70             <ul>
 71                 <li><a href="/Archive">Archive</a></li>
 72                 <li><a href="/About">About</a></li>
 73             </ul>
 74         </nav>
 75     </header>
 76     <article>
 77         <h2>
 78             <code>nav</code> Isn't for <em>All</em> Links
 79         </h2>
 80         <p>
 81             Though the <code>nav</code> element often contains links, that doesn't mean that
　　　　　　　　　 <em>all</em> links on a site need <code> nav</code>.
 82         </p>
 83     </article>
 84     <article>
 85         <h2>
 86             You've Got the <code>DOCTYPE</code>. Now What?
 87         </h2>
 88         <p>
 89             HTML5 isn't an all or nothing proposition. You can pick and choose what works best for you. So once you have the
　　　　　　　　 <code>DOCTYPE</code> in place, you should explore.
 90         </p>
 91     </article>
 92     <aside>
 93         <h2>HTML5 Elsewhere</h2>
 94         <p>Feed your HTML5 fix with resourses from our partners:</p>
 95         <ul>
 96             <li>
 97                 <a href="http://lovinghtml5.com">Loving HTML5</a>
 98             </li>
 99             <li>
100                 <a href="http://semanticsally.com">Semantic Sally</a>
101             </li>
102         </ul>
103     </aside>
104     <footer>
105         <p>
106             Copyright &copy; 2011 <a href="http://html5funprofit.com">HTML5, for Fun &amp; Profit</a>. All rights reserved.
107         </p>
108     </footer>
109     <script>
110         //IE9之前的IE版本，必须添加一些JS，使得IE识别这些元素，并允许对它们进行样式化
111         document.createElement('header');
112         document.createElement('footer');
113         document.createElement('nav');
114         document.createElement('article');
115         document.createElement('aside');
116         document.createElement('section');
117         //然而，好像IE9以下没有用啊，是我写错了吗？
118     </script>
119 </body>
120 </html>

 

posted @ 2017-03-18 14:43  聂小恶  阅读(246)  评论(0)  编辑  收藏  举报