使用柵格系統開發響應式頁面

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

響應式佈局的原理：使用媒體查詢設置斷點 柵格系統 grid.css /*解決嵌套時的padding:0 15px*/ .row{margin:0 -15px;} /*xs*/ .container{width:100%;margin:0 auto;/*水平居中*/padding:0 15px;/*解 ...


響應式佈局的原理：使用媒體查詢設置斷點

 

 

柵格系統 grid.css

/*解決嵌套時的padding:0 15px*/
.row{margin:0 -15px;}
/*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-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
    float:left;
}
.col-1{width:8.3333%;}
.col-2{width:16.6667%;}
.col-3{width:25%;}
.col-4{width:33.3333%;}
.col-5{width:41.6667%;}
.col-6{width:50%;}
.col-7{width:58.3333%;}
.col-8{width:66.6667%;}
.col-9{width:75%;}
.col-10{width:83.3333%;}
.col-11{width:91.6667%;}
.col-12{width: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-push-0{left:auto;}
.col-push-1{left:8.3333%;}
.col-push-2{left:16.6667%;}
.col-push-3{left:25%;}
.col-push-4{left:33.3333%;}
.col-push-5{left:41.6667%;}
.col-push-6{left:50%;}
.col-push-7{left:58.3333%;}
.col-push-8{left:66.6667%;}
.col-push-9{left:75%;}
.col-push-10{left:83.3333%;}
.col-push-11{left:91.6667%;}
.col-push-12{left:100%;}

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

/*sm*/
@media (min-width:576px){
    .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{
        float:left;
    }
    .col-sm-1{width:8.3333%;}
    .col-sm-2{width:16.6667%;}
    .col-sm-3{width:25%;}
    .col-sm-4{width:33.3333%;}
    .col-sm-5{width:41.6667%;}
    .col-sm-6{width:50%;}
    .col-sm-7{width:58.3333%;}
    .col-sm-8{width:66.6667%;}
    .col-sm-9{width:75%;}
    .col-sm-10{width:83.3333%;}
    .col-sm-11{width:91.6667%;}
    .col-sm-12{width: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-push-0{left:auto;}
    .col-sm-push-1{left:8.3333%;}
    .col-sm-push-2{left:16.6667%;}
    .col-sm-push-3{left:25%;}
    .col-sm-push-4{left:33.3333%;}
    .col-sm-push-5{left:41.6667%;}
    .col-sm-push-6{left:50%;}
    .col-sm-push-7{left:58.3333%;}
    .col-sm-push-8{left:66.6667%;}
    .col-sm-push-9{left:75%;}
    .col-sm-push-10{left:83.3333%;}
    .col-sm-push-11{left:91.6667%;}
    .col-sm-push-12{left:100%;}

    .col-sm-pull-0{right:auto;}
    .col-sm-pull-1{right:8.3333%;}
    .col-sm-pull-2{right:16.6667%;}
    .col-sm-pull-3{right:25%;}
    .col-sm-pull-4{right:33.3333%;}
    .col-sm-pull-5{right:41.6667%;}
    .col-sm-pull-6{right:50%;}
    .col-sm-pull-7{right:58.3333%;}
    .col-sm-pull-8{right:66.6667%;}
    .col-sm-pull-9{right:75%;}
    .col-sm-pull-10{right:83.3333%;}
    .col-sm-pull-11{right:91.6667%;}
    .col-sm-pull-12{right:100%;}
}
/*md*/
@media (min-width:768px){
    .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{
        float:left;
    }
    .col-md-1{width:8.3333%;}
    .col-md-2{width:16.6667%;}
    .col-md-3{width:25%;}
    .col-md-4{width:33.3333%;}
    .col-md-5{width:41.6667%;}
    .col-md-6{width:50%;}
    .col-md-7{width:58.3333%;}
    .col-md-8{width:66.6667%;}
    .col-md-9{width:75%;}
    .col-md-10{width:83.3333%;}
    .col-md-11{width:91.6667%;}
    .col-md-12{width: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-push-0{left:auto;}
    .col-md-push-1{left:8.3333%;}
    .col-md-push-2{left:16.6667%;}
    .col-md-push-3{left:25%;}
    .col-md-push-4{left:33.3333%;}
    .col-md-push-5{left:41.6667%;}
    .col-md-push-6{left:50%;}
    .col-md-push-7{left:58.3333%;}
    .col-md-push-8{left:66.6667%;}
    .col-md-push-9{left:75%;}
    .col-md-push-10{left:83.3333%;}
    .col-md-push-11{left:91.6667%;}
    .col-md-push-12{left:100%;}

    .col-md-pull-0{right:auto;}
    .col-md-pull-1{right:8.3333%;}
    .col-md-pull-2{right:16.6667%;}
    .col-md-pull-3{right:25%;}
    .col-md-pull-4{right:33.3333%;}
    .col-md-pull-5{right:41.6667%;}
    .col-md-pull-6{right:50%;}
    .col-md-pull-7{right:58.3333%;}
    .col-md-pull-8{right:66.6667%;}
    .col-md-pull-9{right:75%;}
    .col-md-pull-10{right:83.3333%;}
    .col-md-pull-11{right:91.6667%;}
    .col-md-pull-12{right:100%;}
}
/*lg*/
@media (min-width:992px){
    .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{
        float:left;
    }
    .col-lg-1{width:8.3333%;}
    .col-lg-2{width:16.6667%;}
    .col-lg-3{width:25%;}
    .col-lg-4{width:33.3333%;}
    .col-lg-5{width:41.6667%;}
    .col-lg-6{width:50%;}
    .col-lg-7{width:58.3333%;}
    .col-lg-8{width:66.6667%;}
    .col-lg-9{width:75%;}
    .col-lg-10{width:83.3333%;}
    .col-lg-11{width:91.6667%;}
    .col-lg-12{width: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-push-0{left:auto;}
    .col-lg-push-1{left:8.3333%;}
    .col-lg-push-2{left:16.6667%;}
    .col-lg-push-3{left:25%;}
    .col-lg-push-4{left:33.3333%;}
    .col-lg-push-5{left:41.6667%;}
    .col-lg-push-6{left:50%;}
    .col-lg-push-7{left:58.3333%;}
    .col-lg-push-8{left:66.6667%;}
    .col-lg-push-9{left:75%;}
    .col-lg-push-10{left:83.3333%;}
    .col-lg-push-11{left:91.6667%;}
    .col-lg-push-12{left:100%;}

    .col-lg-pull-0{right:auto;}
    .col-lg-pull-1{right:8.3333%;}
    .col-lg-pull-2{right:16.6667%;}
    .col-lg-pull-3{right:25%;}
    .col-lg-pull-4{right:33.3333%;}
    .col-lg-pull-5{right:41.6667%;}
    .col-lg-pull-6{right:50%;}
    .col-lg-pull-7{right:58.3333%;}
    .col-lg-pull-8{right:66.6667%;}
    .col-lg-pull-9{right:75%;}
    .col-lg-pull-10{right:83.3333%;}
    .col-lg-pull-11{right:91.6667%;}
    .col-lg-pull-12{right:100%;}
}
/*xl*/
@media (min-width:1200px){
    .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{
        float:left;
    }
    .col-xl-1{width:8.3333%;}
    .col-xl-2{width:16.6667%;}
    .col-xl-3{width:25%;}
    .col-xl-4{width:33.3333%;}
    .col-xl-5{width:41.6667%;}
    .col-xl-6{width:50%;}
    .col-xl-7{width:58.3333%;}
    .col-xl-8{width:66.6667%;}
    .col-xl-9{width:75%;}
    .col-xl-10{width:83.3333%;}
    .col-xl-11{width:91.6667%;}
    .col-xl-12{width: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-push-0{left:auto;}
    .col-xl-push-1{left:8.3333%;}
    .col-xl-push-2{left:16.6667%;}
    .col-xl-push-3{left:25%;}
    .col-xl-push-4{left:33.3333%;}
    .col-xl-push-5{left:41.6667%;}
    .col-xl-push-6{left:50%;}
    .col-xl-push-7{left:58.3333%;}
    .col-xl-push-8{left:66.6667%;}
    .col-xl-push-9{left:75%;}
    .col-xl-push-10{left:83.3333%;}
    .col-xl-push-11{left:91.6667%;}
    .col-xl-push-12{left:100%;}

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

/*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;}
}

/*清浮動*/
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.row:before,
.row:after{
    display: table;
    content:" ";
}
.clearfix:after,
.container:after,
.row:after{
    clear:both;
}

/*統一設置內邊距*/
.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;
    position: relative;
}

 

使用柵格系統開發響應式頁面

 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.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-push-7"
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 移動端屏幕適配
    移動端適配與響應式佈局的區別 簡單適配原理： 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%——移 ...
  • 用flex佈局實現柵格系統
    之前一篇柵格系統是用float佈局來實現的 https://www.cnblogs.com/chenyingying0/p/12495051.html 其實並不太適合移動端，不過優點是相容性比較好 這篇用flex來進行佈局，不管在PC端還是移動端都很適合 不過存在相容性問題，在低版本瀏覽器不適用。但 ...
  • JavaScript——WEBAPIS_有關於移動端特效，還有本地存儲
    關於移動端的js特效話題 註意以下 移動端的js開發，我們一般的開發做法就是使用第三方js框架或者插件去開發，有線考慮一下插件，而不是框架。不太會去寫原生的js，因為實在是太過於麻煩了 有關於本地存儲 本地存儲的話題 隨著互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類