012020-3

【Web前端开发】第二课、HTML基础之HTML概述

前端达人

文章目录

一、HTML的概述

什么是HTML？
HTML的标签、元素、属性
标签、元素
标签、属性

附：补充上一节课网站和网页的笔记：

附：img标签的详细介绍

一、HTML的概述
什么是HTML？

HTML指的是超文本标记语言（Hyper Text Markup Language）

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML不区分大小写
HTML的标签、元素、属性
标签、元素

由尖括号包围，比如 <title>

通常是成对出现的

<title>百度一下，你就知道</title>

其中，<title> 为开始标签

中间的 “百度一下，你就知道” 为内容

</title>为结束标签，我们可以清楚的观察到，标签结束是有 “/”。

则标签和内容，构成了网页的元素。

标签的嵌套关系，如下列例子，你品

<html><body></body></html>

<html><body></html></body>

标签的嵌套缩进

如图所示<html>为外层标签，称为父元素，<head>和<body>为内层标签，称为子元素。其中<head>与<body>又互称为兄弟元素

<!DOCTYPE html>

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明没有结束标签。

<!DOCTYPE> 声明对大小写不敏感。

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：<!doctype html>

我们学习的是HTML5，所以我们不过多对HTML4的声明做过多解释。

如果上述对<!doctype html>的概述不清楚的话，

那记住以下两点即可，1. 不分大小写，2.在HTML的网页<html>标签之前加上<!doctype html>就可以啦。

图示为 HTML DOM树，DOM：Document Object Model（文档对象模型）

2. 标签、属性

一个标签可能有多个属性，属性先后与顺序无关

“=” 为赋值符号

属性与属性之间用空格隔开

附：补充上一节课网站和网页的笔记：

HTML网页的编码为 utf-8

网站可以理解成一个文件夹，而网页就是一个个的文件

网页的文件后缀常见的有：htm、html、jsp、php、asp

网站的文件结构通常包含 images文件夹，css文件夹，js文件夹，

一个简单的网页，的文件目录通常由 images、css、js，作用顾名思义，就是存放相对应的文件资源

附：img标签的详细介绍

<img> 标签有两个必需的属性：src 和 alt。

注释：从技术上来说，图像并不会插入到HTML页面中去，而是通过 src的值(URL) 链接到HTML页面上的，<img>标签的作用是为被引用的图像创建占位符。

<img>标签常用的属性有src、alt、width、height、title

src和alt为 img 标签的必需元素。

话不多说，看图，为你们讲解代码。

看网站的演示图和代码图，想必大家都很清楚了吧。

（为了更直观的看到效果，我写了div和div的样式，1px粗的红色实线边框，这里的代码以后再具体详解）

title和alt 的区别别，体现在第 11 行和第 14 行，想必大家就能看出来了吧

i. alt 属性是在图片不能正常显示时出现的文本提示。

ii. title 属性是在鼠标在移动到元素上的文本提示。

width和height的作用，用来规定图像的宽度和高度，单位为像素（px）

src路径，由于我的文件夹结构为 index.html文件和 images 文件夹。

所以 src 的路径为 src="images/图片.后缀"，即src="URL"

URL即（Uniform Resource Locator,统一资源定位符，在WWW上，每一信息资源都有统一的且在网上唯一的地址。

简单的理解URL，就是网址，地址

如果图片路径引用错误，都会导致网页中的图片无法正常显示！如，第 14 行和第 20 行代码。

以上为img标签的常见用法。在我们写网页的时候，建议img写上 src、alt、width、height这四个属性，是否需要 title 具体看网站的功能。

以上就是，第二课、Web前端开发之HTML基础的全部内容了，感谢阅读

————————————————

版权声明：本文为CSDN博主「MineChen」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/MineSu/article/details/104549536

评论(0) 浏览(2276)

012020-3

vue框架渐进性的理解和mvvm模式的理解

前端达人

引言

现在市场很多前端开发的招聘岗位都或多或少的要求你要掌握vue，可以说vue在国内是非常的火爆的，下面我给大家介绍一下vue框架吧！

vue是渐进式框架

