h5學習筆記： css佈局案例練習

阿新 • • 發佈：2018-12-25

今天練習一下css相關的佈局，沒有寫互動內容。在css佈局中，發現也不少不熟悉的地方。只是沒有形成概念，其次對一些用法比較模糊。日後需要加強一下這些。對平衡的兩個div應該如何處理，還要繼續想想辦法。
互動那些還要看看jq是如何使用。還有渲染列應該用資料驅動處理。

這裡寫圖片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>導航測試</title>
         <meta name="viewport" content 
="width=device-width, initial-scale=1.0">
    </head>
    <style type="text/css">
        body,ul,li,img{
            margin: 0;
            padding: 0;
        }

        ul{list-style: none;}

        .tab_header{
            width: 100%;
            height: 44px;
            background-color 
: crimson;
        }

        .tab_header span{
            height: 44px;
            line-height: 44px;
            margin-left: 2%;
            color: white;
            font-size: 12px;
        }

        .tab_header span.right{
           float: right;
           margin-right: 2%;
        }
        .tab_nav 
 {
            margin-top: 8px;
            padding-bottom: 10px;
            border-bottom: 1px solid #F8F8F8;       
        }

        .tab_nav ul li{

            display: inline-block;
            width: 16%;
            text-align: center;
        }


        .tab_menu{

            width: 20%;
            float: left;    
        }

        .tab_menu ul li{
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-bottom: 1px solid #F8F8F8;
          font-size: 12px;      

        }
        .tab_menu ul li:last-child
        {
             border-bottom:none;
        }

        .tab_content{

            width: 76%;
            display: inline-block;
            float: left;
            height: 100%;
            padding-left: 2%;
            border-left: 1px solid #CCCCCC; 
        }


        .selected{
            color: red;
        }

        .content_left{
            display: inline-block;
            width:22%;
            padding-top: 2%;
        }

        .content_right{
            display: inline-block; 
            width:70%;
            margin-left: 3%;
             border-bottom: 1px solid #CCCCCC;
        }

        .content_right p{

            font-size:6px;
            padding:0;
            margin:5px 0px;
           color:#333333;
        }

        .content_right p span{
            width: 50%;
            display: inline-block;
           color:#333333;

        }

        .content_right  .total{
            width: 30%;
            color: cornflowerblue;
        }
        .content_right  .jindu{
            width: 60%;
            color: cornflowerblue;
        }

        .content_right .progress{
            background-color: yellow;
            width: 90%;
            height: 2px;
            position: relative;
        }
        .content_right  .progressBar{

            background-color: red;
            width: 80%;
            height: 2px;
            padding: 0px;
            margin: 0px;
            position: absolute;
        }



    </style>
    <body>

        <div class="tab_header">
            <span>一元玩法</span>
            <span class="right">購物車</span>
        </div>
        <div class="tab_nav">
            <ul>
                <li>最熱</li>
                <li>最快</li>
                <li>最新</li>
                <li>價格↑</li>
                <li>價格↓</li>
          </ul>     
        </div>
        <!--導航選單內容-->
        <div class="tab_menu">
            <ul>
                <li class="selected">全部分類</li>
                <li>汽車摩托</li>
                <li>手機數碼</li>
                <li>電腦辦公</li>
                <li>鐘錶首飾</li>
                <li>家電家用</li>
                <li>化妝個護</li>
                <li>美食飲料</li>
                <li>虛擬商品</li>
                <li>其他</li>
          </ul>     
        </div>

        <!--展示內容渲染列項-->
        <div class="tab_content">
            <div class="tab_item">
                  <div class="content_left">
                     <img src="http://img13.360buyimg.com/n5/s54x54_jfs/t292/14/1005385568/209475/53b8cd7f/542d0773Nb794f465.jpg"  width="70" height="70"/> 
                </div>
                <div class="content_right">
                    <p class="title">第1期蘋果iphone 6 4.7寸 64G </p>
                    <p><span class="total">5488元</span> <span class="jindu">揭曉進度72%</span></p>
                    <p class="progress"><span class="progressBar"></span></p>
                    <p><span>3926</span><span>1552</span></p>
                    <p><span>已參與</span><span>剩餘</span></p>          
                </div>
            </div>

              <div class="tab_item">
                  <div class="content_left">
                     <img src="http://img11.360buyimg.com/n5/jfs/t2605/80/1325468232/457943/6a3e71d5/573aec3eN482fd34f.jpg"  width="70" height="70"/> 
                </div>
                <div class="content_right">
                    <p>第15期港榮蒸奶香蛋糕整箱1kg </p>
                    <p><span class="total">49元</span> <span class="jindu">揭曉進度53%</span></p>
                    <p class="progress"><span class="progressBar"></span></p>
                    <p><span>26</span><span>23</span></p>
                    <p><span>已參與</span><span>剩餘</span></p>
                </div>
            </div>

             <div class="tab_item">
                  <div class="content_left">
                     <img src="http://img12.360buyimg.com/n5/jfs/t2194/251/2597042450/396964/c70e92f8/570bb76cN443fd448.jpg"  width="70" height="70"/> 
                </div>
                <div class="content_right">
                    <p>第10期三隻松鼠葡萄1包 </p>
                    <p><span class="total">20元</span> <span class="jindu">揭曉進度43%</span></p>
                    <p class="progress"><span class="progressBar"></span></p>
                    <p><span>10</span><span>12</span></p>
                    <p><span>已參與</span><span>剩餘</span></p>
                </div>
            </div>
              <div class="tab_item">
                  <div class="content_left">
                     <img src="http://img12.360buyimg.com/n5/jfs/t2047/170/850036326/120755/921ea52c/562e0717N55e0b8e0.jpg"  width="70" height="70"/> 
                </div>
                <div class="content_right">
                    <p>第5期蘋果ipad air2 </p>
                    <p><span class="total">3200元</span> <span class="jindu">揭曉進度83%</span></p>
                    <p class="progress"><span class="progressBar"></span></p>
                    <p><span>300</span><span>80</span></p>
                    <p><span>已參與</span><span>剩餘</span></p>
                </div>
            </div>
              <div class="tab_item">
                  <div class="content_left">
                     <img src="http://img14.360buyimg.com/n5/jfs/t2284/25/1287004071/48631/54571266/564c67c7N1b5f4a25.jpg"  width="70" height="70"/> 
                </div>
                <div class="content_right">
                    <p>第2期飛利全新浦檯燈1臺 </p>
                    <p><span class="total">99元</span> <span class="jindu">揭曉進度23%</span></p>
                    <p class="progress"><span class="progressBar"></span></p>
                    <p><span>10</span><span>10</span></p>
                    <p><span>已參與</span><span>剩餘</span></p>
                </div>
            </div>
                <div class="tab_item">
                  <div class="content_left">
                     <img src="http://img12.360buyimg.com/n5/jfs/t1174/338/865120803/45181/e564982f/5563cb4cNa42cf32c.jpg"  width="70" height="70"/> 
                </div>
                <div class="content_right">
                    <p>第20期小米充電寶1個 </p>
                    <p><span class="total">80元</span> <span class="jindu">揭曉進度2%</span></p>
                    <p class="progress"><span class="progressBar"></span></p>
                    <p><span>12</span><span>12</span></p>
                    <p><span>已參與</span><span>剩餘</span></p>
                </div>
            </div>

        </div>

    </body>
