<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      欽州開發網站:如何在HTML5/CSS3中構建移動明細表WebApp

      日期:2020-03-28 閱讀:233   作者:欽州網站設計開發公司

      有無數的移動應用程序在其UI中使用列表視圖。Android和iOS都提供平臺特定的設計,以使構建應用程序更容易。但是還有另一個模板,可以用典型的HTML5和CSS屬性來構建。

      在本教程中,我想介紹一種構建干凈的HTML5移動Web應用程序的方法。對于下面的演示,我將最大寬度限制在800 px,但理論上可以擴展到任何瀏覽器的大小。這就是移動Web開發如此有利可圖的原因。使用教程代碼并從下面的鏈接下載我的源文件的副本。


      開頭文件

      欽州開發網站開始使用HTML5 DOCTYPE和頭部區域中的幾個重要標簽。X-UA-Compatible視口需要在手機屏幕上正確渲染。retina.js這是視網膜顯示器的第三方腳本。

      這將自動檢測當你使用iPhone或iPad的視網膜支持,并自動拉圖像與一致的文件名。例如,我們應該創建一個高分辨率圖像名為MY-Houth2x.jpg,然后縮小到標準分辨率命名為我的房子。JPG。這是一個額外的工作,但它的回報,如果你的目標是一個移動觀眾。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      Twelve
      Thirteen
      Fourteen
      Fifteen
      Sixteen
      <!doctype html>
      <HTMLlang="en" &#62;
      <頭部>
        <metahttp-equiv=“內容類型”content="text/html; charset=utf-8" &#62;
        <title>Simple Mobile Listview</title &#62;
        <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1" &#62;
        <meta姓名=“友好”content="true" &#62;
        <meta姓名=“視口”content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" &#62;
        <linkrel=“樣式表”type="text/css"href=“樣式CSS”>
        <script類型=“文本/ JavaScript”src="http://code.jquery.com/jquery.min.js"></script &#62;
        <script類型=“文本/ JavaScript”src="retina.js"></script &#62;
      <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediacueres-js.googledcode.com/svn/trunk/css3-mediacueres.js"></script>
      <![endif]-->
      </頭部>

      還有我引用的另一個外部腳本CSS3媒體查詢這將增加對在IE9之前運行舊瀏覽器的響應性查詢的支持。還有一些不支持的舊版本。@進口這個腳本正確地處理它們。

      生成列表視圖

      現在,在正文部分中,我將使用無序列表來創建標記。另一種解決方案是使用表,但我覺得這些代碼中添加了許多不必要的標簽。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      Twelve
      Thirteen
      Fourteen
      Fifteen
      Sixteen
      Seventeen
      Eighteen
      <divid="container" &#62;
        <ul &#62;
          <!-- row 01 -->
          <ahref=&#34;Wei&#34;><class="clearfix" &#62;
            <imgSRC=“圖片/現代城堡廚房PNG”alt="thumb"=“縮略圖”>
            <h2>Full-Room Mansion with Open Kitchen</h2 &#62;
            <p="desc">Rental located in Pheonix, AZ. 2 bedrooms 1.5 baths. </>
            <span=“價格”>$2,650/month</跨度>
          </li></a &#62;
          <!-- row 02 -->
          <ahref=&#34;Wei&#34;><class="clearfix" &#62;
            <imgSRC=“圖像/頂樓-與-Bar.png”alt="Modern penthouse bar"=“縮略圖”>
            <h2>Modern Penthouse Highrise with Bar</h2 &#62;
            <p="desc">Rental located in New York City, NY. 1 bedroom 1 bath.</>
            <span=“價格”>$1,800/month</跨度>
          </li></a &#62;

      因此,在我的例子中,整個列表包含在包裝器div中。每個列表項也由沒有HREF值的錨鏈接包住。在任何真正的移動應用程序中,您將鏈接到可能在一個框架上運行的其他頁面,例如移動手機 .

      每個內部項目都包含一個略微浮現在左側的縮略圖。SRC屬性針對的是標準圖像,但是我們的視網膜。JS腳本在視網膜屏幕上被自動替換。

      列表視圖樣式

      現在讓我們把注意力轉移到CSS樣式表上。Eric Meyer的暢銷文章它幾乎覆蓋了所有的東西。這個WebApp的一個有趣的部分是固定的導航欄,它沿著頁面跟著你。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      Twelve
      Thirteen
      Fourteen
      Fifteen
      Sixteen
      Seventeen
      Eighteen
      Nineteen
      Twenty
      Twenty-one
      Twenty-two
      Twenty-three
      Twenty-four
      Twenty-five
      Twenty-six
      Twenty-seven
      Twenty-eight
      Twenty-nine
      Thirty
      Thirty-one
      /** top header bar **/
      header {
      display:block;
      position:fixed;
      top:0;
      z-index:9999;
      height:55px;
      width:100%;
      max-width:800px;
      border-bottom:1px固體#262422;
      -webkit-box-shadow:Zero2px2PXrgba(Zero,Zero,Zero,Zero point four);
      -moz-box-shadow:Zero2px2PXrgba(Zero,Zero,Zero,Zero point four);
      box-shadow:Zero2px2PXrgba(Zero,Zero,Zero,Zero point four);
      background:#5a5955;
      background: -moz-linear-gradient(top,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
      background: -webkit-gradient(linear,left上衣,左邊bottom顏色停止0%,#5a5955顏色停止50%,#51504c顏色停止51%,#494744顏色停止100%,#3f3d3a);
      background: -webkit-linear-gradient(top,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
      background-O-線性梯度top,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
      background-MS線性梯度top,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
      background線性梯度(to)bottom,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;5a5955 &#39;, endColorstr=“3F3D3A”,GradientType=Zero);
      }
      header hOne{
      font-size:2.4em;
      font-family:Tahoma,Arial,sans-serif;
      font-weight:bold;line-height:55px;
      text-align:center;
      color:#efefef;
      text-shadow:1px1PX0px#000;
      }

      請注意,我實際上使用CSS3漸變來生成頂部工具欄背景。此外,我在邊緣添加了一個小陰影,以顯示在內容的頂部。位置:固定;Z索引值將始終保持工具欄在滾動時保持不變。


      內部容器和列表項也使用一組固定值。高度始終是90px,這樣我們的圖像不會在兩邊都浮動得太近。另外,我使用更多的CSS3漸變,從淺灰色到白色。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      Twelve
      Thirteen
      Fourteen
      Fifteen
      #container {顯示:;緣頂:55 px; }
      #container ul {*空*}
      #container ul a li {
        顯示:;
        寬度:100%;
        高度:90px;
        邊界底部:1PXsolidB9B9B9;
        邊界頂部:1PXsolidF7F7F7;
        背景:3500;Ebeb;
        背景圖像: -webkit-gradient(linear,0%0%,0%100%, from(\ 35ffffff;) to(3500;Ebeb));
        背景圖像: -webkit-linear-gradient(上衣,\ 35ffffff;,3500;Ebeb);
        背景圖像:    -moz-linear-gradient(上衣,\ 35ffffff;,3500;Ebeb);
        背景圖像:      -o-linear-gradient(上衣,\ 35ffffff;,3500;Ebeb);
        背景圖像:         linear-gradient(上衣,\ 35ffffff;,3500;Ebeb);
      }

      錨鏈環

      構建此ListVIEW的另一個棘手的方面是處理用戶懸停樣式。因為錨點鏈接位于整個列表項之外,所以我們必須使用嵌套CSS選擇器。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      #container ul a:hover li hTwo{顏色:γ787B1; }
      #container ul a:hover li p.desc {顏色:#757575; }
      #container ul a:hover li {
      background:#efefef;
      background-image: -webkit-gradient(linear,0%0%,0%100%,從(#ffffff#efefef);
      background-image: -webkit-linear-gradient(top,#ffffff,#efefef);
      background-image:    -moz-linear-gradient(top,#ffffff,#efefef);
      background-image-O-線性梯度top,#ffffff,#efefef);
      background-image線性梯度(線性梯度)top,#ffffff,#efefef);
      }

      你可以添加很多選項來創建一個驚人的懸停效果。當你在移動設備上懸?;螯c擊一個行時,我正在更新一些文本顏色,以更加明亮地閃亮。背景梯度也會變得更亮,并且比其他行更突出。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      Twelve
      #container ul li img.thumbnail {
        背景:γ-FFF;
        顯示: inline-;
        浮動:左邊;
        襯墊:2PX;
        緣頂:6PX;
        左邊余量:5PX;
        保證金權:8PX;
        -webkit-box-shadow:01PX2pxrgba(0,0,0,0.25);
        -moz-box-shadow:01PX2pxrgba(0,0,0,0.25);
        盒影:01PX2pxrgba(0,0,0,0.25);
      }

      圖像縮略圖有一個與背景漸變分開的軟邊框,輕微的陰影也會使頁面效果看起來很好。

      簡單響應查詢


      由于布局是用流體寬度來構建的,所以我們不需要對更小的屏幕進行更多的更新,但是添加這個微小的響應設計層有助于保持所有頁面元素的適應性。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      /** basic media queries **/
      @media only屏幕and (最大寬度:480PX) {
        容器容器2{font-size:1.75em;}
        容器容器UL Li img縮略圖{margin-top:2px;}
      }
      @media only屏幕and (最大寬度:30px) {
        #container ul li p.desc {display:none;}
      }

      首先,當屏幕達到480px或更小的寬度時,列表標題縮小了一點字體大小。我們想在沒有太多屏幕屬性的移動平臺上節省空間。圖像縮略圖也向上移動了一點。這與抵消屏幕更小的文本高度相比,屏幕更緊湊。

      最后,如果你在肖像模式下運行一個移動設備,那么我們希望完全刪除描述線。這些是很好的,但最終不必要的接口。顯然,你也可以感覺到舒適地編輯在你自己的響應風格。


      結論

      欽州開發網站剛開始使用Web開發的初學者應該能夠很快跟上。這些技術并不是什么新鮮事,但它們在移動設備上非常出色地結合在一起。你可以在手機瀏覽器上找到我們的現場演示,看看它是如何對肖像/風景模式做出反應的。

      總的來說,如果你對響應性網頁設計感興趣,這些都是很好的技術。Mobile WebApp不像廠商專用的App Store那么常見。但是這些移動應用程序可以在世界上任何有因特網接入的人使用。在移動Web開發中確實是一個革命性的時期。如果你有類似的評論或問題的話。教程在下面的討論區免費與我們分享。


      网赚团队