vue的核心是一个视图模板引擎，但是这并不能说明vue不是一个框架，如上图所示在声明式渲染（视图模板）基础上，vue可以添加组件系统component，vue-router客户端路由，vuex的状态管理，vue-cli构建工具来构建一个完整的框架，更重要的是这些功能相互独立，你可以任意选用你项目需要的部件，不一定非要全部整合在一起（就像是vuex它是一个很好的可以管理组件之间共享状态的部件，但非必须在你的每一个项目中使用它，如果说你的项目相对简单，组件之间的通信相对简单你完全可以不使用它），可以看到渐进式，其实就是vue的使用方式，同时也能看到vue的设计理念
vue是mvvm模式
为什么说vue是mvvm模式呢？这个大家首先要知道mvvm是什么。mvvm是Model-View-ViewModel的简写，即模型视图视图模型。模型是指后端传过来的数据，视图是指我们看到的页面，视图模型是mvvm框架的核心，他是连接view和model的桥梁，它有两个方向，第一将后端传来的数据转换成页面可以看到的视图，第二，将用户在页面上的交互转化成为后端数据，我们称之为双向绑定。
总结mvvm模式的视图和模型是不能直接通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解为是ViewModel，它可以实现dom监听和数据绑定
vue的数据绑定原理

当你把JavaScript对象传入vue实例作为data选项，vue会遍历此对象的所以属性，并使用Object.defineProperty把这些属性转换为getter和setter，每一个组件都有一个watcher实例，它会在组件渲染过程中，把接触过的数据记录为依赖，当依赖的setter被触发是，他会通知watcher，重而使关联的数据重新渲染，以下是代码展示。

<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
    get () {
        // obj设置了一个myname属性，当访问obj.myname属性会执行get方法
    },
    set (data) {
        // 当修改myname属性会执行set方法
        // data会得到你修改的值
        obox.innerHTML = data
    }
})

object.definePeoperty有一下缺点： {
1：无法监听es6的set，map变化
2：无法监听class类型的数据
3：属性的新增和删除也无法监听
4：数组元素的新整和删除也无法监听
}

评论(0) 浏览(2561)

012020-3

html5+css3实现2D-3D动画效果实例

前端达人

html5+css3实现2D-3D动画效果实例

主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。

文章目录

html5+css3实现2D-3D动画效果实例

2D变换

3D变换

2D中应用实现案例

3D中应用实现案例

css3动画

2D变换

是在一个平面对元素进行的操作。

可以对元素进行水平或者垂直位移、旋转或者拉伸.

1

2

*2d对下面面坐标系简单分析如下：

（1）.默认状态下，x轴是水平的，向右为正。

（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。

3D变换

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于2d多出个z轴

下面首先需要了解2D、3D中的功能函数：

位移 translate()
translateX() 方法，元素在其 X 轴以给定的数值进行位置移动
translateY() 方法，元素在其 Y 轴以给定的数值进行位置移动
缩放scale()
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
旋转rotate()
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
正数”是顺时针，“负数”是逆时针，单位为“deg”。
倾斜skew()
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，
第二个参数表示垂直方向的倾斜角度
3D中多了Z轴，其他属性值不变

2D中应用实现案例
位移 translate()
效果图：

 position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);

.box3:hover .box3_h2{
    transform: translateY(0px);
}

<!-- 盒子3：实现位移 -->
        <div class="box3 box">
            <img class="img_3" src="../16/images/3.png" alt="">
            <div class="box_mm"></div>
            <h2 class="box3_h2">Taylor Swift</h2>
            <p class="box3_p1">I'm so glad you made time to see me. How's life, 
                tell me how's your family? I haven't seen them in a while. 
                You've been good, busier then ever. 
                We small talk, work and the weather Your guard is up and I know why...</p>
        </div>

/* 公共样式 */
.box{
    width:350px;
    height: 300px;
    position: relative;
    transform: 1s;
    margin: 20px 20px;
    float: left;
}
img{
    display: block;
    width: 350px;
    height: 300px;
}
/* 鼠标滑过覆盖上方的白色部分 */
.box_mm{
    width:350px;
    height: 300px;
    transform: 1s;
    background-color: #fff;
    position: absolute;/*设置定位，挡住box，*/
    top: 0;
    opacity: 0;/*透明，0全透明*/
}
h2{
    font-size: 20px;
}

/* 盒子3 */
.box3{
    overflow: hidden;
}
.img_3{
    transition: 2s;
}
.box3_h2{
    color: #fff;
    position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);
}
.box3_p1{
    font-size: 14px;
    width: 320px;
    position: absolute;
    left: 20px; bottom: 80px;
    transition: 2s;
    opacity: 0;
}
/*交互样式*/
.box3:hover .img_3{
    transform: translateY(-10px);
}
.box3:hover .box3_h2{
    transform: translateY(0px);
}
.box3:hover .box3_p1{
    transform: translateY(-50px);
    opacity: 1;
}

————————————————
版权声明：本文为CSDN博主「weixin_43513126」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43513126/article/details/104570062

评论(0) 浏览(3105)

012020-3

Web开发期待的CSS的一些功能

前端达人

著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查，请15名顶尖的 Web 设计师对 CSS 提出自己的期望，15名设计师包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。

