一个页面仔必备的知识清单

夜黑黑
1,338 阅读14分钟
美丽的拼凑
美丽的拼凑

一个页面仔必备的知识清单

「适合人群：对页面仔感兴趣的后端小哥哥」

「观看时间：30min」

「本文主要梳理一些前端画界面的一些必会 css 属性和技巧，读完之后并不能让你成为你的界面画的很快很美，但能让你知道画界面学会这些就够了。想要很快很美，实战/练习，逃不掉的~」

前言

界面是软件开发直接展示给客户的东西，画的巨丑就会被喷，画的慢，影响进度；所以画界面在软件开发中还是蛮重要的，画好一个界面除了界面美观，代码也要美观，还有浏览器兼容，各分辨率的适配问题，好难啊，有点写不下去了~

html 元素

有人说界面元素皆可 div，事实上是这样的，但是常见的一些元素还是尽量掌握，毕竟还是有区别~

<!-- html5标准网页声明 -->
<!DOCTYPE html>
<!-- 一个页面就是一个html，浏览器会根据内部html解析器解析html标签显示内容 -->
<html lang="en">
<!-- 头部，引入css，设置页面标题，浏览器控制等 -->
<head>
    <meta charset="UTF-8">
    <!-- 浏览器的一些控制项 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器显示的标题</title>
</head>
<!-- 内容部门，页面元素绘制区域 -->
<body>
    <!-- 一个块级元素 这就是有人说的元素皆可div -->
    <div></div>
    <!-- 无序列表 -->
    <ul>
        <li></li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li></li>
    </ol>
    <!-- 表格 -->
    <table>
        <th></th>
        <td></td>
    </table>
    <!-- 超链接 -->
    <a href="" target="_black"></a>
    <!-- 图片 -->
    <img src="" alt="">
    <!-- 常用行元素标签 -->
    <span></span>
    <!-- 加粗的常用行元素标签 -->
    <strong></strong>
    <!-- 斜体的常用行元素标签 -->
    <i></i>
    <!-- 标题 -->
    <h1></h1>
    <h2></h2>
    <!-- 段落 -->
    <p></p>
    <!-- 下标上表 -->
    <sup></sup>
    <sub></sub>
    <!-- 表单 -->
    <form action="">
        <!-- 输入框 有很多类型 常见的文本/邮件/数字/文件等 -->
        <input type="text">
        <!-- 下拉选择 -->
        <select name="" id="">
            <option value=""></option>
        </select>
        <!-- 按钮 -->
        <button></button>
    </form>
</body>
</html>

这些都是基础的 html 元素标签，如果你对哪个标签不太理解的，百度一下

还有一些 html5 以后的语义化标签，语义化标签的作用呢，一是语义化，表达含义，二是利于浏览器引擎搜索，那么有哪些呢，常用的：

<!-- 头部 -->
<header>
    <!-- 导航 -->
    <nav></nav>
</header>
<!-- 主题部分 -->
<main>
    <!-- 一个内容块，div的抽象 -->
    <section></section>
    <!-- 专门放图片的 -->
    <figure></figure>
    <!-- 视频 -->
    <video src=""></video>
    <!-- 音频 -->
    <audio src=""></audio>
</main>
<!-- 底部 -->
<footer></footer>

语义化的标签还有很多，要详细了解的自行百度，这里列出来的是一些我常用的，那么还有 H5 一些 API，geolocation(获取位置) / WebSocket(实时通信) / localStorage(本地存储) / sessionStorage(会话存储) / worker(线程) , 自行了解吧

CSS 属性

css 属性就更多了，关键在于记住和练习，记住（背单词/运用），练习（最好直接实战，没有机会就自己私下练习）,由于太多了这边按照重要程度分组吧

最常用的一些样式属性

