~續上一章

• 2. 項目頁面布局
• • 2.1 基礎布局
  • • 2.1.1 PC端屏幕寬度適配設置
    • 2.1.2 主體容器viewport背景圖片
    • 2.1.3 HTML結構
    • 2.1.4 css樣式代碼
  • 2.2 邊框圖片
  • • 2.2.1 使用場景
    • 2.3 面板公共樣式開發
    • 2.3.1 面板邊框圖片尺寸測量
    • 2.3.2 面板 Panel 子容器`.inner`
    • 2.3.3 子容器 .inner 邊距調整
    • 2.3.4 面板.panel下外邊距設置
  • 2.4 通用類名使用字體圖標
  • • 2.4.1 引入字體圖標樣式文件。
    • 2.4.2 字體圖標的調用
  • 2.5 概覽區域(overview)-布局
  • • 2.5.1 布局
    • 2.5.3 使用字體圖標
    • 2.5.4 本節完整代碼

2. 項目頁面布局

2.1 基礎布局

2.1.1 PC端屏幕寬度適配設置

設置最外層父容器viewport的最大寬度和最小寬度

.viewport {min-width: 1024px;max-width: 1920px;margin: 0 auto; }

準備一個超大盒子viewport 在最外層包裹數據可視化看板，用flex布局劃分為三份（即三列：左、中、右）：

column 列容器（分三列）：占比 3：4：3
中間容器外間距 32px 20px 0

2.1.2 主體容器viewport背景圖片

給大盒子 viewport 指定背景圖片，做為看板頭部 Logo

要求： viewport 主體容器 - 限制最小寬度1024px，最大寬度1920px，最小高度780px。其它樣式如下，

• 居中顯示
• 使用logo.png做為背景圖，在容器內顯示
• 內間距 88px 20px 0

2.1.3 HTML結構

在主體容器viewport內添加3個盒子（上面提到的布局：左、中、右3列column）

<div class="viewport"><div class="column">1</div><div class="column">2</div><div class="column">3</div> </div>

2.1.4 css樣式代碼

• 添加display: flex布局方式（彈性布局）；

一張背景圖片，如果想要完全顯示出來，用background-size: contain，如果只想要鋪滿整個盒子，就用background-size: cover（對于后者，如圖縮放瀏覽窗口，圖片不會居中，且圖片的一側不會顯示）。

.viewport {/* 如果不加background-size: contain, 頭部背景圖會超出縮放后的瀏覽器看不全*/display: flex;min-width: 1024px;max-width: 1920px;padding: 1.5rem .25rem 0; /*解決頭部logo.png背景圖被遮蓋的問題，使其向內擠壓*/margin: 0 auto;background: url(../images/logo.png) no-repeat 0 0 /contain; /*這里采用了連寫*/min-height: 780px; }

• 按 3：4：3的比例設置3個column盒子占整個屏幕的份數。

.viewport .column {flex: 3; } .viewport .column:nth-child(2) {flex: 4; }

display: flex 既可以應用于容器中，也可以應用于行內元素。是W3C提出的一種新的方案，可以簡便、完整、響應式地實現各種頁面布局。

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒模型提供最大的靈活性。設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

• flex-direction:row：沿水平主軸讓元素從左向右排列；
• flex-direction:column：讓元素沿垂直主軸從上到下垂直排列；
• flex-direction:row-reverse：沿水平主軸讓元素從右向左排列；

更多相關知識：點我學習 Flex布局 語法教程

到此為止，初步外部輪廓如下：

接下來，進行模塊的細分，劃分如下：

css3中自適應邊框圖片運用：

下圖是截取了最終效果圖的部分，我們能觀察到邊框的特點（盒子大小不一，但都有相似的邊框）。

因此，這里引入新的知識點——邊框圖片

2.2 邊框圖片

相關知識點：

• 邊框圖片使用場景；
• 邊框圖片切割原理；
• 邊框圖片語法規范。

2.2.1 使用場景

1、在本可視化項目中，盒子的大小不同，但是邊框樣式相同，此時就不能用背景圖片來完成，而需要用邊框圖片來實現。
區別于給盒子加背景，邊框圖片只針對盒子的邊框（類似于給邊框加顏色）。如下圖所示：

為了實現豐富多彩的邊框效果，在CSS3中，新增了 border-image屬性，這個新屬性允許指定一幅圖像作為元素的邊框。
注意：它是邊框類型，不是盒子類型