调查结果显示，最被期待的 CSS 功能是 CSS 圆角，其它期待的功能包括跨浏览器渐变与阴影，类似 Photoshop 的层融合效果，更一致的声明简化语法以及对条件判断的本地支持。这些期待中一部分已经包含在未来的 CSS-3 中，但更多的仍然只是一些梦想。

WebMonkey 的编辑们将这个 Wishlist 发表在他们的网站并让 WebMonkey 的读者投票选出最热门的项目，以下是按投票多少排列的 CSS Wishlist 部分列表（只选取最热门的项目）。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

CSS 圆角

by Webmonkey

标准的，直接基于 CSS 的圆角是很多人的期待，这样，就不必再费尽心机只为了显示一个圆角。

垂直居中

by michael lascarides

针对 block 对象的更容易的垂直居中设置。（div + css 让人既爱且恨的一个重要原因就是垂直居中，让一个对象垂直居中显示在 block 容器中，且兼容所有主流浏览器简直就是一个噩梦 - 译者）

兼容所有主流浏览器的 CSS 2.1 与 CSS 3

by Erik

能兼容所有主流浏览器的 CSS 2.1 与 CSS 3 是 Erik 的梦想，但其中的某些功能在某些浏览器中总是磕磕绊绊。

更好的嵌入字体

by Webmonkey

不要 sFIR, 不要图片，要真正的字体。

CSS 变量

by Jeffrey Jordan Way, via css-tricks.com

能定义诸如色彩值一类的变量

更好地支持 100% height

by JLR

设置了 100% height 的容器的顶部和底部真正附着在页首和页尾，页面中间部分匹配内容并准确显示滚动条。搜索“100% height css”能找到各种解决方法，但事情原本不该这么复杂。

可重复使用变量

by Neal Lindsay

比如:

@var mycolor = #0080FF

h1 { color: mycolor; }

div.containbox { border: 1px mycolor; }

浏览器一致性与定义顺序

by JML

浏览器一致性非常重要。某些 CSS 在某些浏览器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同时，对里面的 CSS 定义应该可以覆盖全局定义。

一句话复原

by Chris Pitzer

很多设计者要写40多行代码才能清除浏览器默认 CSS 定义，应当有一个简单的声明一次性将所有 CSS 复原，比如：

body { clear-default-styles:true; }

图形旋转与反转

by Stephen Bell

在设置图形圆角效果时候，我们需要同一个圆角图片的4个旋转版本来实现。应该有一个简单的声明实现旋转，如：

img .horiz { rotate:90; }

成组的 CSS 简化定义

by Volkan Görgülü, via css-tricks.com

如:

foo h1, #foo h2, #foo h3

改为:

foo [h1, h2, h3]

渐变

by Anonymous

以避免一条线一条线地实现渐变。

定位计算

by Anonymous

不使用 JavaScript 而是直接在 CSS 中实现：

left: ID1.Left + ID1.Width + 2px;

网格布局

by Kurt Krumme

table 布局曾经流行一时，因为 table 布局更接近网格布局的原理。CSS 的设置者们为什么要推出一个不伦不类的 box 模型？

div + css 在 Web 设计界已经红得发紫，尽管 div 有众多缺陷（比如垂直居中，比如在 IE 中的众多 BUG），如果哪个设计师胆敢使用 table，被人查出源代码，是会被耻笑的。然而译者从不畏惧使用 table + css，且愿意告戒那些盲目追随 div 并被折磨得半死的人，至少在目前，table 是被各种浏览器支持得最完美的容器对象。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

使用 image 作 border

by Anonymous

应当可以用 image 作为 border，如：

border-right: url('image.png')

支持多个背景图

by Brad

这个 CSS 功能非常有用，有了这个功能，完美实现 CSS 圆角就变得十分简单了。

所有浏览器支持统一标准

by Anonymous

这里特指 IE<8 的版本。CSS 有成型的标准，但有些浏览器一定要搞一些自己的东西出来。

以上来自cb。大师们的期望果然很独特，相当多的期望也非常有用，如果实现了，Web开发就是多么轻松愉快的一件事情啊！比如变量、清除定义和定位计算，是我认为非常有用的。目前IE下可以用一些IE特有的表达式，但用起来太复杂。

还是期望CSS3更好更强大。也期望各个浏览器尽快支持CSS3

————————————————

版权声明：本文为CSDN博主「前端基础开发」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/html886/article/details/104582007

评论(0) 浏览(2336)

012020-3

JavaScript中的this/call/apply/bind

前端达人

文章目录

一、this

1.什么是this

2.this 代表什么

3.绑定 this 的方法

4.this的指向

5.改变指向

二、Function.prototype.bind()

三、call/apply

1.定义

2.语法

