flex佈局實例--實現底部導航_ZenDei技術網路在線

flex佈局實例--實現底部導航

-Advertisement-

vh 存在相容性問題，不建議使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user ...

vh 存在相容性問題，不建議使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        body{background-color: pink;}
        ul{list-style: none;}
        a{text-decoration: none;color:#333;}
        .footer{width:100%;height:80px;position: fixed;background:lightblue;bottom:0;display: flex;}
        .footer li{flex:1;/*平分空間*/} 
        .footer li a{height:100%;display: flex;flex-direction:column;justify-content: center;/*水平居中*/align-items:center;/*垂直居中*/}
    </style>
</head>
<body>
    <ul class="footer">
        <li>
            <a href="#">
                <i class="iconfont icon-gouwuche"></i>
                <span>購物車</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-file"></i>
                <span>文件</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-saomiao"></i>
                <span>掃描</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-xialajiantou"></i>
                <span>箭頭</span>
            </a>
        </li>
    </ul>
</body>
</html>

卡片排列實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        body{background-color: pink;font-size:12px;}
        ul{list-style: none;}
        a{text-decoration: none;color:#333;}
        .container{width:100%;padding:20px;display: flex;flex-wrap:wrap;justify-content: space-around;}
        .item{width:45%;height:130px;background:lightblue;border-radius:5px;margin-bottom:20px;display: flex;justify-content: space-around;}
        .left{display: flex;flex-direction:column;justify-content:space-around;}
        .right{display: flex;align-items:center;}
        button{background-color: orange;color:#fff;padding:10px;border:0;border-radius:5px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="left">
                <p>前端小白入門手冊</p>
                <p>適用人群：沒有任何前端基礎的小白</p>
                <p>費用：￥999</p>
            </div>
            <div class="right"><button>加入購物車</button></div>
        </div>
        <div class="item">
            <div class="left">
                <p>前端小白入門手冊</p>
                <p>適用人群：沒有任何前端基礎的小白</p>
                <p>費用：￥999</p>
            </div>
            <div class="right"><button>加入購物車</button></div>
        </div>
        <div class="item">
            <div class="left">
                <p>前端小白入門手冊</p>
                <p>適用人群：沒有任何前端基礎的小白</p>
                <p>費用：￥999</p>
            </div>
            <div class="right"><button>加入購物車</button></div>
        </div>
        <div class="item">
            <div class="left">
                <p>前端小白入門手冊</p>
                <p>適用人群：沒有任何前端基礎的小白</p>
                <p>費用：￥999</p>
            </div>
            <div class="right"><button>加入購物車</button></div>
        </div>
    </div>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

阿裡、位元組：一套高效的iOS面試題

簡述筆者最近收集梳理了一些iOS相關的問題，其中大部分都是大廠面試或者面試其他人用到的，能命中大部分的面試和日常工作，更希望你可以用它來檢驗自己由於問題量太大，本文只是給了問題，希望發揮圈友的動手能力，自己去探索下，也可以在下方進行評論回覆你的答案或者提出更高質量的問題！！！ runtime相關 ...
高性能的小程式swiper組件

小程式的社區總是覺得只有幾個活躍的人，問一些問題的時候很難得到想要的答案，做過超過100個swipe-item的同學可能會發現低端機型會卡頓，使用小程式提供的組件滿足不了業務的需求，多個swipe-item的使用場景是很多的，例如刷題，刷商品，刷視頻等，刷商品swipe-item可能有上千個，這次的 ...
javascript實戰演練,製作新按鈕,‘新視窗打開網站’,點擊打開新窗

通過練習javascript中的document.write()輸出展示；消息彈出框alert(字元串或變數)；消息對話框confirm(str)；用戶交互的信息prompt(str1, str2)；打開新視窗window.open([URL], [視窗名稱], [參數字元串])；window.cl... ...
JavaScript中window.open()打開與window.close()關閉

在JavaScript中window.open([URL], [視窗名稱], [參數字元串])打開新的視窗，使用window.close();//關閉本視窗或者是<視窗對象>.close();//關閉指定的視窗，舉例var ceshi=window.open('https://www.cnblogs... ...
JavaScript-打開新視窗（window.open）

通過window.open() 設置瀏覽器視窗；具體語法為window.open([URL], [視窗名稱], [參數字元串])；其中視窗名稱：可選參數，被打開視窗的名稱裡面的"_top"、"_blank"、"_self"具有特殊意義的名稱；參數字元串：可選參數，設置視窗參數，各參數用逗號隔開,引號... ...
移動端常用單位（%和rem）

px % em （ font-size的值就是 1em，如果自身沒有設置font-size，則去找父元素的；常用於 text-indent:2em 來縮進兩個字元） rem（html的font-size的大小，就是1rem ；rem是相對於根元素<html>，即rem繼承的是html的font-s ...
CSS中使用animation-timing-function：steps(num，start/end)實現逐幀動畫

用animation做動畫時發現背景圖片是直接平移運動到指定位置的，即具有連續性，而animation-timing-function：steps(num，start/end)屬性可以使背景圖片運動不連續，即實現逐幀動畫。 steps(num，start/end) 第一個值num表示把動畫分成了多少 ...
移動Web開發必備基礎之媒體查詢

媒體類型： all （預設值） screen print 列印設備 speech 屏幕閱讀器由於all是預設值可不寫，因此以下兩種寫法效果相同 @media all and (min-width:900px){ } @media (min-width:900px){ } 媒體查詢中的邏輯與或 ...