整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          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,可以不填。當然瀏覽器上表現也有不同,需要知道。


          主站蜘蛛池模板: 91久久精品一区二区| 一区二区三区免费在线视频| 怡红院AV一区二区三区| 视频一区视频二区日韩专区| 无码国产精成人午夜视频一区二区 | 日本一区午夜爱爱| 国产精品视频一区| 玩弄放荡人妻一区二区三区| 亚洲AV综合色区无码一区爱AV| 成人精品一区二区三区中文字幕| 国产精品一区二区在线观看| 国内自拍视频一区二区三区| 无码少妇一区二区三区 | 国产视频一区在线播放| 欧美人妻一区黄a片| 亚洲色无码专区一区| 日本视频一区在线观看免费| 一区二区三区高清| 亚洲午夜一区二区三区| 伊人色综合一区二区三区影院视频| 久久精品视频一区| 亚洲国产国产综合一区首页| 人妻无码视频一区二区三区| 日本免费一区二区三区四区五六区| 色老头在线一区二区三区| 久久国产一区二区三区| 亚洲午夜在线一区| 国产精品一区视频| 国产成人久久一区二区三区| 精品视频一区二区三区在线播放| 日韩精品一区二三区中文| 亚洲国产精品一区二区九九| 亚洲永久无码3D动漫一区| 亚洲AV综合色区无码一区爱AV| 精品福利一区二区三区免费视频| 无码一区二区三区AV免费| 国产麻豆剧果冻传媒一区| 国产一区二区四区在线观看| 亚洲国产一区在线| 成人免费一区二区三区在线观看| 性色AV一区二区三区无码|