2、邊框圖片切割原理
原理：把四個角切出去（九宮格的由來），中間部分可以鋪排、拉伸或者環繞。

注：按照 上→右→下→左的順序切割。切的時候，要兼顧四個角的最大完整性。

3、邊框圖片語法

屬性描述

border-image-source	用在邊框的圖片的路徑（圖片來源）
border-image-slice	圖片邊框向內偏移。（裁剪的尺寸不能帶單位。按上→右→下→左的順序）
border-image-width	圖片邊框的寬度（注：要帶單位）
border-image-repeat	圖片邊框是否平鋪（repeat）、鋪滿（round）、或拉伸（stretch）默認是拉伸。

border-image-width ：如果不做設置，則默認為盒子邊框寬度（border的值）
border 同border-image-width的區別：后者如果加大值，不會擠壓盒子內空間（前者會）。

2.3 面板公共樣式開發

項目設計稿中，面板中的模塊不論大小，其圖片邊框都是相同的，因此需要把邊框的公共樣式提取出來，寫一個公共的面板樣式類（.panel），哪個盒子用到這種樣式，就直接調用這個類。
面板類：.panel

2.3.1 面板邊框圖片尺寸測量

利用FireWorks對邊框圖片設計稿進行測量，得到如下數據：

• 面板.panel的CSS 樣式代碼：