/* 字体大小
* 单位：像素px 百分比% 基于浏览器rem 基于父标签em  vw基于总宽度 vh基于总高度
*/
font-size: 20px;
/* 字体加粗 */
font-weight: bold;
/* 字体类型 我平时用的平方 */
font-family: '微软雅黑';
/* 文本对齐方式 左中右 */
text-align: center;
/* 字体间距 */
letter-spacing: 2px;
/* 是否允许字体换行 常用来文本过长省略... */
white-space: nowrap;
/* 文本溢出... */
text-overflow: ellipsis;
/* 行高，通常设置行元素的高居中 */
line-height: 200px;
/* 宽度，只有块元素和行内块元素可以设置宽高，行元素无法设置宽高 */
width: 200px;
/* 高度 */
height: 200px;
/* 颜色 支持rgb rgba 16进制 HSL */
color: red;
/* 透明度 0-1 */
opacity: 1;
/* 背景颜色/图片等总属性  缩写自行百度 */
background: red;
/* 背景图 */
background-image: url('./name.png');
/* 设置背景图自适应的方法（不会变形的） */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* 内边距 - 元素边框距离内容的距离，如果设置了box-sizing: border-box;则元素的宽高 = 内容宽高+内边距+边框的高度 */
padding: 20px;
/* 外边距 - 元素边框距离其它元素的距离*/
margin: 20px;
/* 边框 中间的属性可以改变边框的类型，支持虚线，点线等 */
border: 1px solid red;
/* 边框圆角 */
border-radius: 5px;
/* 阴影，前两个值分别是水平和垂直的偏移，第三个值是阴影的大小 颜色就不用说了 */
box-shadow: 0 0 2px red;
/* 设置盒子模型的大小为 内容宽高+内边距+边框的高度 */
box-sizing: border-box;
/* 内容益处操作，常用的有移除和出滚动条 */
overflow: hidden;
/* 浮动 常用左浮动右浮动  浮动的元素会脱离文档流，即没有了宽高，父容器宽高难以控制，所以我们一般会清除浮动 */
/* 清除浮动的方法很多，自行学习，我用的是父元素添加伪类元素的方式 */
float: left;
/* 清除浮动 */
clear: both;
/* 定位 - 常用的相对定位 固定定位 绝对定位 三种具体怎么定位的，尝试一下，不尝试说也说不清楚*/
position: relative;
/* 设置元素的类型 常用的：行元素/行内块元素/块元素  -  好像是H5出来的吧 弹性布局flex - 目前布局基本都可以用它解决了 */
display: inline;
/* 弹性布局 */
display: flex;
/* 鼠标样式，常用的手型  支持自定义，默认的也有很多，自己百度 */
cursor: pointer;
/* 设置元素的图层优先级，数字越大优先级越高 优先级属性只对设置了定位的属性生效 */
z-index: 1000;
/* !important权重最高 */
z-index: 1001 !important;
/* 垂直对齐方式 常用middle text-bottom bottom 常用于图标或者图片和文字的垂直对齐，很实用 */
vertical-align: middle;

除了这些元素选择器也是常用的，那么最常用的选择器有元素选择/类选择/ID 选择/后代选择器，较为常用的子元素选择器，还有不太常用的一些相邻兄弟选择器/伪类选择器，这里就不贴代码了，可以前往w3c查看

过渡动画

过渡用于简单的初始化效果，动画用于复杂的效果制作,学习这一章节最重要的是自己实现尝试，因为过度和动画的效果比较显著差别也别较大，所以尝试是最好理解的方法。实践开发中，过渡稍微比动画用到的多

/* 过渡 第一个参数为过渡的属性名称all为所有 第二个属性为过渡速度(linear匀速，还有先快后慢等) */
/* 第三个参数为过渡时间，那么这些属性是可以拆分单独属性的，transition是将常用的几个属性缩写了 */
transition: all linear 2s;
/* 延时过渡 */
transition-delay: 1s;


/* 说到过渡，经常会和元素的平移/旋转/缩放一起使用 */
/* 旋转元素的基点位置 默认为左上角 */
transform-origin: center;
/* 平移的属性 translate平移，单位是px rotate旋转，单位是deg度数 scale缩放，>0的数字 */
/* 平移/旋转/缩放都有X/Y/Z轴的属性设置，灵活使用，做出一些炫酷的效果 */
transform: translate() rotate() scale();

