• <tbody id="eay9b"></tbody>
    <progress id="eay9b"><pre id="eay9b"></pre></progress>
    
    
    1. 站長工具,就用查一把!
      收錄查詢  關鍵詞排名  Alexa排名  PR檢測  友情檢測  IP反查  WHOIS查詢   更多查詢 
        收藏  最近查詢 查一把
      信息分類 首頁 » 資訊信息

      好站推薦

      IT新聞

        業界猜想

        名人名企

      建站推廣

        站長創業

        運營推廣

      設計編程

        美工設計

        開發編程

      7 項 Web 開發者需要了解的新技術
      信息來源:博客園 發布時間:2011/9/21

      Web 開發者需要經常更新他們的知識,學習新的技術,如果他們還想繼續在 Web 開發領域混并混得還不錯的話。下面將為你展示 7 項新的 Web 開發技術,作為一個 Web 開發人員,你需要了解、熟悉并學會的技術。

        1、CSS3 media queries

        目前,大量智能手機設備的涌現,同時各種不同尺寸屏幕的設備,如平板電腦之類的出現,對 Web 開發帶來了前所未有的挑戰,如何讓 Web 頁面能適應各種尺寸的屏幕讓很多 Web 開發人員相當的糾結。幸運的是 CSS3 規范可幫我們輕松的解決此事,你可以根據不同尺寸的屏幕定義不同的 CSS 樣式。

        例如,下面的代碼只在屏幕顯示區域大小為 767px 的時候才有效:

          @media screen and (max-width:767px){  
      #container{
      width
      :320px;
      }

      header h1#logo a
      {
      width
      :320px;
      height
      :44px;
      background
      :url(image-small.jpg) no-repeat 0 0;
      }

      }

        2、Font resizing with REMs

        CSS3 引入新的字體尺寸單位 rem (root rm)

        em 單位是相對于父節點的 font-size ,會有一些組合的問題,而 rem 是相對于根節點(或者是 html 節點),意思就是說你可以在 html 節點定義一個單獨的字體大小,然后所有其他元素使用 rem 相對于這個字體的百分比進行設置。

          html { font-size: 62.5%;}  
      body
      { font-size: 1.4rem;}/* =14px */
      h1
      { font-size: 2.4rem;}/* =24px */

        3、Cache pages for offline usage

        HTML5 引入了一個強大的特性:離線緩存。該特性可讓你告訴瀏覽器緩存某些頁面,使得用戶可以在離線的情況下再次訪問該頁面。

        要緩存頁面非常簡單,首先在你網站的 .htaccess 文件中添加如下一行:

      AddType text/cache-manifest .manifest  


      然后你可創建一個文件如 offline.manifest ,包含如下內容:

          CACHE MANIFEST  
      CACHE
      index.html
      style.css
      image.jpg

      最后,在 html 節點中增加:

      <html manifest="/offline.manifest">

        4、Server-side JavaScript

        JavaScript 現在已經是非常流行的 Web 客戶端編程語言了,但 JavaScript 也越來越多的出現在服務器端了,通過強大的 JavaScript 服務器端環境:Jaxer、Node.js 和 Narwhal。

        下面代碼顯示如何用 Node.js 創建一個簡單的 Hello World 程序:

      var sys = require("sys");  
      sys.puts(
      "Hello World!");

        5、HTML5 drag & drop

        HTML5 讓網頁上的拖放變得非常簡單,我們只需要簡單的定義 draggable="true" 屬性即可,如下所示:

      <div id="columns">  
      <div class="column" draggable="true"><header>A</header></div>
      <div class="column" draggable="true"><header>B</header></div>
      <div class="column" draggable="true"><header>C</header></div>
      </div>

        有了這些 draggable=true 的元素,我們只需要編寫一些簡單的 JavaScript 代碼來處理拖放,這里不再詳細描述處理過程。

        提示:如果你希望阻止可拖放元素被選中,可使用以下 CSS 規則:

          [draggable] {  
      -moz-user-select
      : none;
      -khtml-user-select
      : none;
      -webkit-user-select
      : none;
      user-select
      : none;
      }

        6、Forms, the HTML5 way

        HTML5 規范在表單定義方面引入很多新特性,包含很多新的表單組件,例如日期選擇、數字調整、使用正則表達式對輸入框進行驗證等等(email、tel、link)。

        下面代碼顯示了一些新的表單元素:

      <form>  
      <label for="range-slider">Slider</label>
      <input type="range" name="range-slider" id="range-slider" class="slider" min="0" max="20" step="1" value="0">

      <label for="numeric-spinner">Numeric spinner</label>
      <input type="number" name="numeric-spinner" id="numeric-spinner" value="2">

      <label for="date-picker">Date picker</label>
      <input type="date" name="date-picker" id="date-picker" value="2010-10-06">

      <label for="color-picker">Color picker</label>
      <input type="color" name="color-picker" id="color-picker" value="ff0000">

      <label for="text-field">Text field with placeholder</label>
      <input type="text" name="text-field" id="text-field" placeholder="Insert your text here">

      <label for="url-field">Url field</label>
      <input type="url" id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required>

      <label for="email-field">Email field</label>
      <input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required>

      <button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
      <span class="ui-button-text">Submit form</span>
      </button>
      </form>

        7、CSS animations

        很多現在的瀏覽器都支持 CSS 動畫,是的,CSS 已經允許你創建一些簡單的動畫,而無需 JavaScript 的支持。

        下面代碼顯示如何讓背景色改變:

          #logo {  
      margin
      : 15px 15px 0 15px;
      background
      : red;
      float
      : left;

      /* Firefox 4+ */
      -moz-animation-name
      : colour-change;
      -moz-animation-timing-function
      : linear;
      -moz-animation-iteration-count
      : infinite;
      -moz-animation-duration
      : 30s;

      /* Webkit */
      -webkit-animation-name
      : colour-change;
      -webkit-animation-timing-function
      : linear;
      -webkit-animation-iteration-count
      : infinite;
      -webkit-animation-duration
      : 30s;
      }

      @-moz-keyframes colour-change
      {
      0% {
      background
      : red;
      }
      33%
      {
      background
      : green;
      }
      66%
      {
      background
      : blue;
      }
      }

      @-webkit-keyframes colour-change
      {
      0% {
      background
      : red;
      }
      33%
      {
      background
      : green;
      }
      66%
      {
      background
      : blue;
      }
      }

        

      轉載請注明出處:站長工具 信息來源:http://news.cnblogs.com/n/115874/
      網友點評
      日式男女裸交吃奶动态图
    2. <tbody id="eay9b"></tbody>
      <progress id="eay9b"><pre id="eay9b"></pre></progress>