学习笔记之数据可视化（二）——页面布局（上）

淩亂°似流年 2023-02-23 03:51 2阅读 0赞

### ~续上一章 ###

*  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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]

### 2.1.2 主体容器viewport背景图片 ###

给大盒子 viewport 指定背景图片，做为看板头部 Logo  
![可视化看板头部][20200705082932508.jpg_pic_center]  
**要求：** viewport 主体容器 - 限制最小宽度1024px，最大宽度1920px，最小高度780px。其它样式如下，

*  居中显示
 *  使用logo.png做为背景图，在容器内显示
 *  内间距 88px 20px 0

### 2.1.3 HTML结构 ###

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

### 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布局 语法教程][Flex_]

到此为止，初步外部轮廓如下：

![初步效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]  
接下来，进行模块的细分，划分如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 1]

> css3中自适应边框图片运用：

下图是截取了最终效果图的部分，我们能观察到边框的特点（盒子大小不一，但都有相似的边框）。

![边框图片一][20200705103814654.png]  
![边框图片二][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]  
因此，这里引入新的知识点——**边框图片**

## 2.2 边框图片 ##

相关知识点：

*  边框图片使用场景；
 *  边框图片切割原理；
 *  边框图片语法规范。

### 2.2.1 使用场景 ###

1、在本可视化项目中，盒子的大小不同，但是边框样式相同，此时就不能用背景图片来完成，而需要用边框图片来实现。  
区别于给盒子加背景，边框图片只针对盒子的边框（类似于给边框加颜色）。如下图所示：  
![边框图片效果示例][20200705104518528.jpg_pic_center]

> 为了实现丰富多彩的边框效果，在CSS3中，新增了 border-image属性，这个新属性允许指定一幅图像作为元素的边框。  
> 注意：它是边框类型，不是盒子类型

2、边框图片切割原理  
**原理**：把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。  
![切图示意图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 2]

> 注：按照 上→右→下→左的顺序切割。切的时候，要兼顾四个角的最大完整性。

3、边框图片语法

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">border-image-source</td> 
   <td align="left">用在边框的图片的路径（图片来源）</td> 
  </tr> 
  <tr> 
   <td align="left">border-image-slice</td> 
   <td align="left">图片边框向内偏移。（裁剪的尺寸不能带单位。按上→右→下→左的顺序）</td> 
  </tr> 
  <tr> 
   <td align="left">border-image-width</td> 
   <td align="left">图片边框的宽度（注：要带单位）</td> 
  </tr> 
  <tr> 
   <td align="left">border-image-repeat</td> 
   <td align="left">图片边框是否平铺（repeat）、铺满（round）、或拉伸（stretch）默认是拉伸。</td> 
  </tr> 
 </tbody> 
</table>

> border-image-width ：如果不做设置，则默认为盒子边框宽度（border的值）  
> border 同border-image-width的区别：后者如果加大值，不会挤压盒子内空间（前者会）。

### 2.3 面板公共样式开发 ###

项目设计稿中，面板中的模块不论大小，其图片边框都是相同的，因此需要把边框的公共样式提取出来，写一个公共的面板样式类（`.panel`），哪个盒子用到这种样式，就直接调用这个类。  
面板类：`.panel`

### 2.3.1 面板边框图片尺寸测量 ###

利用![FW][]FireWorks对边框图片设计稿进行测量，得到如下数据：  
![边框图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 2]

*  面板`.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`（未设置时） 默认和边框宽度一样。

保存并运行，此时页面渲染情况如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 3]

### 2.3.2 面板 Panel 子容器`.inner` ###

在面板`.panel` 中放入一个子容器`.inner`，键入文字“内容位置测试”，运行后盒子中显示的内容在整个`.panel`中明显靠下，如下图：  
![位置测试][20200705180246931.png]

> 原因：是之前设置的4个边框宽度过宽，占用了Panel内部空间所致，如下图所示：

![切割示意图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 4]

*  解决办法

上图中，黄色区域（`.inner`子盒子）如要填满图片框区域，以使得文字信息靠左上，解决方法如下：