</html>

h5學習筆記： css佈局案例練習

今天練習一下css相關的佈局，沒有寫互動內容。在css佈局中，發現也不少不熟悉的地方。只是沒有形成概念，其次對一些用法比較模糊。日後需要加強一下這些。對平衡的兩個div應該如何處理，還要繼續想想辦法。

h5 學習筆記：記錄一些前端用到後臺和移動樣式庫

這幾天一直在找一些移動和業務樣式庫，發現了不少不錯的，既是漂亮又符合業務用到。前端發展真的變化很快，發現市面上還是有不少開源好用的產品。針對後臺研發的，有阿里ant design、阿里通訊的，還有餓了麼，京東，有贊等等一些庫。我比較喜歡ant design裡面

學習筆記：Zookeeper 應用案例(上下線動態感知)

1、Zookeeper 應用案例(上下線動態感知)8.1 案例1——伺服器上下線動態感知8.1.1 需求描述某分散式系統中，主節點可以有多臺，可以動態上下線任意一臺客戶端都能實時感知到主節點伺服器的上下線8.1.2 設計思路 8.1.3 程式

h5學習筆記：layui table

最近在做Layui的後臺，發現Layui這個方案也不錯，能夠快速地在後臺直接部署。相比還要配置webpack，Layui jquery體系開箱即用在一些單獨的情況下還是挺不錯的。最近整理一下現在梳理一下Table元件的用法。一、Table 元件 Tabl

h5學習筆記：居中

將之前的用到的記錄一下。以便不時之需。朋友一直和我講css 是不簡單，到目前為此，css發展已經進化到越來越驚人。其實學好css 不容易，也沒有人所說的那樣簡單。css2- css3 – 進化less，sass，postcss，似乎真是越來越多。那天看了一下le

h5學習筆記：flex

flex部署可以很方便佈局橫向和垂直縱向的設計。所以在編寫小程式可以放心使用。 flex 依舊有瀏覽器相容性的問題。但是ie 8 這種瀏覽器真不管太多了。今晚做一個練習，記錄一下之前工作中用到用法。flex是一種常用佈局方式，使用這種方式處理一些佈局。

h5學習筆記：使用fis的前端構建工具記錄