3.异同

一、this

1.什么是this

this 关键字在大部分语言中都是一个重要的存在，JS中自然不例外，其表达的意义丰富多样甚至有些复杂，深刻理解this是学习JS、面向对象编程非常重要的一环。

2.this 代表什么

this代表函数（方法）执行的上下文环境（上下文，类似与你要了解一篇文章，了解文章的上下文你才能清晰的了解各种关系）。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

1.在方法中，this 表示该方法所属的对象。

2.如果单独使用，this 表示全局对象。

3.在函数中，this 表示全局对象。

4.在函数中，在严格模式下，this 是未定义的(undefined)。

5.在事件中，this 表示接收事件的元素。

6.类似 call() 和 apply() 方法可以将 this 引用到任何对象。

3.绑定 this 的方法

this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

4.this的指向

1.在一般函数方法中使用 this 指代全局对象

function test(){
　　　　this.x = 1;  //这里this就是window
　　　　console.log(this.x);
　　}
　　test(); // 1

JS规定，函数中的this，在函数被调用时确定，它指函数当前运行的环境。

2.作为对象方法调用，this 指代上级对象

var x =3;
function test(){
　　alert(this.x);
}
var o = {
  x:1,
  m:test 
};
o.m(); // 1

如果函数作为对象的方法时，方法中的 this 指向该对象。

3.作为构造函数调用，this 指代new 出的对象

function test(){
　　　　console.log(this);
　　}
　　var o = new test();
       test();
//可以看出o代表的不是全局对象

new关键词的作用是调用某个函数并拿到其中的返回值，只是调用过程稍特殊。在上面的代码实例中。test函数被new关键词调用时，内部依次执行了以下步骤:

（1）创建一个空对象。

（2）将这个空对象的原型，指向这个构造函数的prototype。

（3）将空对象的值赋给函数内部的this（this就是个空对象了）。

（4）执行函数体代码，为this这个对象绑定键值对。

（5）返回this，将其作为new关键词调用oop函数的返回值。

所以构造函数中的this，依旧是在构造函数被new关键词调用时确定其指向，指向的是当前被实例化的那个对象。

4.箭头函数中的this
箭头函数是ES6的新特性，最重要的特点是它会捕获其所在上下文的this作为自己的this，或者说，箭头函数本身并没有this，它会沿用外部环境的this。也就是说，箭头函数内部与其外部的this是保持一致的。

this.a=20
var test={
    a:40，
    init:()=>{
        console.log(this.a)
        function go(){
            this.a=60
            console.log(this.a)
        }
        go.prototype.a=50
        return go
    }   
}

var p=test.init()
p()
new (test.init())()
//输出 20 60 60 60

5.改变指向
this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

bind方法和apply、call稍有不同，bind方法返回一个新函数，以后调用了才会执行，但apply、call会立即执行。

二、Function.prototype.bind()
bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值，例如：f.bind(obj)，实际上可以理解为obj.f()，这时f函数体内的this自然指向的是obj；

示例：