1.  将小盒子绝对定位，相应的父盒子相对定位；
2.  由于是绝对定位，此时可将小盒子向`top`、`right`、`bottom`、`left`四个方向拉伸以填满图片框区域。拉伸的值，取前面切图尺寸的负值（即反向）。

CSS代码如下：

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

> 给父容器添加相对定位

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

这样，子盒子`.inner`就填满整个父盒子`.panel`，效果如下：  
![位置调整][2020070518272214.png]

### 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;
    }

调整后的最终位置如下图：  
![调整后][20200705184914775.png]

### 2.3.4 面板.panel下外边距设置 ###

下外边距：20px（需转换为rem单位）

.panel { 
        margin-bottom: .25rem;
        border: 15px solid transparent;  /*将边框线由原来的#e33333红色改为透明，防止图片显示不出来*/
    }

## 2.4 通用类名使用字体图标 ##

项目中使用了字体图标，如下图。因此  
![字体图标1][1]  
![字体图标2][2]

### 2.4.1 引入字体图标样式文件。 ###

![在这里插入图片描述][20200705201301923.png]

> **注意**：引入时，字体图标必须放在自己书写的css样式之前，才能调用。

### 2.4.2 字体图标的调用 ###

直接调用图标对应的类名即可。（类名在css文件中标注）

> 引入css文件和声明字体图标时，注意路径问题。

## 2.5 概览区域(overview)-布局 ##

概览区域即整个大的区域，但由于和面板Ppanel同样都用到`.panel`类，因此，在原HTML结构中，加入一个`.overview`类：

### 2.5.1 布局 ###

**HTML**结构：

**CSS**样式：

.overview { 
        height: 1.375rem;
    }
    .overview ul { 
        display: flex;    /*让li一行显示*/
        justify-content: space-between;  /*两端对齐并平均分配*/
    }

布局效果如下图：  
![布局效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 5]

### 2.5.3 使用字体图标 ###

用`<i></i>`标签包裹字体图标，并用行内样式修改为设计稿的指定颜色

添加文字内容和字体图标后，效果如下：  
![模块一效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 3]

### 2.5.4 本节完整代码 ###

1.  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>

1.  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;
    }

![h4默认粗体][h4]  
![字体变细][20200705204415518.png]  
至此，第一个模块样式处理完毕

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

上一章：[学习笔记之数据可视化（一）—— 项目适配方案][Link 1]  
下一章：[学习笔记之数据可视化（二）——页面布局（中）][Link 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200705065750619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[20200705082932508.jpg_pic_center]: https://img-blog.csdnimg.cn/20200705082932508.jpg#pic_center
[Flex_]: https://www.runoob.com/w3cnote/flex-grammar.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200705102638854.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200705102409446.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[20200705103814654.png]: https://img-blog.csdnimg.cn/20200705103814654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200705103833439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[20200705104518528.jpg_pic_center]: https://img-blog.csdnimg.cn/20200705104518528.jpg#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/2020070510510411.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[FW]: https://img-blog.csdnimg.cn/20200705183706338.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200705171920295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200705174219650.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[20200705180246931.png]: https://img-blog.csdnimg.cn/20200705180246931.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200705180345931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[2020070518272214.png]: https://img-blog.csdnimg.cn/2020070518272214.png
[20200705184914775.png]: https://img-blog.csdnimg.cn/20200705184914775.png
[1]: https://img-blog.csdnimg.cn/20200705191316182.png
[2]: https://img-blog.csdnimg.cn/20200705191354194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[20200705201301923.png]: https://img-blog.csdnimg.cn/20200705201301923.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200705195747959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200705203202762.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[h4]: https://img-blog.csdnimg.cn/20200705204053533.png
[20200705204415518.png]: https://img-blog.csdnimg.cn/20200705204415518.png
[https_oldriver.blog.csdn.net_article_details_107133895]: https://editor.csdn.net/md/?articleId=107133895
[Link 1]: https://oldriver.blog.csdn.net/article/details/107133839
[Link 2]: https://oldriver.blog.csdn.net/article/details/107168129