/* 其中Z轴需要配合3D效果来使用 */
/* 设置元素的变化方式 */
transform-style: preserve-3d;
/* 设置元素的视觉距离 */
perspective: 1200px;

早期的一篇效果文章：CSS3D 动画制作一个 3d 旋转的筛子

弹性布局

弹性布局还是比较简单的，常用的水平方向垂直方向的几个属性熟练使用，作用的元素搞清楚，其实用起来还是蛮简单的,需要注意的是弹性布局做的元素受宽度影响，所以，一般情况下，我们需要将作用的元素设置宽度，我实际情况用的是像素和百分比灵活使用

/* 设置弹性布局 */
display: flex;
/* 宽度超出容器宽度是否允许换行 wrap允许 */
flex-wrap: wrap;
/* 水平左对齐 */
justify-content: flex-start;
/* 水平右对齐 */
justify-content: flex-end;
/* 水平居中 */
justify-content: center;
/* 两端对齐 */
justify-content: space-around;
/* 两端评分水平居中一般对齐 */
justify-content: space-between;
/* 垂直居上对齐 */
align-items: flex-start;
/* 垂直居下对齐 */
align-items: flex-end;
/* 垂直居中对齐 */
align-items: center;

我学习的时候参考的是阮一峰的网络日志,里面还有很多属性，但是日常工作基本没用到过~

不常用的一些属性

/* 定宽居中，先设置宽度 */
width: 1000px;
margin: 0 auto;
/* 字体 */
/* 斜体 */
font-style: italic;
/* 下划线 */
text-decoration: underline;
/* 删除线 */
text-decoration: line-through;
/* 段落留空,也就是一段话前面留两个空格 */
text-indent: 2rem;
/* 列表 ul默认有一个内边距~ */
list-style: none;

/* 表格的边框合并方式 collapse合并 */
border-collapse: collapse;

/* 元素鼠标悬浮 */
div:hover {

}

HTML 和 CSS 部分到这里总结的差不多了，这不是一个标准，这只是我对这些知识的一个简单总结，里面很多细致的都没有详细描述，不过能够熟练掌握这些，灵活运用，画个界面绰绰有余了

快速调试

如何快速调试效果，快速开发，通常情况下，我们先在浏览器内进行样式编写，输出效果，满意后复制到编译器，这是最快的开发方法

如何在浏览器内快速调试

  1. 选择一个个人喜欢的调试后台展示方式，屏幕大的话放下面或者右面较好，不建议分屏，来回切换很麻烦，除非你是 12 寸

  2. 选择要调试的元素,我见大多后端都是右击检查 其实有快捷键的: Ctrl+Shift+C

  3. 颜色，颜色可以点击色值的方框打开色值版调试

  1. 在浏览器内可以调试的内容有元素内容和元素属性，元素内容经常会被忽略
  1. 修改后的属性直接拖拽复制到编译器内就可以了

利用 UI 组件

不管是以往使用 jquery,还是现在使用 vue 这样的框架，一套 UI 组件是离不开的，UI 组件内元素和样式都已经为我们处理好了，需要我们处理的无非就是数据；那么往往 UI 组件库的样式和我们设计出来的样式会不大一样，这个时候需要我们去覆盖这些样式，那么覆盖这些样式时，需要注意，为避免替换后全局受影响，在覆盖第三方 ui 库的样式时，一定要添加自己独有的样式，以防样式冲突

利用好 UI 组件，可以达到事半功倍的效果，当然了，覆盖样式还是需要我们自己来实现的，所以前面所说的 html/css 是基础

浏览器兼容

说到浏览器的兼容，就不得不提 IE，IE 的版本太多，支持几乎完全不一样，目前大多的框架都支持 IE10/IE11，那么 IE10 一下的大多都放弃了吧，就算是政府的项目现在也在用 chrome/QQ/360 这些了吧。