function f(y, z){
    return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6

这里bind方法会把它的第一个实参绑定给f函数体内的this，所以这里的this即指向{x : 1}对象，从第二个参数起，会依次传递给原始函数，这里的第二个参数2，即是f函数的y参数，最后调用m(3)的时候，这里的3便是最后一个参数z了，所以执行结果为1 + 2 + 3 = 6分步处理参数的过程其实是一个典型的函数柯里化的过程（Curry）。

三、call/apply
1.定义
每个函数都包含两个非继承而来的方法：call()方法和apply()方法。

call和apply可以用来重新定义函数的执行环境，也就是this的指向；call和apply都是为了改变某个函数运行时的context，即上下文而存在的，换句话说，就是为了改变函数体内部this的指向。

2.语法
call()

调用一个对象的方法，用另一个对象替换当前对象，可以继承另外一个对象的属性，它的语法是：

Function.call(obj[, param1[, param2[, [,...paramN]]]]);
1
obj：这个对象将代替Function类里this对象
params：一串参数列表

说明：call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为obj指定的新对象，如果没有提供obj参数，那么Global对象被用于obj。

apply()

和call()方法一样，只是参数列表不同，语法：

Function.apply(obj[, argArray]);

obj：这个对象将代替Function类里this对象
argArray：这个是数组，它将作为参数传给Function

说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个TypeError，如果没有提供argArray和obj任何一个参数，那么Global对象将用作obj。

3.异同
相同点

call()和apply()方法的相同点就是这两个方法的作用是一样的。都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向，看个例子：

function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

console.log(add.call(sub, 2, 1));//3

评论(0) 浏览(2311)

012020-3

看懂设计（一）：菲兹定律在UI设计中的实际应用

ui设计分享达人

菲兹定律在交互设计中的应用是很普遍和广泛的，有时候在我们设计界面之时，不知不觉就应用了菲兹定律，但是我们却未察觉。

关于菲兹定律的具体内容，可以说是大家耳熟能详，甚至在学生时代就有所了解：从一个起始位置移动到最终目标点所需的时间由两个参数来决定，到目标的距离（D）和目标的大小（W），可以用数学公式表达为：

在当今互联网背景下简单来解释说，就是大而近的目标区域意味着用户用需要耗费太大的精力即可轻易点击或者关注到目标，反之，小而远的目标区域则意味着用户将耗费一些时间和动作才能触及到目标。在一般情况下，让用户耗费时间和动作的操作，会使人产生负面的用户体验。

以上说的，其实是对菲兹定律表象的解释，每个人在网上也会搜到很多类似的解释。当你搜索时会发现，关于对菲兹定律的应用，网上绝大多数的资料都是在以PC端界面作为定律的解释，但移动界面却少之又少，这里面的一部分原因是菲兹定律提出的时间，一部分也是因为在移动端的设计中，菲兹定律会变得很零散和琐碎，很难真正用几句话来总结，这篇文章也是我第一次试着在移动端的交互设计的范畴内对菲兹定律的应用进行简单的总结。

1. 让按钮更大一些

我在这一部分分了几种情况，分别进行讨论，其一呢，就是fab button。在现有的fab button中，大家会发现，虽然按照正常iOS的设计规范，一般按钮的大小都会被设计为88px，但是在设计fab button时，我们一般都会选择大一些的尺寸，例如100px、110px、120px。

其二就是页面内功能按钮的大小，我们在做界面设计的时候，都知道做到统一性，但很少去深入地想，界面统一的背后是在像用户传达一个什么意思。

举个例子，这是【洋葱数学】和【360家庭防火墙】的登录界面，市面上的登录界面大多大同小异，基本组成就是账号+密码+按钮（或手机号+按钮等）的组合。

那我们来思考一个问题：为什么在手机号只有11位已经确定的情况下，输入框和【下一步】按钮还要做这么长，接近通栏的一个样式。

我试着来找到这个问题的答案，第一个，是对于品牌设计规范的执行，对边距是有一定要求的，也就是我们常说的保持页面元素的统一性；第二个，即是对菲兹定律的应用，在这个页面中，最核心的两个功能【输入】和【下一步】给予他们一个足够的大小，会让用户的注意力更加集中，避免被分散精力。

2. 让相关联的信息内容距离更近

这也和设计原则中的亲密性相一致。依旧可以用我们常见的信息输入界面来加以印证。这两个界面是我随手做的，对比一下即可看出优劣。

在相关性比较强的功能中，拉近彼此距离，既能够给信息一个清晰的层级，更能够减少用户的操作成本。

3. 界面的边界会让用户操作更加精准和容易

在研究交互界面的时候，我们总听到一个说法，“界面的边界是无限的”，它当然不是在说界面是无限大的，对于一块屏幕来说，在进行操作的时候，无论是PC的鼠标光标，还是移动屏幕的手指，在操作到界面边缘时，因为无法延伸，所以最精准。

这也是我们看绝大多数fab button弹出的菜单是在界面边缘，而不是在界面中央的原因。

除此之外，还有在很多安卓手机中，卸载app时会让用户把要卸载的app拖拽到屏幕上边缘的区域进行卸载，这样相比给一个【X】按钮，会更加精准，而且拖拽的操作也会给用户更多思考的空间和时间，减少误操作的概率。

但是，这个但是很重要，不要把所有既定的法则都奉为圭臬，所有事物都要辩证着看，在没有限定条件的情况下，菲兹定律的应用不会有任何问题，但是如果加以条件的限定，就不是这么简单了。

简单举个例子：在进行删除等负向操作时，很多app会把确认删除等操作做得离你的上一步操作区域更远，或者让确认按钮更加不明显，这是在帮助用户，或者说希望用户在做负向操作时，有更多的思考空间和时间，规避误操作的影响。

在《看懂设计》这个系列里，我会选择性地对在交互设计中常常被应用的设计心理学、方法论等进行简洁有案例的解析，例如大家耳熟能详的交互设计7大定律、斯金纳箱理论、边际效应、锚定效应、格式塔理论等等让大家尽可能地在实际案例中找到它们的应用，而不是让这些方法论成为我们脑海中的空中楼阁，知道、听说过，但是不会应用。

转自：站酷-鹿爷不是咸鱼

评论(0) 浏览(3081)

012020-3

纯JS对页面表格进行EXCEL导出（完整导出，包含页面样式）

seo达人

纯JS对页面表格进行EXCEL导出

1.中间部分在style标签那种可以使用css样式对表格进行任意样式的修改

2.在tableid.innerHTML中可以对表格中的内容进行修改替换（其中放的内容就是导出后的表格内容）

3.需要引入xlsx.full.min.js文件

4.tableid为为表格的id

5.sheetName为下载后的文件名称

base64(excelFile) {

return window.btoa(unescape(encodeURIComponent(excelFile)))

},

tableToExcel(tableid, sheetName) {

var uri = 'data:application/vnd.ms-excel;base64,';

var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +

'xmlns="http://www.w3.org/TR/REC-html40"><head>' +

' <style type="text/css">' +

' .ivu-table td{\n' +

' /background-color: #FFFFFF;/\n' +

' /color: #fff;/\n' +

' /border:1px solid #FFFFFF;/\n' +

' }\n' +

' /每行的基本样式/\n' +

' .ivu-table-row td {\n' +

' color: #000000;\n' +

' min-width:50px;\n' +

' }\n' +

' /头部th/\n' +

' .ivu-table-header th{\n' +

' color:\t#FFFFFF;\n' +

' font-weight: bold;\n' +

' background-color: rgb(98,167,249);\n' +

' min-width:50px;' +

' border:1px solid #FFFFFF;' +

' position: relative; \n' +

' top: expression(this.offsetParent.scrollTop); \n' +

' z-index: 300; \n' +

' }\n' +

' /偶数行/\n' +

' .ivu-table-stripe-even td{\n' +

' background-color: #ffffff!important;\n' +

' }\n' +

' /奇数行/\n' +

' .ivu-table-stripe-odd td{\n' +

' background-color:#F0FFFF!important;\n' +

' }\n' +

' /选中某一行高亮/\n' +

' .ivu-table-row-highlight td {\n' +

' background-color: #d63333!important;\n' +

' }' +

'</style>' +

'</head><body ><table class="excelTable">{table}</table></body></html>';

if (!tableid.nodeType) tableid = document.getElementById(tableid);

tableid.innerHTML = tableid.innerHTML.replace('暂无筛选结果','')

var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};

var a = document.createElement("a");

a.download = sheetName + ".xls";

a.href = uri + this.base64(this.format(template, ctx));;

a.click();

},

