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

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布局以后,子元素的floatclearvertical-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 面板边框图片尺寸测量

利用FWFireWorks对边框图片设计稿进行测量,得到如下数据:
边框图片

  • 面板.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子盒子)如要填满图片框区域,以使得文字信息靠左上,解决方法如下:

  1. 将小盒子绝对定位,相应的父盒子相对定位;
  2. 由于是绝对定位,此时可将小盒子向toprightbottomleft四个方向拉伸以填满图片框区域。拉伸的值,取前面切图尺寸的负值(即反向)。

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 通用类名使用字体图标

项目中使用了字体图标,如下图。因此
字体图标1
字体图标2

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 本节完整代码

  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默认粗体
字体变细
至此,第一个模块样式处理完毕

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

上一章:学习笔记之数据可视化(一)—— 项目适配方案
下一章:学习笔记之数据可视化(二)——页面布局(中)

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页