這幾天練習一下webpack ，glup的工具使用，發現webpack 配置起來並不是太順利，總是有一種抗拒的，但從vuejs 和react 需要這種配套的方案去解決打包和釋出版本問題。這也是需要挖一下坑，把這塊骨頭啃下來。無意中找到了fis百度的前端構建工

h5學習筆記：vue 路由部署伺服器子目錄問題

《Egret 引擎入門》這兩天一直在查詢vue經過打包後部署伺服器一直顯示不出來的問題。前端沒有報錯，資源載入也很正常。找了很多回答，最後定位在vue的訪問路由出了問題。出現的現象前端vuejs+vue-router+webpack的組合，打包是由w

h5學習筆記：UI庫

自從接觸了web開發以來，每天都會很糾結選什麼UI框架才是比較合適？擺在這個問題面前是一個技術的選型。要想知道，web開發的坑實在太深。不斷地大廠推出開源框架，不斷地發現很多造輪子。或者看到一個比較漂亮就會選。最近我深刻體會到這種矛盾的存在，前段時間一直用j

h5學習筆記：http-server小工具

今天下午遇到一個小問題，下載的專案放置XAMPP二級目錄裡面，資源都會發生錯誤的情況，這個時候為了解決這個辦法，使用了fis3的內建伺服器去處理。使用fis3伺服器也是挺方便的。使用fis3的指令碼首先啟動伺服器，然後將檔案釋出到內建的伺服器。 fis

h5學習筆記：下拉選單

滑鼠經過選單的時候，下拉選單形成起來。這個案例中，有一些比較有趣的事情。首先要了解這種選單設計結構。我們知道ul+li經常組合列表，這種列表既有縱向，也有橫向。列表中的li元素，再包一個ul+li的組合元素。這樣一個列表下拉選單結構就變得很清晰了。

CSS學習筆記：盒子模型

dev docs eve cti http box out rect per 盒子模型（CSS basic box model）：When laying out a document, the browser‘s rendering engine represents ea

學習筆記：【案例】財政收入影響因素分析及預測模型

6.0 pearson end 4.5 pandas 問題特征 ase max() 案例來源：《Python數據分析與挖掘實戰》第13章案例背景與挖掘目標輸入數據：《某市統計年鑒》（1995-2014）挖掘目標：梳理影響地方財政收入的關鍵特征，分析、識別影響地

學習筆記：【案例】中醫證型關聯規則挖掘

order 卡方檢驗 eat 業務並行 pen fill lin 區分案例來源：《Python數據分析與挖掘實戰》第8章案例背景與挖掘目標輸入數據：挖掘目標：借助三陰乳腺癌患者的病理信息，挖掘患者的癥狀與中醫證型之間的關聯關系對截斷治療提供依據，挖掘潛性證素

CSS學習筆記：溢位文字省略（text-overflow）

在CSS3中，text-overflow屬性的基本語法如下： clip:表示不顯示省略文字，簡單的裁切。 ellipsis:表示物件文字溢位時顯示省略標記，省略標記插入的位置是最後一個字元。 ellipsis-word：表示當物件文字溢位時顯示省略標記，省略標記插入的

Java技術學習筆記：過濾器鏈的實現方法、配置和案例分析

今天給大家分享的是Java技術學習筆記：過濾器鏈的實現方法、配置和案例分析。過濾器能夠對網站中的各種內容進行過濾（頁面、Servlet、圖片、檔案），可以在網站內容請求和響應時進行一些操作，完成一些通用的功能。過濾器鏈在專案中可以建立多個過濾器，網站內容可能會經過多個過濾器，多個過濾器就形成了過濾

js學習入門教程筆記：css+html+js使用者註冊程式碼實現

執行截圖：如下：使用者註冊：結構層：html;表現層：css;行為層：javascript; html利用ul,li來構造：注意事項：1、每個Input都要有相應的id,這是在js中去呼叫的。 2、<a href

機器學習筆記：tensorflow實現卷積神經網路經典案例--識別手寫數字

從識別手寫數字的案例開始認識神經網路，並瞭解如何在tensorflow中一步步建立卷積神經網路。安裝tensorflow 資料來源 kaggle新手入門的數字識別案例，包含手寫0-9的灰度值影象的csv檔案，下載地址：https://www.

CSS3+HTML5學習筆記四--CSS三欄佈局-寬度只適應

以前做三欄佈局時，最常用最簡單的方法可能就是：採用float+margin來實現，而CSS3的時代，我們可以有另一種比較“時尚”的方法,就是css3中的盒子模型，程式碼如下： 1 <!DOCTYPE HTML> 2 <html> 3 &

Android學習筆記：練習中用到的一些技巧總結

1，登入的時候，如果輸入有誤，則輸入框左右震動，表示輸入有誤在res下準備一個anim資料夾，裡面包含兩個檔案，main_login_shake.xml 和 main_login_cycle_7.xml，其中，main_login_sh

h5學習筆記： css佈局案例練習

相關推薦