CSS Grid 布局入門實戰-模仿Windows 11 快速布局窗口

i，朋友，您來啦。帶上小板凳，我們一起聊一聊今天的話題。

首先，使用過Windows 11的朋友，可能使用過窗口布局功能。那么，如何通過Grid布局實現此功能呢？

網格布局容器

采用網格布局的區域，一般稱為“容器”。在容器內部通過網格定位的子元素，一般稱為“項目”。

display: grid | inline-grid;

HTML

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

CSS

.grid{display: grid;}

CSS

.grid{display: inline-grid;}

定義列寬與行高

在指定容器為網格布局以后，采用 grid-template-columns 定義每一列的列寬，采用 grid-template-rows 定義每一行的行高。

grid-template-columns: <length> | minmax(min, max) | auto | repeat | ...
grid-template-rows: <length> | minmax(min, max) | auto | repeat | ...

HTML

<!-- 定義一個4列、多行的界面。 -->
<div>
    <div class="grid">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>
<div>
    <div class="grid grid-repeat">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

<div>
    <div class="grid grid-fr">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

CSS（多種寫法，效果基本一致。）

.grid{
    display: inline-grid;
    background-color: #212121;
    padding:5px;
    /*寫法1*/
    grid-template-columns: 10px 30px 10px 30px;
    grid-template-rows: 15px 30px;
    grid-gap:10px;
}

.grid-repeat{
    background-color: rgb(140, 139, 139);
    /*寫法2*/
    grid-template-columns: repeat(2, 10px 30px);
    grid-template-rows: repeat(2, 15px 30px);
}

.grid-fr{
    background-color: rgb(193, 193, 193);
    /*寫法3 取決于容器寬度*/
    grid-template-columns: 1fr 3fr 1fr 3fr;
    /*取決于容器高度*/
    grid-template-rows: 1fr 2fr;
}

.grid-item{
    background-color: #ddd;
    min-width: 10px;
    min-height:15px;
}

行間距、列間距

grid-gap: row col | row-col | 20px 20px | 20px; 分別定義行列或同時定義行列間距；
grid-row-gap: 20px; 單獨定義行間距
grid-column-gap: 20px; 單獨定義列間距

網格區域

grid-template-areas: <string>+

Windows11 窗口布局功能模擬

CSS

