欢乐颂小说结局是什么,盗墓笔记txt全集下载,手机推荐排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

創(chuàng)建簡(jiǎn)單的響應(yīng)式HTML5模版

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

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

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

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

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

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

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

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

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

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

讀者可能留意到這里使用的div id=”wrapper”，這個(gè)是稍候用來(lái)做meida query的時(shí)候調(diào)整全局CSS樣式調(diào)整用的
步驟3 往HTML 5標(biāo)簽中增加代碼
a) 首先往標(biāo)題中增加如下代碼：

 
 
 
 
  
  
  
     
  
  
     
  
  
  　Simple HTML5 Template

b) 往

導(dǎo)航標(biāo)簽中添加如下代碼，這樣很方便地構(gòu)件了一個(gè)簡(jiǎn)單的頁(yè)面分類(lèi)導(dǎo)航：

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
     
  
  
  
Home   
  
  
     
  
  
  
About   
  
  
     
  
  
  
Parent Page   
  
  
     
  
  
     
  
  
     
  
  
  
Child One   
  
  
     
  
  
  
Child Two with child   
  
  
     
  
  
     
  
  
     
  
  
  
Child One   
  
  
     
  
  
  
Child Two   
  
  
     
  
  
  
Child Three   
  
  
     
  
  
  
   
  
  
     
  
  
     
  
  
     
  
  
  
Child Three   
  
  
     
  
  
  
   
  
  
     
  
  
     
  
  
     
  
  
  
Contact

#p#

b) 使用

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

標(biāo)簽了。如下代碼所示：

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
  This is a title for post   
  
  
     
  
  
     
  
  
  Richard KS   
  
  
  20th March 2013   
  
  
  Tutorials   
  
  
  HTML5, CSS3 and Responsive   
  
  
  10 Comments

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) 添加

標(biāo)簽

HTML5提供的

元素標(biāo)簽用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分，可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組，以及其他類(lèi)似的有別與主要內(nèi)容的部分。

根據(jù)目前的規(guī)范，

元素有兩種使用方法：

1 被包含在

中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。

2 在

之外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分；最典型的形式是側(cè)邊欄(sidebar)，其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。

代碼如下：

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
  Categories   
  
  
     
  
  
  
Category 1   
  
  
  
Category 2   
  
  
  
Parent Category   
  
  
     
  
  
  
Child One   
  
  
  
Child Two   
  
  
     
  
  
  
Grandchild One   
  
  
  
Grandchild Two   
  
  
  
Grandchild Three   
  
  
  
   
  
  
     
  
  
  
Child Three   
  
  
     
  
  
     
  
  
  
Category 3   
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
  Text   
  
  
     
  
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.

e) 加上最后的

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

 
 
 
 
  
  
  
     
  
  
  Copyright@ 2013 HTML5.com

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

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

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

