使用柵格系統和flex佈局開發響應式頁面源碼

来源:https://www.cnblogs.com/chenyingying0/archive/2020/01/07/12160923.html
-Advertisement-
Play Games

響應式佈局的原理xsmall <576pxsmall >=576pxmedium >=768pxlarge >=992pxxlarge >=1200px 接下來是效果圖 中屏及以上效果 移動端效果 方案一：使用柵格系統開發響應式頁面 index.html <!DOCTYPE html> <html ...


響應式佈局的原理
xsmall <576px
small >=576px
medium >=768px
large >=992px
xlarge >=1200px

接下來是效果圖

中屏及以上效果

移動端效果

方案一：使用柵格系統開發響應式頁面

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>響應式佈局</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/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="./index.html" class="header-logo">
                        <img src="img/logo.svg" alt="logo">
                    </a>
                </div>
                <!-- 下拉圖標（三條杠），中屏隱藏 -->
                <div class="header-btn-container col-4 d-md-none">
                    <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>
                <!-- 中屏導航 -->
                <nav 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>
                </nav>
            </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>
            <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">
                <!-- 中屏位置往右7個網格 -->
                <div class="slider-text-container col-md-5 col-md-push-7">
                    <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-pull-5">
                    <img src="img/1.png" alt="cellphone">
                </div>
            </div>
        </div>
    </div>
    <!-- 中屏一行顯示3張圖 -->
    <div class="product-container">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a href="###" class="product-item">
                        <img src="img/2-1.jpg" alt="cellphone" class="product-img">
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="###" class="product-item">
                        <img src="img/2-2.jpg" alt="cellphone" class="product-img">
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="###" class="product-item">
                        <img src="img/2-3.jpg" alt="cellphone" class="product-img">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 移動端回到頂部 -->
    <div class="backtop-container d-md-none">
        <a href="#" class="btn-backtop">回到頂部</a>
    </div>

    <div class="helper-container">
        <div class="container">
            <div class="helper-info-container">
                <p>* Galaxy A9s具備後置四攝功能，Galaxy A6s為後置雙攝產品。</p>
                <p>* Galaxy S9 | S9+廣告中手機背面圖是Galaxy S9+，Galaxy S9為背面單攝像頭產品。</p>
                <p>* 本網站的產品圖片以及型號、數據、功能、性能、規格參數等僅供參考，三星有可能對上述內容進行改進，具體信息請參照產品實物、產品說明書。</p>
                <p>* 除非經特殊說明，本網站中所涉及的數據均為三星內部測試結果，涉及的對比均為與三星產品相比較。</p>
            </div>
            <!-- 中屏回到頂部 -->
            <div class="row">
                <div class="helper-backtop-container col-md-2 col-md-offset-10 d-none d-md-block">
                    <a href="#" class="btn-backtop">回到頂部</a>
                </div>
            </div>
            <!-- 底部導航，中屏一行4個，小屏一行2個 -->
            <div class="row">
                <div class="col-6 col-md-3">
                    <h3 class="helper-list-title">網站地圖</h3>
                    <ul class="helper-list">
                        <li><a href="###">關於三星</a></li>
                        <li><a href="###">投資者關係</a></li>
                        <li><a href="###">新聞中心</a></li>
                        <li><a href="###">人才招聘</a></li>
                        <li><a href="###">三星開發者網站</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md-3">
                    <h3 class="helper-list-title">三星商店</h3>
                    <ul class="helper-list">
                        <li><a href="###">網上商城</a></li>
                        <li><a href="###">最新活動</a></li>
                        <li><a href="###">授權體驗店</a></li>
                        <li><a href="###">全產品專賣店</a></li>
                        <li><a href="###">三星視頻空間</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md-3">
                    <h3 class="helper-list-title">服務支持</h3>
                    <ul class="helper-list">
                        <li><a href="###">線上服務</a></li>
                        <li><a href="###">郵件咨詢</a></li>
                        <li><a href="###">聯繫我們</a></li>
                        <li><a href="###">服務中心查詢</a></li>
                        <li><a href="###">三星專賣店招募</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md-3">
                    <h3 class="helper-list-title">官方分享</h3>
                    <ul class="helper-list">
                        <li>
                            <a href="###" class="btn-share btn-share-weixin"></a>
                            <a href="###" class="btn-share btn-share-weibo"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="footer-container">
        <div class="container">
            <div class="row">
                <div class="col-md-10">
                    <ul>
                        <li class="footer-item">
                            <a href="###" class="footer-link">服務條款</a>
                        </li>
                        <li class="footer-item">
                            <a href="###" class="footer-link">重要聲明</a>
                        </li>
                        <li class="footer-item">
                            <a href="###" class="footer-link">隱私政策</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <a href="###" class="footer-link">中國/中文 &gt;</a>
                </div>
            </div>
            <div>
                <p>此網頁最好使用IE10瀏覽器、Chrome瀏覽器、Safari瀏覽器或其他新式瀏覽器進行瀏覽</p>
                <p>京ICP備xxxxxxxx號 京公網安備1101xxxxxxxx號</p>
            </div>
        </div>
    </div>

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

        // 移動端點擊下拉按鈕，展開頂部導航
        document.getElementById('btn-toggle').onclick = function() {
            // nav.className += ' ' + navExtendedClassName;
            if (nav.classList.contains(navExtendedClassName)) { // 收起
                nav.classList.remove(navExtendedClassName);
            } else { // 展開
                nav.classList.add(navExtendedClassName);
            }
        };
    </script>
