日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)建簡單的響應(yīng)式HTML5模版

HTML5目前發(fā)展勢頭良好，已經(jīng)逐漸得到大部分瀏覽器不同程度的支持。許多web開發(fā)者也已經(jīng)學(xué)習(xí)到了不少關(guān)于HTML 5的基礎(chǔ)知識并開始試圖使用HTML 5制作網(wǎng)頁。與此同時(shí)，目前基于響應(yīng)式的網(wǎng)頁設(shè)計(jì)理念也得到了廣泛的認(rèn)同，開發(fā)者在開發(fā)基于HTML 5的網(wǎng)頁時(shí)，如果能創(chuàng)建響應(yīng)式的頁面，則會增色不少，特別是能適配各類移動終端。在本文中，讀者將學(xué)習(xí)到如何創(chuàng)建一個(gè)簡單的響應(yīng)式HTML 5模版。本文的讀者需要有一點(diǎn)HTML 5的基礎(chǔ)知識。

　　　
　　　

創(chuàng)建良好的HTML 5模版的特征有：

  • 新的特性應(yīng)該只是基于HTML、CSS、DOM和Javscript
  • 減少使用外部插件（如Flash）
  • 良好的容錯設(shè)計(jì)
  • 使用更多的標(biāo)簽而不是太多的腳本
  • HTML 5應(yīng)該是和設(shè)備無關(guān)的
  • 開發(fā)過程應(yīng)該是可視化的 

在本文中，使用Adobe Macromedia Dreamweaver進(jìn)行開發(fā)

步驟1 創(chuàng)建空白的HTML 5模版

首先，我們創(chuàng)建一個(gè)空白的模版，代碼很簡單，如下所示：

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

步驟2  增加HTML 5新標(biāo)簽

HTML 5中新增加了不少標(biāo)簽，如：

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

在頁面模版中，我們需要確保每個(gè)區(qū)域都能正確地對齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標(biāo)簽。代碼如下所示：

 
 
 
 
    
  
  
  
  
  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”，這個(gè)是稍候用來做meida query的時(shí)候調(diào)整全局CSS樣式調(diào)整用的
    步驟3  往HTML 5標(biāo)簽中增加代碼
    a) 首先往標(biāo)題中增加如下代碼：

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

    b) 往

     

    #p#

    b) 使用

    標(biāo)簽來描述每一個(gè)要展示的內(nèi)容實(shí)體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內(nèi)容就可以使用
    標(biāo)簽了。如下代碼所示：

     
 
 
 
      
  
  
  
  
    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) 加上最后的

    標(biāo)簽，代碼為：

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2. Copyright@ 2013 HTML5.com
     
  • Privacy Policy - About Us
    •  
  •  

    • 最后運(yùn)行的效果如下：

    步驟4 　增加CSS樣式
    　　    首先創(chuàng)建一個(gè)空白的樣式，如下：

     
 
 
 
      
  
  
  
  
    1.  
      2.

    然后在http://necolas.github.com/normalize.css/中下載這個(gè)css,然后將其內(nèi)容復(fù)制到該空白的文件中代碼如下：

    #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  為移動應(yīng)用使用@media query查詢
    　　為了進(jìn)行響應(yīng)式設(shè)計(jì)，最佳的方案是使用@media query去進(jìn)行查詢，在上面的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到標(biāo)簽中
    　　這里推薦使用Modernizr 和html5shiv，它們都是一個(gè)能在多種瀏覽器中通過運(yùn)行各種腳本兼容運(yùn)行支持大部分HTML 5標(biāo)簽的插件。我們將它們和jQuery庫放在標(biāo)簽前，

    代碼如下：

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

    最后運(yùn)行效果如圖：

    讀者可以將自己的屏幕分辨率調(diào)整到768px或者468px,會發(fā)現(xiàn)頁面依然能隨著分辨率的改變而改變自適應(yīng)，沒出現(xiàn)任何問題。讀者可以在這個(gè)基礎(chǔ)上進(jìn)行擴(kuò)充調(diào)整這個(gè)HTML 5模版，以適應(yīng)自己的需求。

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


    網(wǎng)頁標(biāo)題：創(chuàng)建簡單的響應(yīng)式HTML5模版
    網(wǎng)頁網(wǎng)址：http://www.5511xx.com/article/cccjphc.html