自贡网站建设公司

创建简单的响应式HTML5模版

HTML5目前发展势头良好，已经逐渐得到大部分浏览器不同程度的支持。许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页。与此同时，目前基于响应式的网页设计理念也得到了广泛的认同，开发者在开发基于HTML 5的网页时，如果能创建响应式的页面，则会增色不少，特别是能适配各类移动终端。在本文中，读者将学习到如何创建一个简单的响应式HTML 5模版。本文的读者需要有一点HTML 5的基础知识。

　　　
　　　

创建良好的HTML 5模版的特征有：

  • 新的特性应该只是基于HTML、CSS、DOM和Javscript
  • 减少使用外部插件（如Flash）
  • 良好的容错设计
  • 使用更多的标签而不是太多的脚本
  • HTML 5应该是和设备无关的
  • 开发过程应该是可视化的 

在本文中，使用Adobe Macromedia Dreamweaver进行开发

步骤1 创建空白的HTML 5模版

首先，我们创建一个空白的模版，代码很简单，如下所示：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.

步骤2  增加HTML 5新标签

HTML 5中新增加了不少标签，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.  
    18.
 
  •  
  •  
  •  

    • 读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的
    步骤3  往HTML 5标签中增加代码
    a) 首先往标题中增加如下代码：

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. 　Simple HTML5 Template 
      4.   
  
  
  
    4.  
      5.

    b) 往

     

    #p#

    b) 使用

    标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用
    标签了。如下代码所示：

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4. This is a title for post 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. Richard KS 
      8.   
  
  
  
    8. 20th March 2013 
      9.   
  
  
  
    9. Tutorials 
      10.   
  
  
  
    10. HTML5, CSS3 and Responsive 
      11.   
  
  
  
    11. 10 Comments 
      12.
     
  •  
  •  
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
  •  
  •  
  •  
  •  

    • d) 添加

     
  •  
  •  
  •  
  •  

    • e) 加上最后的

     

    最后运行的效果如下：

    步骤4 　增加CSS样式
    　　    首先创建一个空白的样式，如下：

     
 
 
 
      
  
  
  
  
    1.  
      2.

    然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下：

    #p#

     
 
 
 
      
  
  
  
  
    1. body { 
      2.   
  
  
  
    2. font-family: arial, sans-serif; 
      3.   
  
  
  
    3. font-size: 100%; /* best for all browser using em */ 
      4.   
  
  
  
    4. padding:0;  
      5.   
  
  
  
    5. margin:0; 
      6.   
  
  
  
    6. } 
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. *, html { line-height: 1.6em; } 
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10. article img { width:auto; max-width:100%; height:auto; } 
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12. .sidebar a, article a, header a, footer a { color: #C30; } 
      13.   
  
  
  
    13. header a { text-decoration: none; } 
      14.   
  
  
  
    14.  
      15.   
  
  
  
    15. #wrapper { 
      16.   
  
  
  
    16. font-size: 0.8em; /* 13px from 100% global font-size */ 
      17.   
  
  
  
    17. max-width: 960px; /* standard 1024px wide */ 
      18.   
  
  
  
    18. margin: 0 auto; 
      19.   
  
  
  
    19. } 
      20.   
  
  
  
    20.  
      21.   
  
  
  
    21. /* css for 
       */ 
      22.   
  
  
  
    22. header { 
      23.   
  
  
  
    23.     padding: 1em 0; 
      24.   
  
  
  
    24.     margin: 0px; 
      25.   
  
  
  
    25.     float: left; 
      26.   
  
  
  
    26.     width: 100%; 
      27.   
  
  
  
    27. } 
      28.   
  
  
  
    28. header hgroup { width: 100%; font-weight:normal; } 
      29.   
  
  
  
    29.  
      30.   
  
  
  
    30.  
      31.   
  
  
  
    31. /* css for 
      32.   
  
  
  
    32. nav { 
      33.   
  
  
  
    33.     display: block; 
      34.   
  
  
  
    34.     margin: 0 0 2em; 
      35.   
  
  
  
    35.     padding: 0px; 
      36.   
  
  
  
    36.     float: left; 
      37.   
  
  
  
    37.     width: 100%; 
      38.   
  
  
  
    38.     background-color: #181919; 
      39.   
  
  
  
    39. } 
      40.   
  
  
  
    40. nav ul ul {display: none;} 
      41.   
  
  
  
    41. nav ul li:hover > ul {display: block;} 
      42.   
  
  
  
    42.      
      43.   
  
  
  
    43. nav ul { 
      44.   
  
  
  
    44.     padding: 0; 
      45.   
  
  
  
    45.     list-style: none; 
      46.   
  
  
  
    46.     position: relative; 
      47.   
  
  
  
    47.     display: inline-table; 
      48.   
  
  
  
    48.     z-index: 9999; 
      49.   
  
  
  
    49.     margin: 0px; 
      50.   
  
  
  
    50.     float: left; 
      51.   
  
  
  
    51.     width: 100%; 
      52.   
  
  
  
    52. } 
      53.   
  
  
  
    53. nav ul:after {content: ""; clear: both; display: block;} 
      54.   
  
  
  
    54.  
      55.   
  
  
  
    55. nav ul li {float: left;} 
      56.   
  
  
  
    56.  
      57.   
  
  
  
    57. nav ul li:hover a {color: #fff;} 
      58.   
  
  
  
    58.  
      59.   
  
  
  
    59. nav ul li a { 
      60.   
  
  
  
    60.     display: block; 
      61.   
  
  
  
    61.     padding: 1em; 
      62.   
  
  
  
    62.     font-size: 1.125em; 
      63.   
  
  
  
    63.     color: #ccc; 
      64.   
  
  
  
    64.     text-decoration: none; 
      65.   
  
  
  
    65.     margin: 0px; 
      66.   
  
  
  
    66.     background-color: #000; 
      67.   
  
  
  
    67.     border-right: 1px solid #333; 
      68.   
  
  
  
    68. } 
      69.   
  
  
  
    69. nav ul li:last-of-type a {border-right: 1px solid transparent !important;} 
      70.   
  
  
  
    70.  
      71.   
  
  
  
    71. nav ul ul { 
      72.   
  
  
  
    72.     background: #5f6975; 
      73.   
  
  
  
    73.     border-radius: 0px; 
      74.   
  
  
  
    74.     padding: 0; 
      75.   
  
  
  
    75.     position: absolute; 
      76.   
  
  
  
    76.     top: 100%; 
      77.   
  
  
  
    77.     width: auto; 
      78.   
  
  
  
    78.     float: none; 
      79.   
  
  
  
    79. } 
      80.   
  
  
  
    80. nav ul li:hover { 
      81.   
  
  
  
    81.     background: #5f6975; 
      82.   
  
  
  
    82.     color: #FFF; 
      83.   
  
  
  
    83. } 
      84.   
  
  
  
    84. nav ul ul li a:hover { 
      85.   
  
  
  
    85.     background-color: #4b545f; 
      86.   
  
  
  
    86. } 
      87.   
  
  
  
    87.  
      88.   
  
  
  
    88. nav ul ul li { 
      89.   
  
  
  
    89. float: none; 
      90.   
  
  
  
    90. border-bottom: 1px solid #444240; 
      91.   
  
  
  
    91. position: relative; 
      92.   
  
  
  
    92. } 
      93.   
  
  
  
    93.  
      94.   
  
  
  
    94. nav ul ul li a { 
      95.   
  
  
  
    95. padding: 0.5em 1em; 
      96.   
  
  
  
    96. font-size: 1em; 
      97.   
  
  
  
    97. width:10em; 
      98.   
  
  
  
    98. color: #fff; 
      99.   
  
  
  
    99. }    
      100.   
  
  
  
    100.  
      101.   
  
  
  
    101.  
      102.   
  
  
  
    102. nav ul ul ul { 
      103.   
  
  
  
    103. position: absolute; left: 100%; top:0; 
      104.   
  
  
  
    104. } 
      105.   
  
  
  
    105.  
      106.   
  
  
  
    106. /* css for  */ 
      107.   
  
  
  
    107. section.content { width: 70%; float:left; } 
      108.   
  
  
  
    108. .content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; } 
      109.   
  
  
  
    109. article .entry { clear:both; padding: 0 0 1em; } 
      110.   
  
  
  
    110. h1.post-title { font-size: 1.8em; margin:0; padding:0;} 
      111.   
  
  
  
    111. .entry.post-meta { color: #888; } 
      112.   
  
  
  
    112. .entry.post-meta span { padding: 0 1em 0 0; } 
      113.   
  
  
  
    113. .entry.post-content { font-size: 1.125em; margin:0; padding:0;} 
      114.   
  
  
  
    114.  
      115.   
  
  
  
    115. /* css for  */ 
      116.   
  
  
  
    116. aside.sidebar { width: 25%; float:right; } 
      117.   
  
  
  
    117. aside.sidebar ul { 
      118.   
  
  
  
    118.     width:100%; 
      119.   
  
  
  
    119.     margin: 0px; 
      120.   
  
  
  
    120.     padding: 0px; 
      121.   
  
  
  
    121.     float: left; 
      122.   
  
  
  
    122.     list-style: none; 
      123.   
  
  
  
    123. } 
      124.   
  
  
  
    124. aside.sidebar ul li { 
      125.   
  
  
  
    125.     width:100%; 
      126.   
  
  
  
    126.     margin: 0px 0px 2em; 
      127.   
  
  
  
    127.     padding: 0px; 
      128.   
  
  
  
    128.     float: left; 
      129.   
  
  
  
    129.     list-style: none; 
      130.   
  
  
  
    130. } 
      131.   
  
  
  
    131. aside.sidebar ul li ul li { 
      132.   
  
  
  
    132.     margin: 0px 0px 0.2em; 
      133.   
  
  
  
    133.     padding: 0px; 
      134.   
  
  
  
    134. } 
      135.   
  
  
  
    135. aside.sidebar ul li ul li ul li { 
      136.   
  
  
  
    136.     margin: 0px; 
      137.   
  
  
  
    137.     padding: 0px 0px 0px 1em; 
      138.   
  
  
  
    138.     width: 90%; 
      139.   
  
  
  
    139.     font-size: 0.9em; 
      140.   
  
  
  
    140. } 
      141.   
  
  
  
    141. aside.sidebar ul li h3.widget-title { 
      142.   
  
  
  
    142.     width:100%; 
      143.   
  
  
  
    143.     margin: 0px; 
      144.   
  
  
  
    144.     padding: 0px; 
      145.   
  
  
  
    145.     float: left; 
      146.   
  
  
  
    146.     font-size: 1.45em; 
      147.   
  
  
  
    147. } 
      148.   
  
  
  
    148.  
      149.   
  
  
  
    149. /* css for 
       */ 
      150.   
  
  
  
    150. footer { 
      151.   
  
  
  
    151.     width: 98%; 
      152.   
  
  
  
    152.     float:left; 
      153.   
  
  
  
    153.     padding: 1%; 
      154.   
  
  
  
    154.     background-color: white; 
      155.   
  
  
  
    155.     margin-top: 2em; 
      156.   
  
  
  
    156. } 
      157.   
  
  
  
    157. footer .footer-left { width: 45%; float:left; text-align:left; } 
      158.   
  
  
  
    158. footer .footer-right { width: 45%; float:right; text-align:right; }  
      159.

    步骤5  为移动应用使用@media query查询
    　　为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：

     
 
 
 
      
  
  
  
  
    1. /* ipad 768px */ 
      2.   
  
  
  
    2. @media only screen and (min-width:470px) and (max-width:770px){ 
      3.   
  
  
  
    3. body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; } 
      4.   
  
  
  
    4. section.content, aside.sidebar { width:100%; } 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. /* iphone 468px */ 
      8.   
  
  
  
    8. @media only screen and (min-width:270px) and (max-width:470px){ 
      9.   
  
  
  
    9. body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; } 
      10.   
  
  
  
    10. section.content, aside.sidebar { width:100%; } 
      11.   
  
  
  
    11. }  
      12.

    步骤6 增加jquery,modernizer和html5shiv到标签中
    　　这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，

    代码如下：

     
 
 
 
      
  
  
  
  
    1. 　 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.

    最后运行效果如图：

    读者可以将自己的屏幕分辨率调整到768px或者468px,会发现页面依然能随着分辨率的改变而改变自适应，没出现任何问题。读者可以在这个基础上进行扩充调整这个HTML 5模版，以适应自己的需求。

    原文链接： http://www.dezzain.com/tutorials/creating-a-simple-responsive-html5-template/


    本文题目：创建简单的响应式HTML5模版
    网页链接：http://www.jxruijie.cn/article/cccjphc.html

    其他资讯