那么对于目前 vue/react/angular 这样的框架使用的 less/es6/ts 都是通过对应 babel-loder 来解析成浏览器识别的，那么 es6 中的一些语法需要我们安装babel-polyfill来解决 ie 兼容的问题

在之前需要适配 IE 的时候，什么向下兼容，向上适配，很幸运，我没有接触到~

各浏览器内核简单了解一下

  • 谷歌： WebKit
  • 火狐：Gecko
  • 360，猎豹，2345 浏览器： 使用 IE+Chorme 双内核
  • 搜狗、遨游、QQ 浏览器： Trident（兼容模式）+Webkit（高速模式）；

项目实施有明确的的浏览器兼容要求的话记得要提前做规划，如果没有，咨询项目经理，没有要求就按照调试的浏览器为标准

分辨率适配

分辨率适配是平常开发过程中较为头疼的事情，适配也是有很多很多方案，对应不同的场景灵活运用~

其实我也比较头疼，做适配我最喜欢像 echarts 那种图表类的大数据展示，其适配只需要调用相应的 API

下面我简单介绍几种用过的是适配方案:

  • 栅格布局

    栅格原理是结合弹性布局和媒体查询，不同分辨率下将容器划分为不同的若干份，平时用到的 UI 组件都有，这种我平时用到的不多，这种适应于简单有规律的布局，并且对不同分辨率没有硬核展示效果的要求

  • 百分比 + 媒体查询

    利用百分比来确定容器的固定位置和自适应大小，那么这种需要根据不同分辨率来修改容器内的内容样式，如字体，间距，常用在大屏处理自己自定义的展示内容，业务系统也很常用

  • vw 根据容器宽度来

    所有的单位统一用 vw 来定义，从而达到网页随便啦都能较好的展示，这种方法项目中没有用过，因为对不同分辨率的展示不可控，只能说是较好的展示，不便于拿到真实的项目中

  • 缩放 + 媒体查询

    利用媒体查询在不同分辨率通过 transform: scale(.8);来控制，用在以先展示界面可以，业务系统不要用，会导致内部一些功能异常

    一般需要做自适应的几个分辨率:

    @media screen and (min-width: 1024px) and (max-width:1280px)
@media screen and (min-width: 1281px) and (max-width:1366px)
@media screen and (min-width: 1367px) and (max-width:1440px)
@media screen and (min-width: 1441px) and (max-width:1680px)

    以上四种不全，1920 以及更大的分比率我默认采用 1920 的,还有几种我把包含在了以上 4 种里面

领导/客户/用户 分辨率的不一致确实挺头疼的，但是这就是我们该解决的问题，以上几种解决方法需要在不同场景灵活应用，以达到满足客户需求。到目前我也么有一个万能的解决方案，希望有更好的解决方案的朋友能够分享一下

实战开发

在实际开发过程中，很多情况下，没有设计师？没有产品经理？没有原型图？怎么办尼~咱们就是设计师/产品经理，谁让我们前端全占呢~风凉话，那这种情况下除了自身来分析需求，挖掘用户想要的内容外，项目之初系统的色调最好先定下来~要不然红绿蓝？肯定是不行的，色调搭配咱们也不在行啊，还好有一些比较好的色值搭配的网站供我们直接用~真香

色值搭配

我们知道黑白是通用的颜色，所以通常业务系统我们选择白色或者浅白色作为底色，展示系统通常以黑色或者较深的颜色作为底色~我们系统颜色一般不要使用太多的颜色，最好不要超过 3 种，所以我们通常以一种颜色为主色调，其它的颜色采用主色调相近的颜色做区分~

颜色参考的一些网站：

参考

除了色值搭配外，整体界面的展示效果我们可以参考一些比较漂亮的网站来触发灵感，比如：

  • 飞冰的一些模板
  • 站酷内很多很多优秀的设计师发布的漂亮系统图

以上是作为一个页面仔的一些分享，如有错误，还请指正

公众号：

本文使用 mdnice 排版

avatar
文章
阅读
粉丝