format (s, c) {

return s.replace(/{(\w+)}/g,

function (m, p) {

return c[p];

});

}

评论(0) 浏览(3457)

012020-3

浅谈数据可视化及经验分享（上）

ui设计分享达人

结合学习的可视化知识以及自身的经验写下了这篇关于数据可视化的分享

转自：站酷-四喜sixi

评论(0) 浏览(2435)

012020-3

10天，5个百度Doodle，成千上万的抗“疫”英雄

ui设计分享达人

他们是“最美逆行者”

前几天，当大家打开百度首页时，可能发现了一些小变化：搜索框上方不再是熟悉的红蓝标志，而是展现出了一系列人物形象。

这些人物都是一直奋战在抗击新冠肺炎疫情一线的“最美逆行者”——我们想用这样的方式，向他们致敬。

2月9日-2月10日，致敬抗疫医护人员

2月11日-2月12日，致敬抗疫志愿者

2月13日-2月14日，致敬抗疫建设者

2月15日-2月16日，致敬抗疫专家组

2月17日-2月18日，致敬抗疫解放军

当大家点击这些 Doodle 图片时，会进入相关的战“疫”专题内容页，在这里可以实时了解抗疫英雄的资讯动态。

医护人员、志愿者、建设者、专家组、解放军，他们用坚定的信念和坚毅的身躯，为这场战斗筑起了最坚固的防线，守护着无数人的生命安全。我们向这些英雄致敬！

此前，我们向广大网友发起了“抗疫英雄系列 Doodle”征集活动，希望各界设计师用手中的画笔为抗疫英雄们创作特别的百度 Doodle，让更多人看见疫情中的勇气与希望。

最终，五组致敬 Doodle 在百度首页上线。除此之外，我们还收到了26幅来自百度网友投稿的设计作品。谢谢大家的用心创作！

一起来欣赏吧!

蔡依彤

林文煌

刘昱

轻抚淡抹素人妆

相超

蔡依彤

林文煌

麦芽

董一孛

林文煌

刘昱

姚思思

赵会娟

不将就

李小兰

李钰

林文煌

孙红花

陶泽崧

严安琪

张晶

冯胜方

高旭

林文煌

杨晓婧

张晶

在这场疫情狙击战中，不论是什么角色、什么岗位，都能贡献自己独特的力量。而这些精美的 Doodle 设计作品，正向人们传达了必胜的信心和能量。我们衷心感谢所有设计师的用心创作.