.window-layout-select{
  position: absolute;right:0;z-index: 1009;padding:5px;
  background-color: #212121;border-radius: 4px;
  grid-template-columns: repeat(2, 20px) 0 repeat(6, 6.6667px) 0 repeat(12, 3.3333px);
  grid-template-rows: 30px 0 15px 15px;
  grid-gap:2px;
  grid-template-areas: 
    "a b . c c c c d d . e e e e f f f f g g g g"
    ". . . . . . . . . . . . . . . . . . . . . ."
    "h i . j j j k k k . l l l m m m m m m n n n"
    "h o . p p p q q q . l l l m m m m m m n n n";
  display: none;
}
.window-layout-select>div{background-color: #ddd;cursor: pointer;}
.window-layout-select>div:hover{background-color:aqua;}
.radius.top.left{border-top-left-radius:4px;}
.radius.top.right{border-top-right-radius:4px;}
.radius.bottom.left{border-bottom-left-radius:4px;}
.radius.bottom.right{border-bottom-right-radius:4px;}

.item-a {grid-area: a;}
.item-b {grid-area: b;}
.item-c {grid-area: c;}
.item-d {grid-area: d;}
.item-e {grid-area: e;}
.item-f {grid-area: f;}
.item-g {grid-area: g;}
.item-h {grid-row: 3 / 5;}
.item-i {grid-area: i;}
.item-j {grid-area: j;}
.item-k {grid-area: k;}
.item-l {grid-area: l;}
.item-m {grid-area: m;}
.item-n {grid-area: n;}
.item-o {grid-area: o;}
.item-p {grid-area: p;}
.item-q {grid-area: q;}

/*demo*/
.demo{
    display: grid;right:40%;top:25%;
}

關注作者：關注有趣的網頁布局。

希望本文能夠對您有所幫助，感謝您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，讓我們一起加油吧。

TML+CSS+JS自主設計彈出窗口的方法，在線編輯器

html怎么彈出一個小窗口

html彈出一個小窗口的方法可能有很多，就比如本站（笨鳥工具-璞玉天成，大器晚成）的導航欄點擊之后會有一個小窗口（小頁面）彈出，然后文章頁面的底部有兩個小圖標，當鼠標懸放在上面的時候，也可以彈出一個小窗口，然后點擊下方實例代碼的試一試按鈕，也可以彈出一個小窗口，是本站提供的HTML+css+javascript的在線編輯器。這里介紹的一簡單的方法和一種自主設計的方法，不需要很復雜的程序設計，也不需要框架，用javascript和css就可以：

HTML+CSS+JS自主設計彈出窗口的方法，在線編輯器

自主設計html彈出小窗口的方法

這個方法需要結合html、css和javascript三種語言，即web三件套全得用上。該方法的原理就是將本來的窗口的style中display設置為none，當點擊按鈕之后，設置為block，并為該窗口綁定位置，實例代碼如下：

<div id="ck1"><p style='text-align:center;line-height:80px;'>這個窗口，可以說是自己設計的了，可以在這里添加其它的標簽和功能</p></div>
<button class='btn btn-default' onclick='show2()'>點擊彈出自己設計的小窗口</button>
<style>
  #ck1{display:none;position:fixed;top:20%;left:20%;width:50%;height:80px;z-index:9999;background-color:skyblue;border-radius:5px;}
</style>
<script>
  function show2(){
  	document.getElementById("ck1").style.display = "block";
  }
</script>

HTML+CSS+JS自主設計彈出窗口的方法，在線編輯器

代碼解析

這個自主設計的方法中，除了display屬性的設置之外，另一個關鍵點在于z-index值的設置，html元素的排列堆疊，不僅有水平方向、豎直方向，還有深度方向，就像立體的直角坐標系當中，不僅有x軸、y軸，還有z軸，即z-index的設置可以修改div或html元素的z軸位置。

HTML+CSS+JS在線編輯器可以參考原文

原文地址：html怎么彈出一個小窗口，自主設計方法，在線編輯器 - HTML教程

擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

大家好！我是/小鄭搞碼事/的小鄭

今天和大家分享一下JS如何操作瀏覽器窗口。只講如何打開一個新窗口

先來看效果圖

上面這個圖界面效果就是我們要實現的。

我們常常需要創建一個新窗口，用來向用戶顯示額外的信息，同時又避免他們正在閱讀的信息消失。從實現方案上來看，盡管我們可以用HTML打開一個新的瀏覽器窗口，但是使用JavaScript可以對新窗口的內容和特性進行更多的控制。

接下來，我們看一下怎么實現的

一、定義窗口打開函數

定義一個打開新窗口的函數newWindow。如上面代碼所示，變量catWindow包含一個新的窗口對象，這個對象引用圖像文件icon.png，這個新窗口的名稱是catWin，必須設置名稱，因為我們以后可能希望在a或另一個腳本中引用這個窗口。新窗口的寬度是350像素，高度是260像素，位置是左邊400，上邊400。

二、寫一個調用函數

頁面中，包含一個onload事件處理程序，它調用newWinLinks函數，newWinLinks循環遍歷頁面上的a，檢查是否有任何a包含class屬性值newWin。如果有，就設置這個a元素的onclick事件處理程序，從而，當點擊這個a時，調用newWindow函數。

總結一下

需要注意兩個地方：

1、newWindow中，在寬度和高度參數中的逗號之間不能有任何空格，如果有空格，那么腳本可能在某些瀏覽器中無效，總地來說，當腳本出現錯誤，需要進行高度時，要首先查找這樣的小問題。

2、比如向窗口中添加參數時，希望窗口具有工具欄，地址欄，滾動條

toolbar=yes,location=yes,scrollbars=yes

參數默認是no，可以不填。當然瀏覽器上表現也有不同，需要知道。

在線咨詢

上一篇：用node.js實現一個網頁爬蟲
下一篇：Top microsoft-窗口置頂工具推薦

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商