用flex佈局實現柵格系統

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/15/12497148.html
-Advertisement-
Play Games

之前一篇柵格系統是用float佈局來實現的 https://www.cnblogs.com/chenyingying0/p/12495051.html 其實並不太適合移動端，不過優點是相容性比較好 這篇用flex來進行佈局，不管在PC端還是移動端都很適合 不過存在相容性問題，在低版本瀏覽器不適用。但 ...


之前一篇柵格系統是用float佈局來實現的 https://www.cnblogs.com/chenyingying0/p/12495051.html

其實並不太適合移動端，不過優點是相容性比較好

 

這篇用flex來進行佈局，不管在PC端還是移動端都很適合

不過存在相容性問題，在低版本瀏覽器不適用。但純粹移動端的話，效果很不錯

 

index.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>grid</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="grid-flex.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header class="header-container">
        <div class="container">
            <div class="row">
                <div class="header-logo-container col-8 col-md-3">
                    <a href="#" class="header-logo"><img src="img/logo.svg"></a>
                </div>
                <div class="header-btn-container col-4 d-md-none">
                    <!-- button一定要加type，否則不同瀏覽器給的值不同 -->
                    <button type="button" class="btn-toggle" id="btn-toggle">
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                    </button>
                </div>
                <div class="header-nav-container col-md-9 d-none d-md-block">
                    <ul class="header-nav">
                        <li class="header-nav-item"><a href="#" class="header-nav-link">手機&amp;平板</a></li>
                        <li class="header-nav-item"><a href="#" class="header-nav-link">電視&amp;影音</a></li>
                        <li class="header-nav-item"><a href="#" class="header-nav-link">生活家電</a></li>
                        <li class="header-nav-item"><a href="#" class="header-nav-link">電腦/辦公/儲存</a></li>
                        <li class="header-nav-item"><a href="#" class="header-nav-link">網上商城</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <nav class="nav-container d-md-none" id="nav">
        <ul class="container">
            <li><a href="#" class="nav-link">手機&amp;平板</a></li>
            <li><a href="#" class="nav-link">電視&amp;影音</a></li></a></li>
            <li><a href="#" class="nav-link">生活家電</a></li>
            <li><a href="#" class="nav-link">電腦/辦公/儲存</a></li>
            <li><a href="#" class="nav-link">網上商城</a></li>
        </ul>
    </nav>

    <div class="slider-container">
        <div class="container">
            <div class="row">
                <div class="slider-text-container col-md-5 col-md-order-last">
                    <h3 class="slider-title">Galaxy S9 | S9+</h3>
                    <h4 class="slider-subtitle">冰藍 煥新上市</h4>
                    <div class="slider-btns">
                        <a href="#" class="btn-rounded">瞭解更多</a>
                        <a href="#" class="btn-rounded">立即購買</a>
                    </div>
                </div>
                <div class="col-md-7 col-md-order-first">
                    <img src="img/1.png">
                </div>
            </div>
        </div>
    </div>

    <script>
        var nav=document.getElementById("nav");
        var navExtendedClassName="nav-container-extended";

        document.getElementById("btn-toggle").onclick=function(){
            if(nav.classList.contains(navExtendedClassName)){
                nav.classList.remove(navExtendedClassName);
            }else{
                nav.classList.add(navExtendedClassName);
            }
        }
    </script>
</body>
</html>

base.css

