您现在的位置是:首页 > 技术栈 > 前端开发前端开发

一个前端页面仔知识清单必备大全

2020-02-28【前端开发】人已围观

简介本文内容主要是梳理一些前端画界面的一些必会 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;

弹性布局


弹性布局还是比较简单的,常用的水平方向垂直方向的几个属性熟练使用,作用的元素搞清楚,其实用起来还是蛮简单的,需要注意的是弹性布局做的元素受宽度影响,所以,一般情况下,我们需要将作用的元素设置宽度,我实际情况用的是像素和百分比灵活使用
/* 设置弹性布局 */
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 部分到这里总结的差不多了,这不是一个标准,这只是我对这些知识的一个简单总结,里面很多细致的都没有详细描述,不过能够熟练掌握这些,灵活运用,画个界面绰绰有余了
 
 

快速调试


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

如何在浏览器内快速调试

  • 在浏览器内可以调试的内容有元素内容和元素属性,元素内容经常会被忽略
  • 选择一个个人喜欢的调试后台展示方式,屏幕大的话放下面或者右面较好,不建议分屏,来回切换很麻烦,除非你是 12 寸
  • 选择要调试的元素,我见大多后端都是右击检查 其实有快捷键的: Ctrl+Shift+C
  • 颜色,颜色可以点击色值的方框打开色值版调试
  • 在浏览器内可以调试的内容有元素内容和元素属性,元素内容经常会被忽略
  • 修改后的属性直接拖拽复制到编译器内就可以了

 


 

利用 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 种,所以我们通常以一种颜色为主色调,其它的颜色采用主色调相近的颜色做区分~

颜色参考的一些网站:

 

参考


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

  • 飞冰的一些模板
  • 站酷内很多很多优秀的设计师发布的漂亮系统图
以上是作为一个页面仔的一些分享,如有错误,还请指正

Tags:HTML   CSS

很赞哦! ()

上一篇:帝国cms添加代码高亮

下一篇:返回列表

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

站点信息

  • 建站时间:2018-06-26
  • 网站程序:帝国CMS7.5
  • 文章统计34篇文章
  • 标签管理标签云
  • 统计数据友盟数据
  • 网站地图XML网站地图
  • 微信公众号:扫描二维码,关注我们