.panel {border: 15px solid #e33333;border-width: .625rem .475rem .2625rem 1.625rem; /*輸入50px 38px 21px 130px后自動轉換為rem*/border-image-source: url(../images/border.png);border-image-slice: 50 38 21 130; /*注意：此處一定不要跟單位*/ }

注意：
這里省去了border-image-width，原因如下：
~上面樣式代碼中，由于已給了邊框寬度border-width，此時邊框圖片寬度就不用給了。因為邊框圖片寬度border-image-width（未設置時） 默認和邊框寬度一樣。

保存并運行，此時頁面渲染情況如下所示：

2.3.2 面板 Panel 子容器.inner

在面板.panel 中放入一個子容器.inner，鍵入文字“內容位置測試”，運行后盒子中顯示的內容在整個.panel中明顯靠下，如下圖：

原因：是之前設置的4個邊框寬度過寬，占用了Panel內部空間所致，如下圖所示：

• 解決辦法

上圖中，黃色區域（.inner子盒子）如要填滿圖片框區域，以使得文字信息靠左上，解決方法如下：

將小盒子絕對定位，相應的父盒子相對定位；

由于是絕對定位，此時可將小盒子向top、right、bottom、left四個方向拉伸以填滿圖片框區域。拉伸的值，取前面切圖尺寸的負值（即反向）。

CSS代碼如下：

.panel {position: relative; /*相對定位*/ }

給父容器添加相對定位

.inner {position: absolute; /*絕對定位*/top: -0.625rem;right: -0.475rem;bottom: -.2625rem;left: -1.625rem; }

這樣，子盒子.inner就填滿整個父盒子.panel，效果如下：

2.3.3 子容器 .inner 邊距調整

經測量，子容器.inner 距父元素.panel上下24px，左右 36px(均需轉換為（em單位），添加如下CSS樣式代碼：

.inner {position: absolute;top: -0.625rem;right: -0.475rem;bottom: -.2625rem;left: -1.625rem;padding: .3rem .45rem; }

調整后的最終位置如下圖：

2.3.4 面板.panel下外邊距設置

下外邊距：20px（需轉換為rem單位）

.panel {margin-bottom: .25rem;border: 15px solid transparent; /*將邊框線由原來的#e33333紅色改為透明，防止圖片顯示不出來*/ }

2.4 通用類名使用字體圖標

項目中使用了字體圖標，如下圖。因此

2.4.1 引入字體圖標樣式文件。

<head><link rel="stylesheet" href="fonts/icomoon.css"><link rel="stylesheet" href="CSS/index.css"> </head>

注意：引入時，字體圖標必須放在自己書寫的css樣式之前，才能調用。

2.4.2 字體圖標的調用

直接調用圖標對應的類名即可。（類名在css文件中標注）

引入css文件和聲明字體圖標時，注意路徑問題。

2.5 概覽區域(overview)-布局

概覽區域即整個大的區域，但由于和面板Ppanel同樣都用到.panel類，因此，在原HTML結構中，加入一個.overview類：

2.5.1 布局

HTML結構：

<body><!-- 最外層父容器 --><div class="viewport"><div class="column"><div class="panel overview"><div class="inner"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></div></div><div class="column">2</div><div class="column">3</div></div> </body>

CSS樣式：

.overview {height: 1.375rem; } .overview ul {display: flex; /*讓li一行顯示*/justify-content: space-between; /*兩端對齊并平均分配*/ }

布局效果如下圖：

2.5.3 使用字體圖標

用<i></i>標簽包裹字體圖標，并用行內樣式修改為設計稿的指定顏色

<i class="icon-dot" style="color: #006cff"></i> <i class="icon-dot" style="color: #6acca3"></i> <i class="icon-dot" style="color: #6acca3"></i> <i class="icon-dot" style="color: #ed3f35"></i>

添加文字內容和字體圖標后，效果如下：

2.5.4 本節完整代碼

HTML結構

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>數據可視化項目</title><link rel="stylesheet" href="fonts/icomoon.css"><link rel="stylesheet" href="CSS/index.css"><script src="js/echarts.min.js"></script><script src="js/flexible.js"></script><script src="js/jquery.min.js"></script> </head><body><!-- 最外層父容器 --><div class="viewport"><div class="column"><div class="panel overview"><div class="inner"><ul><li><h4>2,190</h4><span><i class="icon-dot" style="color: #006cff"></i>設備總數</span></li><li><h4>190</h4><span><i class="icon-dot" style="color: #6acca3"></i>季度新增</span></li><li><h4>3,001</h4><span><i class="icon-dot" style="color: #6acca3"></i>運營設備</span></li><li><h4>108</h4><span><i class="icon-dot" style="color: #ed3f35"></i>異常設備</span></li></ul></div></div></div><div class="column">2</div><div class="column">3</div></div> </body> </html>

CSS樣式代碼：

/* 清除元素默認的內外邊距 ,設置CSS3盒模型*/ * {margin: 0;padding: 0;box-sizing: border-box; } /* 讓所有斜體不傾斜 */ em, i {font-style: normal; } /* 去掉列表前面的小點 */ li {list-style: none; } /* 圖片沒有邊框 去掉圖片底側的空白縫隙 */ img {border: 0;vertical-align: middle; } /* 讓button按鈕變成小手 */ button {cursor: pointer; } /* 取消鏈接下劃線 */ a {color: #666;text-decoration: none; } a:hover {color: #e33333; } body {background: url(../images/bg.jpg) no-repeat;/* 背景縮放 全覆蓋定位區域*/background-size: cover;/*或寫作，*//* background: url(../images/bg.jpg) no-repeat 0 0 / cover; */ }/* 實現rem適配 */ @media screen and (max-width:1024px) {html {font-size: 42.66px!important;} } @media screen and (min-width:1920px) {html {font-size: 80px!important;} } .viewport {display: flex;min-width: 1024px;max-width: 1920px;padding: 1.5rem .25rem 0;margin: 0 auto;background: url(../images/logo.png) no-repeat 0 0 /contain;min-height: 780px; } .viewport .column {flex: 3; } .viewport .column:nth-child(2) {flex: 4; }/* 公共面板樣式類 */ .panel {position: relative;border: 15px solid transparent;border-width: .625rem .475rem .2625rem 1.625rem;border-image-source: url(../images/border.png);border-image-slice: 50 38 21 130;margin-bottom: .25rem; } .inner {position: absolute;top: -0.625rem;right: -0.475rem;bottom: -.2625rem;left: -1.625rem;padding: .3rem .45rem; }/* 概覽區域模塊制作 */ .overview {height: 1.375rem; } .overview ul {display: flex;/*讓li一行顯示*/justify-content: space-between;/*兩端對齊并平均分配*/color: #fff; } .overview ul li h4 {font-size: .35rem;color: #fff;margin: 0 0 .1rem .06rem; } .overview ul li span {font-size: .2rem;color: #4c9bfd; }

粗體字調整：去掉h4內的字體加粗（設計稿中的數字字體較細）

h4 {/* font-weight: 400; */font-weight: normal; }

至此，第一個模塊樣式處理完畢

原文地址：https://oldriver.blog.csdn.net/article/details/107133895

上一章：學習筆記之數據可視化（一）—— 項目適配方案
下一章：學習筆記之數據可視化（二）——頁面布局（中）

總結

以上是生活随笔為你收集整理的学习笔记之数据可视化（二）——页面布局（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。