*{margin:0;padding:0;box-sizing:border-box;}
body{font-size:14px;}
ul{list-style: none;}
img{width:100%;border:none;/*IE瀏覽器會加邊框*/vertical-align: top;/*解決圖片與邊框之間的間距*/}
a{text-decoration: none;font-size:14px;color:#363636;}
a:hover{color:#1428a0;}

grid-flex.css

/*解決嵌套時的padding:0 15px*/
.row{margin:0 -15px;display:flex;flex-wrap:wrap;}
/*xs*/
.container{width:100%;margin:0 auto;/*水平居中*/padding:0 15px;/*解決不嵌套時的margin:0 -15px;*/}
/*sm*/
@media (min-width:576px){
    .container{width:540px;}
}
/*md*/
@media (min-width:768px){
    .container{width:720px;}
}
/*lg*/
@media (min-width:992px){
    .container{width:960px;}
}
/*xl*/
@media (min-width:1200px){
    .container{width:1140px;}
}


/*xs*/
.col{flex-basis:0;flex-grow:1;}/*平分空間的佈局*/
.col-1{flex:0 0 8.3333%;}
.col-2{flex:0 0 16.6667%;}
.col-3{flex:0 0 25%;}
.col-4{flex:0 0 33.3333%;}
.col-5{flex:0 0 41.6667%;}
.col-6{flex:0 0 50%;}
.col-7{flex:0 0 58.3333%;}
.col-8{flex:0 0 66.6667%;}
.col-9{flex:0 0 75%;}
.col-10{flex:0 0 83.3333%;}
.col-11{flex:0 0 91.6667%;}
.col-12{flex:0 0 100%;}

.col-offset-0{margin-left:0;}
.col-offset-1{margin-left:8.3333%;}
.col-offset-2{margin-left:16.6667%;}
.col-offset-3{margin-left:25%;}
.col-offset-4{margin-left:33.3333%;}
.col-offset-5{margin-left:41.6667%;}
.col-offset-6{margin-left:50%;}
.col-offset-7{margin-left:58.3333%;}
.col-offset-8{margin-left:66.6667%;}
.col-offset-9{margin-left:75%;}
.col-offset-10{margin-left:83.3333%;}
.col-offset-11{margin-left:91.6667%;}
.col-offset-12{margin-left:100%;}

.col-order-first{order:-1;}
.col-order-0{order:0;}
.col-order-1{order:1;}
.col-order-2{order:2;}
.col-order-3{order:3;}
.col-order-4{order:4;}
.col-order-5{order:5;}
.col-order-6{order:6;}
.col-order-7{order:7;}
.col-order-8{order:8;}
.col-order-9{order:9;}
.col-order-10{order:10;}
.col-order-11{order:11;}
.col-order-12{order:12;}
.col-order-last{order:13;}

/*sm*/
@media (min-width:576px){
    .col-sm{flex-basis:0;flex-grow:1;}/*平分空間的佈局*/
    .col-sm-1{flex:0 0 8.3333%;}
    .col-sm-2{flex:0 0 16.6667%;}
    .col-sm-3{flex:0 0 25%;}
    .col-sm-4{flex:0 0 33.3333%;}
    .col-sm-5{flex:0 0 41.6667%;}
    .col-sm-6{flex:0 0 50%;}
    .col-sm-7{flex:0 0 58.3333%;}
    .col-sm-8{flex:0 0 66.6667%;}
    .col-sm-9{flex:0 0 75%;}
    .col-sm-10{flex:0 0 83.3333%;}
    .col-sm-11{flex:0 0 91.6667%;}
    .col-sm-12{flex:0 0 100%;}

    .col-sm-offset-0{margin-left:0;}
    .col-sm-offset-1{margin-left:8.3333%;}
    .col-sm-offset-2{margin-left:16.6667%;}
    .col-sm-offset-3{margin-left:25%;}
    .col-sm-offset-4{margin-left:33.3333%;}
    .col-sm-offset-5{margin-left:41.6667%;}
    .col-sm-offset-6{margin-left:50%;}
    .col-sm-offset-7{margin-left:58.3333%;}
    .col-sm-offset-8{margin-left:66.6667%;}
    .col-sm-offset-9{margin-left:75%;}
    .col-sm-offset-10{margin-left:83.3333%;}
    .col-sm-offset-11{margin-left:91.6667%;}
    .col-sm-offset-12{margin-left:100%;}

    .col-sm-order-first{order:-1;}
    .col-sm-order-0{order:0;}
    .col-sm-order-1{order:1;}
    .col-sm-order-2{order:2;}
    .col-sm-order-3{order:3;}
    .col-sm-order-4{order:4;}
    .col-sm-order-5{order:5;}
    .col-sm-order-6{order:6;}
    .col-sm-order-7{order:7;}
    .col-sm-order-8{order:8;}
    .col-sm-order-9{order:9;}
    .col-sm-order-10{order:10;}
    .col-sm-order-11{order:11;}
    .col-sm-order-12{order:12;}
    .col-sm-order-last{order:13;}
}
/*md*/
@media (min-width:768px){
    .col-md{flex-basis:0;flex-grow:1;}/*平分空間的佈局*/
    .col-md-1{flex:0 0 8.3333%;}
    .col-md-2{flex:0 0 16.6667%;}
    .col-md-3{flex:0 0 25%;}
    .col-md-4{flex:0 0 33.3333%;}
    .col-md-5{flex:0 0 41.6667%;}
    .col-md-6{flex:0 0 50%;}
    .col-md-7{flex:0 0 58.3333%;}
    .col-md-8{flex:0 0 66.6667%;}
    .col-md-9{flex:0 0 75%;}
    .col-md-10{flex:0 0 83.3333%;}
    .col-md-11{flex:0 0 91.6667%;}
    .col-md-12{flex:0 0 100%;}

    .col-md-offset-0{margin-left:0;}
    .col-md-offset-1{margin-left:8.3333%;}
    .col-md-offset-2{margin-left:16.6667%;}
    .col-md-offset-3{margin-left:25%;}
    .col-md-offset-4{margin-left:33.3333%;}
    .col-md-offset-5{margin-left:41.6667%;}
    .col-md-offset-6{margin-left:50%;}
    .col-md-offset-7{margin-left:58.3333%;}
    .col-md-offset-8{margin-left:66.6667%;}
    .col-md-offset-9{margin-left:75%;}
    .col-md-offset-10{margin-left:83.3333%;}
    .col-md-offset-11{margin-left:91.6667%;}
    .col-md-offset-12{margin-left:100%;}

    .col-md-order-first{order:-1;}
    .col-md-order-0{order:0;}
    .col-md-order-1{order:1;}
    .col-md-order-2{order:2;}
    .col-md-order-3{order:3;}
    .col-md-order-4{order:4;}
    .col-md-order-5{order:5;}
    .col-md-order-6{order:6;}
    .col-md-order-7{order:7;}
    .col-md-order-8{order:8;}
    .col-md-order-9{order:9;}
    .col-md-order-10{order:10;}
    .col-md-order-11{order:11;}
    .col-md-order-12{order:12;}
    .col-md-order-last{order:13;}
}
/*lg*/
@media (min-width:992px){
    .col-lg{flex-basis:0;flex-grow:1;}/*平分空間的佈局*/
    .col-lg-1{flex:0 0 8.3333%;}
    .col-lg-2{flex:0 0 16.6667%;}
    .col-lg-3{flex:0 0 25%;}
    .col-lg-4{flex:0 0 33.3333%;}
    .col-lg-5{flex:0 0 41.6667%;}
    .col-lg-6{flex:0 0 50%;}
    .col-lg-7{flex:0 0 58.3333%;}
    .col-lg-8{flex:0 0 66.6667%;}
    .col-lg-9{flex:0 0 75%;}
    .col-lg-10{flex:0 0 83.3333%;}
    .col-lg-11{flex:0 0 91.6667%;}
    .col-lg-12{flex:0 0 100%;}

    .col-lg-offset-0{margin-left:0;}
    .col-lg-offset-1{margin-left:8.3333%;}
    .col-lg-offset-2{margin-left:16.6667%;}
    .col-lg-offset-3{margin-left:25%;}
    .col-lg-offset-4{margin-left:33.3333%;}
    .col-lg-offset-5{margin-left:41.6667%;}
    .col-lg-offset-6{margin-left:50%;}
    .col-lg-offset-7{margin-left:58.3333%;}
    .col-lg-offset-8{margin-left:66.6667%;}
    .col-lg-offset-9{margin-left:75%;}
    .col-lg-offset-10{margin-left:83.3333%;}
    .col-lg-offset-11{margin-left:91.6667%;}
    .col-lg-offset-12{margin-left:100%;}

    .col-lg-order-first{order:-1;}
    .col-lg-order-0{order:0;}
    .col-lg-order-1{order:1;}
    .col-lg-order-2{order:2;}
    .col-lg-order-3{order:3;}
    .col-lg-order-4{order:4;}
    .col-lg-order-5{order:5;}
    .col-lg-order-6{order:6;}
    .col-lg-order-7{order:7;}
    .col-lg-order-8{order:8;}
    .col-lg-order-9{order:9;}
    .col-lg-order-10{order:10;}
    .col-lg-order-11{order:11;}
    .col-lg-order-12{order:12;}
    .col-lg-order-last{order:13;}
}
/*xl*/
@media (min-width:1200px){
    .col-xl{flex-basis:0;flex-grow:1;}/*平分空間的佈局*/
    .col-xl-1{flex:0 0 8.3333%;}
    .col-xl-2{flex:0 0 16.6667%;}
    .col-xl-3{flex:0 0 25%;}
    .col-xl-4{flex:0 0 33.3333%;}
    .col-xl-5{flex:0 0 41.6667%;}
    .col-xl-6{flex:0 0 50%;}
    .col-xl-7{flex:0 0 58.3333%;}
    .col-xl-8{flex:0 0 66.6667%;}
    .col-xl-9{flex:0 0 75%;}
    .col-xl-10{flex:0 0 83.3333%;}
    .col-xl-11{flex:0 0 91.6667%;}
    .col-xl-12{flex:0 0 100%;}

    .col-xl-offset-0{margin-left:0;}
    .col-xl-offset-1{margin-left:8.3333%;}
    .col-xl-offset-2{margin-left:16.6667%;}
    .col-xl-offset-3{margin-left:25%;}
    .col-xl-offset-4{margin-left:33.3333%;}
    .col-xl-offset-5{margin-left:41.6667%;}
    .col-xl-offset-6{margin-left:50%;}
    .col-xl-offset-7{margin-left:58.3333%;}
    .col-xl-offset-8{margin-left:66.6667%;}
    .col-xl-offset-9{margin-left:75%;}
    .col-xl-offset-10{margin-left:83.3333%;}
    .col-xl-offset-11{margin-left:91.6667%;}
    .col-xl-offset-12{margin-left:100%;}

    .col-xl-order-first{order:-1;}
    .col-xl-order-0{order:0;}
    .col-xl-order-1{order:1;}
    .col-xl-order-2{order:2;}
    .col-xl-order-3{order:3;}
    .col-xl-order-4{order:4;}
    .col-xl-order-5{order:5;}
    .col-xl-order-6{order:6;}
    .col-xl-order-7{order:7;}
    .col-xl-order-8{order:8;}
    .col-xl-order-9{order:9;}
    .col-xl-order-10{order:10;}
    .col-xl-order-11{order:11;}
    .col-xl-order-12{order:12;}
    .col-xl-order-last{order:13;}
}

/*xs*/
.d-none{display: none !important;}
.d-block{display: block !important;}
/*sm*/
@media (min-width:576px){
    .d-sm-none{display: none !important;}
    .d-sm-block{display: block !important;}
}
/*md*/
@media (min-width:768px){
    .d-md-none{display: none !important;}
    .d-md-block{display: block !important;}
}
/*lg*/
@media (min-width:992px){
    .d-lg-none{display: none !important;}
    .d-lg-block{display: block !important;}
}
/*xl*/
@media (min-width:1200px){
    .d-xl-none{display: none !important;}
    .d-xl-block{display: block !important;}
}

/*統一設置內邊距*/
.col,.col-sm,.col-md,.col-lg,.col-xl,
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,
.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{
    padding:0 15px;
    width:100%;
}

index.css

/*佈局*/
    /*header*/
    .header-container{
        background:#fff;
        border-bottom:1px solid #dadada;
    }
    .header-logo-container,
    .header-btn-container,
    .header-nav-container{
        height:64px;
    }
    .header-btn-container{
        display:-webkit-flex;
        display:-moz-flex;
        display:-ms-flex;
        display:-o-flex;
        display:flex;
        /*有瀏覽器相容首碼，已省略。上線使用記得補全*/
        justify-content:flex-end;/*水平右對齊*/
        align-items:center/*;垂直居中*/
    }
    /*nav*/
    .nav-container{
        overflow:hidden;
        height:0;
        border-bottom:1px solid #dadada;
        transition:height .5s;/*需要補全相容性寫法*/
        position: relative;
        top:-1px;/*解決不展開時多出的1px底邊*/
    }
    /*js中最好不要修改樣式，而是通過控制類來改變*/
    .nav-container-extended{
        height:
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Vue代碼優化之mixins 混合器的使用
    使用場景 主要抽離組件共用的代碼，如各個頁面中分頁組件的data、methods，和ui原型中統一的confirm和alert彈窗 以及載入的進度條等 混合器： // mixin.js export const page = { data() { return { pageSize:20, curr ...
  • JavaScript雙重迴圈的嵌套
    JavaScript雙重迴圈的嵌套之逆戰班系列 迴圈嵌套 迴圈的嵌套就是一個迴圈體內又包含另一個完整的迴圈結構。如圖： 它的執行順序為由外到內，外層迴圈執行一次，內層迴圈將完整的執行一次。外層迴圈內的迴圈體執行完後，返回外層迴圈繼續執行，直到外層迴圈結束。 運用：使用迴圈嵌套輸出正反金字塔代碼圖： ...
  • 移動端屏幕適配
    移動端適配與響應式佈局的區別 簡單適配原理： px自動轉rem的方法： 1、sass less等 2、工程化手段 3、sublime安裝插件 下載cssrem插件壓縮包 https://github.com/flashlizi/cssrem sublime-首選項-瀏覽插件，打開插件目錄packag ...
  • java 文件上傳
    一、前端頁面 1、html (1)設置input 的type類型為file，代表 用於文件上傳。 (2)accept屬性，它規定能夠通過文件上傳進行提交的文件類型。accept值是 MIME 類型列表，多個類型之間用逗號隔開 (3)multiple 屬性是 HTML5 中的新屬性。屬性規定輸入欄位可 ...
  • HTML實體
    HTML 字元實體 HTML 中的預留字元必須被替換為字元實體。 HTML 實體 在 HTML 中，某些字元是預留的。 在 HTML 中不能使用小於號（<）和大於號（ ），這是因為瀏覽器會誤認為它們是標簽。 如果希望正確地顯示預留字元，我們必須在 HTML 源代碼中使用字元實體（character ...
  • 演算法的理論與實踐
    演算法 大O表示法 用來描述電腦演算法的效率， 數據項個數發生變化時，演算法的效率也會跟著發生改變 常見的大O表示方法 | 符號 | 名稱 | | | | | O(1) | 常數的 | | O(log(n)) | 對數的 | | O(n) | 線性的 | | O(nlog(n)) | 線性和對數乘積 | ...
  • TypeScript Jest 調試
    本文簡要介紹瞭如何在 Jest 單元測試中利用 Chrome Node DevTools 來輔助調試。 背景 代碼是 TS 寫的 所測功能無 UI 界面，出現Bug後不容易定位 用 console 式 debug 效率太低，需要打斷點式調試 在 Jest 單測中進行 debugger 目前有兩種方法 ...
  • 大眾學開發——59秒學習編寫刮刮樂游戲
    前言 本視頻通過59秒快速帶大家瞭解JS實現游戲刮刮樂的全過程，大家不妨可以動手嘗試一下。如萬一齣現困難可以積極與我溝通，我將無償提供技術支持及源代碼。 效果預覽 開始分析 1. 創建canvas 2. 設置圖片 3. 設置遮罩 4. 插入文檔 5. 綁定滑鼠移動事件 6. 檢查是否超出50%——移 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類