</body>
</html>

base.css

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-size: 14px;
}

li {
    list-style: none;
}

a {
    font-size: 14px;
    color: #363636;
    text-decoration: none;
}
a:hover {
    color: #1428a0;
}

img {
    vertical-align: top;
    width: 100%;
    border: none;
}

grid.css

.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

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

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.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 {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

.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.33333333%;
}
.col-2 {
    width: 16.66666667%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33333333%;
}
.col-5 {
    width: 41.66666667%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33333333%;
}
.col-8 {
    width: 66.66666667%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33333333%;
}
.col-11 {
    width: 91.66666667%;
}
.col-12 {
    width: 100%;
}

.col-offset-12 {
    margin-left: 100%;
}
.col-offset-11 {
    margin-left: 91.66666667%;
}
.col-offset-10 {
    margin-left: 83.33333333%;
}
.col-offset-9 {
    margin-left: 75%;
}
.col-offset-8 {
    margin-left: 66.66666667%;
}
.col-offset-7 {
    margin-left: 58.33333333%;
}
.col-offset-6 {
    margin-left: 50%;
}
.col-offset-5 {
    margin-left: 41.66666667%;
}
.col-offset-4 {
    margin-left: 33.33333333%;
}
.col-offset-3 {
    margin-left: 25%;
}
.col-offset-2 {
    margin-left: 16.66666667%;
}
.col-offset-1 {
    margin-left: 8.33333333%;
}
.col-offset-0 {
    margin-left: 0;
}

.col-pull-12 {
    right: 100%;
}
.col-pull-11 {
    right: 91.66666667%;
}
.col-pull-10 {
    right: 83.33333333%;
}
.col-pull-9 {
    right: 75%;
}
.col-pull-8 {
    right: 66.66666667%;
}
.col-pull-7 {
    right: 58.33333333%;
}
.col-pull-6 {
    right: 50%;
}
.col-pull-5 {
    right: 41.66666667%;
}
.col-pull-4 {
    right: 33.33333333%;
}
.col-pull-3 {
    right: 25%;
}
.col-pull-2 {
    right: 16.66666667%;
}
.col-pull-1 {
    right: 8.33333333%;
}
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • button 使用 flex 佈局的相容性問題
    button 使用 flex 佈局的相容性問題 在低版本的手機系統中，我們發現 不能夠作為 flex 容器，即使在 CSS 中指定了 且 autoprefixer 也已經轉換成相容屬性，也還是不起作用。具體表現在其內容並不能使用 flex 佈局對齊，比如說居中。 這裡的背景是，我們經常需要展示一些按 ...
  • 如何自學電腦前端開發？精細的自學步驟是什麼樣的？
    比較推薦的學習過程應該是以興趣為驅動的，用搜索做輔助： 1. 我想做一個個人網站，或者給我們團隊或者小組做一些介紹頁面。怎麼做？搜索發現要學習：HTML、CSS。 2. 發現一個網站設計的好漂亮，交互真贊，動畫效果真好。我想在我自己網站上也放上，可是我看不懂它的代碼？搜索發現要學習：交互視覺、CSS ...
  • vue里不同數據的迴圈,其中的數組對象
    用產品的屬性數據說明 頁面里顯示效果為:要把產品的屬性顯示到頁面上,產品屬性為後臺自主上傳產品的屬性,產品的屬性不同,所以需要把屬性和屬性值顯示到頁面上 產品屬性數據為: properties: "[ {"錶面處理":["發黑","發白"]}, {"顏色":["紅色","黃色"]}, {"大小":[ ...
  • javascript當中Function用法
    4）Function用法例 3.4.1<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></head><script> /*When the Global object is created, it ...
  • try/catch/finally 語句
    定義和用法 try/catch/finally 語句用於處理代碼中可能出現的錯誤信息。 錯誤可能是語法錯誤，通常是程式員造成的編碼錯誤或錯別字。也 可能是拼寫錯誤或語言中缺少的功能（可能由於瀏覽器差異）。 try語句允許我們定義在執行時進行錯誤測試的代碼塊。 catch 語句允許我們定義當 try  ...
  • CSRF繞過後端Referer校驗
    CSRF繞過後端Referer校驗分正常情況和不正常的情況，我們這裡主要討論開發在寫校驗referer程式時，不正常的情況下怎麼進行繞過。 正常情況 正常的情況指伺服器端校驗Referer的代碼沒毛病，那麼意味著前端是無法繞過的。 我之前考慮過的方案： JS修改Referer，失敗； 請求惡意網頁後 ...
  • JavaScript 運算，流程式控制制和迴圈
    算數運算符算術運算符描敘運算符實例加+10 + 20 = 30減-10 – 20 = -10乘*10 * 20 = 600除/10 / 20 = 0.5取餘數%返回除法的餘數9%2=1浮點數精確度浮點數值的最高精度是 17 位小數console.log(0.07 * 100); // 7.00000... ...
  • 移動端屏幕適配+事件+常見問題解決
    移動端屏幕適配 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 移動端屏幕適配與響應式的區別移動端屏幕適配 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類