除了通过百度 Doodle 为抗疫工作鼓劲，我们还运用技术的力量，专为疫情防控研发了各种产品和服务，希望为大家带来实用有效的帮助，为战“疫”贡献一份力量。

我们成立了3亿元的疫情及公共卫生安全攻坚专项基金，用于支持新型冠状病毒等新疾病的治愈药物筛选、研发等一系列抗击疫情工作。

我们上线了“拒绝野味”的搜索提示，在百度 APP 搜索“蝙蝠”、“果子狸”、“穿山甲”、“豪猪”、“狍子”、“蛇”、“野猪”等关键词时，大家都能看到“不可食用”的警告。

从百度“问医生”免费在线咨询，到新冠肺炎智能自测工具；从“疫情小区”地图，到患者同乘查询；从免费开放智能外呼平台，到 AI 体温检测落地北京清河火车站……百度一直在行动。

当所有的决心、爱心和信心汇聚在一起，我们知道，阴霾和灰暗一定会被驱散，春暖花开的日子一定会到来。众志成城，我们共渡难关！

转自：站酷-百度BMD

评论(0) 浏览(2328)

012020-3

10部好片，评分9+，给你脑洞一个解释

ui设计分享达人

探索全球顶尖设计好物

大部分人今年过年基本的生活状态如下

如大家所知疫情紧急，

我们虽心系前线却无力支援，

尽量避开人群不出门也算为国家做了些许贡献。

但是宅家除了刷短视频玩游戏，

作为设计师的童鞋们，

咋能不趁此长假好好充实自己呢

（学技能估计太难了），

在此推荐几部经典的设计片，

娱乐的同时，也丰富下自己的设计知识。

01

《Abstract: The Art of Design》

《抽象：设计的艺术》

这是由Netflix公司出品的一部文化创意纪录片，

豆瓣评分高达9.4，纪录片总共8集，

每一集都探访一位全球顶尖的设计师，

涉及插画、建筑、汽车、摄影、平面、室内、场景、球鞋等领域，

用独特的拍摄叙述手法展示设计师的创作过程，

揭开世界设计师非凡创意的艺术理念。

此片由《连线》杂志的主编Scott Dadich 创作并担纲制片，并由奥斯卡最佳纪录片导演Morgan Neville和Elizabeth Chai Vasarhelyi执导，

每一集都可以欣赏到电影画面般的浸入感。

02

《The Genius of Design》

《设计天赋》

此片是BBC英国广播公司

播出的一系列关于产品设计纪录片，

一共包括五集，每集60分钟，

通过采访各知名设计师及相关的设计评论者，

讲述产品设计的历史和未来。

不管你喜欢Dieter Rams的隐忍

还是Phillipe Stark的奔放，

每个从事产品设计工作的朋友都能从这部纪录片得到一些启发。

03

《Modern Masters》

《现代艺术大师》

此片由BBC英国广播公司

推出的一档电视系列节目，

总共4集，分别介绍了20世纪四位重要的艺术大师：

安迪·沃霍尔（Andy Warhol）、马蒂斯（Henri Matisse）、毕加索（Pablo Picasso）和达利（Salvador Dali）的工作与生活。

通过走访四位艺术家们生前的居所、

艺廊及博物馆等地，

向观众展示了他们伟大的艺术贡献以及惊人的后世影响力。

你会发现，麦当娜的专辑封面、米菲兔的文具、

甚至是你家的沙发和电话，也许就来源于这四位大师的创作……

04

《Simon Schama's Power of Art》

《艺术的力量》

此片是由BBC英国广播公司推出年度纪录片，

总共8集。

讲述卡拉瓦乔、贝尼尼、伦勃朗、雅克、透纳、梵高、毕加索以及罗斯科八位艺术家的生平。

该系列结合了戏剧化的重塑、壮观的摄影技术，

以及Simon Schama独特而富有个性化的叙事，

全面剖析艺术大师们孕育和诞生艺术品时扣人心弦的故事。

这部纪录片荣获国际艾美奖最佳艺术节目、

2007年第60届英国电影电视艺术学院奖最佳摄影纪实类等多项国际大奖。

05

《Design for Life》

《创意生活》

这是一档BBC真人秀设计师比赛节目，共6集。

国际知名设计师Phillipe Starck

寻找英国最有前途的新人设计师。

通过全国选拔，

12名怀抱热情与梦想的设计师来到到巴黎史塔克设计学院学习，

他们的目标是把自己的设计思路变成真实的产品。

Phillipe Starck设计了一系列任务，

挑战设计师们的才华创意，但最后的赢家只有一个，

走到最后的人将获得和世界顶尖设计师一起工作的机会，