#p#

 
 
 
 
  
  
  
  body {   
  
  
  font-family: arial, sans-serif;   
  
  
  font-size: 100%; /* best for all browser using em */   
  
  
  padding:0;    
  
  
  margin:0;   
  
  
  }   
  
  
     
  
  
  *, html { line-height: 1.6em; }   
  
  
     
  
  
  article img { width:auto; max-width:100%; height:auto; }   
  
  
     
  
  
  .sidebar a, article a, header a, footer a { color: #C30; }   
  
  
  header a { text-decoration: none; }   
  
  
     
  
  
  #wrapper {   
  
  
  font-size: 0.8em; /* 13px from 100% global font-size */   
  
  
  max-width: 960px; /* standard 1024px wide */   
  
  
  margin: 0 auto;   
  
  
  }   
  
  
     
  
  
  /* css for  */   
  
  
  header {   
  
  
      padding: 1em 0;   
  
  
      margin: 0px;   
  
  
      float: left;   
  
  
      width: 100%;   
  
  
  }   
  
  
  header hgroup { width: 100%; font-weight:normal; }   
  
  
     
  
  
     
  
  
  /* css for  */   
  
  
  nav {   
  
  
      display: block;   
  
  
      margin: 0 0 2em;   
  
  
      padding: 0px;   
  
  
      float: left;   
  
  
      width: 100%;   
  
  
      background-color: #181919;   
  
  
  }   
  
  
  nav ul ul {display: none;}   
  
  
  nav ul li:hover > ul {display: block;}   
  
  
         
  
  
  nav ul {   
  
  
      padding: 0;   
  
  
      list-style: none;   
  
  
      position: relative;   
  
  
      display: inline-table;   
  
  
      z-index: 9999;   
  
  
      margin: 0px;   
  
  
      float: left;   
  
  
      width: 100%;   
  
  
  }   
  
  
  nav ul:after {content: ""; clear: both; display: block;}   
  
  
     
  
  
  nav ul li {float: left;}   
  
  
     
  
  
  nav ul li:hover a {color: #fff;}   
  
  
     
  
  
  nav ul li a {   
  
  
      display: block;   
  
  
      padding: 1em;   
  
  
      font-size: 1.125em;   
  
  
      color: #ccc;   
  
  
      text-decoration: none;   
  
  
      margin: 0px;   
  
  
      background-color: #000;   
  
  
      border-right: 1px solid #333;   
  
  
  }   
  
  
  nav ul li:last-of-type a {border-right: 1px solid transparent !important;}   
  
  
     
  
  
  nav ul ul {   
  
  
      background: #5f6975;   
  
  
      border-radius: 0px;   
  
  
      padding: 0;   
  
  
      position: absolute;   
  
  
      top: 100%;   
  
  
      width: auto;   
  
  
      float: none;   
  
  
  }   
  
  
  nav ul li:hover {   
  
  
      background: #5f6975;   
  
  
      color: #FFF;   
  
  
  }   
  
  
  nav ul ul li a:hover {   
  
  
      background-color: #4b545f;   
  
  
  }   
  
  
     
  
  
  nav ul ul li {   
  
  
  float: none;   
  
  
  border-bottom: 1px solid #444240;   
  
  
  position: relative;   
  
  
  }   
  
  
     
  
  
  nav ul ul li a {   
  
  
  padding: 0.5em 1em;   
  
  
  font-size: 1em;   
  
  
  width:10em;   
  
  
  color: #fff;   
  
  
  }      
  
  
     
  
  
     
  
  
  nav ul ul ul {   
  
  
  position: absolute; left: 100%; top:0;   
  
  
  }   
  
  
     
  
  
  /* css for  */   
  
  
  section.content { width: 70%; float:left; }   
  
  
  .content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }   
  
  
  article .entry { clear:both; padding: 0 0 1em; }   
  
  
  h1.post-title { font-size: 1.8em; margin:0; padding:0;}   
  
  
  .entry.post-meta { color: #888; }   
  
  
  .entry.post-meta span { padding: 0 1em 0 0; }   
  
  
  .entry.post-content { font-size: 1.125em; margin:0; padding:0;}   
  
  
     
  
  
  /* css for  */   
  
  
  aside.sidebar { width: 25%; float:right; }   
  
  
  aside.sidebar ul {   
  
  
      width:100%;   
  
  
      margin: 0px;   
  
  
      padding: 0px;   
  
  
      float: left;   
  
  
      list-style: none;   
  
  
  }   
  
  
  aside.sidebar ul li {   
  
  
      width:100%;   
  
  
      margin: 0px 0px 2em;   
  
  
      padding: 0px;   
  
  
      float: left;   
  
  
      list-style: none;   
  
  
  }   
  
  
  aside.sidebar ul li ul li {   
  
  
      margin: 0px 0px 0.2em;   
  
  
      padding: 0px;   
  
  
  }   
  
  
  aside.sidebar ul li ul li ul li {   
  
  
      margin: 0px;   
  
  
      padding: 0px 0px 0px 1em;   
  
  
      width: 90%;   
  
  
      font-size: 0.9em;   
  
  
  }   
  
  
  aside.sidebar ul li h3.widget-title {   
  
  
      width:100%;   
  
  
      margin: 0px;   
  
  
      padding: 0px;   
  
  
      float: left;   
  
  
      font-size: 1.45em;   
  
  
  }   
  
  
     
  
  
  /* css for  */   
  
  
  footer {   
  
  
      width: 98%;   
  
  
      float:left;   
  
  
      padding: 1%;   
  
  
      background-color: white;   
  
  
      margin-top: 2em;   
  
  
  }   
  
  
  footer .footer-left { width: 45%; float:left; text-align:left; }   
  
  
  footer .footer-right { width: 45%; float:right; text-align:right; }

步驟5 為移動(dòng)應(yīng)用使用@media query查詢(xún)
　　為了進(jìn)行響應(yīng)式設(shè)計(jì)，最佳的方案是使用@media query去進(jìn)行查詢(xún)，在上面的CSS代碼中添加如下代碼：

 
 
 
 
  
  
  
  /* ipad 768px */   
  
  
  @media only screen and (min-width:470px) and (max-width:770px){   
  
  
  body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }   
  
  
  section.content, aside.sidebar { width:100%; }   
  
  
  }   
  
  
     
  
  
  /* iphone 468px */   
  
  
  @media only screen and (min-width:270px) and (max-width:470px){   
  
  
  body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }   
  
  
  section.content, aside.sidebar { width:100%; }   
  
  
  }

步驟6 增加jquery,modernizer和html5shiv到標(biāo)簽中
　　這里推薦使用Modernizr 和html5shiv，它們都是一個(gè)能在多種瀏覽器中通過(guò)運(yùn)行各種腳本兼容運(yùn)行支持大部分HTML 5標(biāo)簽的插件。我們將它們和jQuery庫(kù)放在標(biāo)簽前，

代碼如下：

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

讀者可以將自己的屏幕分辨率調(diào)整到768px或者468px,會(huì)發(fā)現(xiàn)頁(yè)面依然能隨著分辨率的改變而改變自適應(yīng)，沒(méi)出現(xiàn)任何問(wè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)頁(yè)標(biāo)題：創(chuàng)建簡(jiǎn)單的響應(yīng)式HTML5模版
文章路徑：http://www.fisionsoft.com.cn/article/cccjphc.html

新聞中心

其他資訊