准备面试的设计师们更要好好看一看喔。

06

《Objectified》

《设计面面观》

这是一部以工业设计为主题的长篇独立纪录片。

展示了创造工业产品流程的实录片断，

并记录了与世界顶尖设计师们的交谈与讨论。

采访到的设计师们包括：

纽约现代艺术馆馆长Paola Antonelli，

慕尼黑BMW首席设计师Chris Bangle，

巴黎兄弟设计组合Ronan & Erwan Bouroullec，

美国明尼阿波利斯市Walker艺术中心平面设计师Andrew Blauvelt等世界最具影响力的设计师。

导演Gary Hustwit用洞察深切的镜头

记录了这些在我们身边随处可见的工业设计产品，

看似稀松平常的设计背后，

却是设计师们倾尽全力的良苦用心。

作为从事工业设计的童鞋来说，

自己的专业领域能被拍成纪录片也是一件感到自豪的事。

07

《Urbanized》

《城市化》

Gary Hustwit 纪录片设计三部曲的最后一部，

着重记录一座城市的规划与设计，

突出了致力于解决城市问题和提出对策的世界顶尖建筑师、规划师、决策者等人。

世界上一半以上的人口生活在城市地区，

到2050年这个比例将变为75%以上。

虽然一些城市正在经历爆炸式的增长，

但其他一些城市却处在正在压缩的过程中。

在住房、流动性、公共空间、民众参与、经济发展和环境政策之间取得平衡的挑战正迅速成为一个普遍关注的问题。

中国的城市化进程也是如此，

因此观看该片，会有更深刻的体会。

08

《我在故宫修文物》

由中国中央电视台出品的一部三集文物修复类纪录片，纪录故宫里稀世珍奇文物的修复过程和修复者的生活故事，

把工匠精神这件严肃的事讲得细腻、

温软且富有人情味。

该片是一部内蕴优裕的纪录片，

在一个个对于文物修复师而言的稀松日常里，

我们能够看到比修复钟表、青铜器、木器、古琴更多的东西。

片中提到一句“修复文物是穿越古今与千百年前进行对话的特殊职业和生命体验”，

在故宫神秘的身影下，这似乎更令人感到惊艳。

作为中国设计师，更应好好观看，

正所谓，民族的，才是世界的。

09

《デザインあ》

《啊！设计》

《啊！设计》是NHK一档经典设计节目，

每一集邀请重量级设计师讲述设计的秘诀，

深泽直人、仲条正义、祖父江慎、伊东丰雄，柴田文江……

虽是面向儿童，但视角独特、充满对思维的启发，

赞叹日本设计教育的同时也让我们反思。

这部片放到大学设计系的课程都不为过，

因为很多一些基本的设计常识，

即使已经就业的童鞋可能都不了解，

值得设计师好好观看。

10

《夢と狂気の王国》

《梦与狂想的王国》

该片为日本的一部纪录片，

由砂田麻美执导，探秘吉卜力手绘动画创作过程，

展现了宫崎骏、高畑勋、铃木敏夫，

三位老人以及新时代年轻人对动画的执着与热爱。

关于宫崎骏、吉卜力的纪录片已经很多了。

《梦与狂想的王国》则是选取了宫崎骏创作封笔之作《起风了》和高畑勋创作《辉夜姬物语》的这段时间为记录对象，

着力表现了两人的友谊历史和之后的创作分歧。

宫崎骏乘坐火车去看自己的试片会。

看完后，他走上台只说了一句话，

“对不起，生平第一次看自己的电影哭了。”

相信看完后，大家都会想再刷一遍宫崎骏的电影。

这10部纪录片，都是设计片中的经典，

可以收藏起来反复的观看，

每个设计阶段都会有不一样的感悟。

片子通过搜索都可以找到片源，

找不到的可以在后台回复（纪录片），

会推送片源链接。

最后希望大家身体健健康康的，

祝福祖国早日抗疫胜利，加油！

转自：站酷-Hang5174

评论(0) 浏览(2374)

首页

【Web前端开发】第二课、HTML基础之HTML概述

vue框架渐进性的理解和mvvm模式的理解

html5+css3实现2D-3D动画效果实例

3D变换

Web开发期待的CSS的一些功能

foo h1, #foo h2, #foo h3

foo [h1, h2, h3]

JavaScript中的this/call/apply/bind

看懂设计（一）：菲兹定律在UI设计中的实际应用

纯JS对页面表格进行EXCEL导出（完整导出，包含页面样式）

浅谈数据可视化及经验分享（上）

10天，5个百度Doodle，成千上万的抗“疫”英雄

10部好片，评分9+，给你脑洞一个解释

分类

日历

链接

个人资料

存档