HTML 5.1特性

2017-02-16

HTML 5

w3c已经好久没有更新HTML的最新标准了，据传2017年年底，HTML5.2将推出，不知道又会有哪些惊喜之处。只要获得浏览器厂商支持，HTML从源头上就可以帮助多数前端工程师省去费力写JavaScript的麻烦，写到这，我默默看了看浏览器市场报告，IE76~8还存在15%以上的市场额，只能感慨生不逢时。
逢年初，记录下H5的部分新特性，等年底5.2推出有个对照。

安全性

Brave的流行，从另方面烘托了网页安全性已经成为用户目前关注的重要性能之一。5.1同样不甘落后。

防止钓鱼
a标签target=’_blank’,新打开的页面可以更改window.opener.location加载到钓鱼网站，通过恶意js代码，做一些不可见人的勾当。5.1中rel=‘noopener’属性，则隔离了这一行为。
1
<a href="javascript:" target="_blank" rel="noopener"></a>
脚本和样式文件随机数加密
5.1提供的另外一项安全措施则是通过nonce添加在script或者style引入标签中，通过一组随机数，仅针对一次页面请求有效。
1
<script nonce=""></script>

布局

header/footer/article/aside/section/nav…
这些标签的出现，代替只有div可用的HTML4，更加语义化.

<article>
  <header>
    <h2>this is a header</h2>
    <aside>
      <header>
        <h2>this is a aside</h2>
        <p><a href="javascript:">well well well</a></p>
      </header>
    </aside>
  </header>
  <footer>made by mickeyZaku </footer>
</article>

全屏
H5的另一个特性，引入声光电，可以播放音视频，因此有一个大众化的问题，是否支持全屏(allowfullscreen)播放。这个特性将会被保留。
1
<iframe title="Video" src="http://mickeyZaku.github.io" allowfullscreen></iframe>

响应
一听这两字就激动了，may the force with w3c！不需要css就能响应了。当然还只是再图片中，而且仔细一看代码，除了让html代码变得臃肿外，也没少敲几个字

<!--使用src-set,x也可以用w替代-->
<img src="img/low-res.jpg" srcset="
  img/low-res.jpg 1x,
  img/medium-res.jpg 2x,
  img/high-res.jpg 3x"
>
<!--常用的判断尺寸加载图片-->
<img src="img/low-res.jpg" 
sizes="(max-width: 25em) 60vw, 100vw"
srcset="
  img/low-res.jpg 1x,
  img/medium-res.jpg 2x,
  img/high-res.jpg 3x"
>
<!--使用picture，更加像css的html，wtf，我再说什们呢-->
<picture>
  <source media="(max-width: 25em)" srcset="
    img/small/low-res.jpg 1x,
    img/small/medium-res.jpg 2x,
    img/small/high-res.jpg 3x
  ">
  <source media="(max-width: 60em)" srcset="
    img/large/low-res.jpg 1x,
    img/large/medium-res.jpg 2x,
    img/large/high-res.jpg 3x
  ">
  <img src="img/default/medium-res.jpg">
</picture>

更加人性化的部分特性

图片
5.1中图片的操作更加灵活

<!--零宽度，至少不用再让浏览器reset了,img也可以用来进行计数了-->
<img src="" alt="" width="0" height="0">
<!--图片标题的灵活运用，figcaption标签已经可以用在任何图片中了-->
 <figure>
    <img src="" alt="">
    <figcaption>pic1</figcaption>
  </figure>

表单
多了几项比较人性化的，更加人机交互的功能

<!--required 校验表单-->
<input type="password" name="password" required />
<!--空选项,用于用户友好-->
<select name="" >
    <option value="null"></option>
</select>
添加扩展信息，信息本身再页面中时隐藏的，但可大大加大table等的语义化
<table>
    <sumamary>this is description for table</sumamary>
    <tr>
        <td></td>
    </tr>
</table>
<!--日历选项-->
<input type="week" name="year_week">
<input type="month">

拼写检查
不多说，属性spellcheck 取值可以为空字符串、true 和 false 。如果指定其状态为 true，就表示元素将会接受对其的拼写和语法检查。element.forceSpellCheck() 将强制用户代理在文本元素上报告检查出来的拼写和语法错误，即使用户从来没将输入聚焦在该元素上。
1
2
3
<p spellcheck="true">
<input type="text"/>
</p>

展开全文 >>

如何比较两个时间大小 source by heyan01

2017-02-15

工作中用到date的频率非常高,如Date对象的方法果对Date的方法不熟悉,每次用的时候都现看现学,就很忙乱了。昨天写页面时,遇到了这样的情况:一个首页的展览,如果正处在展览的时间中,比如展示从2017-02-14到2017-02-17,今天是2月15日,此时只能修改展示结束时间;如果还没开始展示,则开始时间和结束时间都能修改;第三种情况是展示已经结束,则这两个时间都不能修改;这就要求我需要比较时间从而进行判断;

关于比较两个时间的大小

两个方法
1是用字符串直接比较;始于时间格式已经一致的两个时间

1 2	'2017-1-2 12:23:00'>'2017-1-1 14:55:00' true

这种直接用字符串比较的方法其实内部调用了String对象的localCompare方法;经测试,该方法可以精确比较到秒;
但是受限于两个比较日期的格式必须完全一样。通过new Date获取现在的时候返回的格式如下

1 2	new Date() Wed Feb 15 2017 11:27:36 GMT+0800 (CST)

鉴于还需要将获取的时间通过以下分解出来年月日时分秒

new Date().getFullYear() //年
new Date().getMonth()  //月 需要注意返回的范围0-11,即0对应1月
new Date().getDate()  //日
new Date().getHours() //0-23 小时
new Date().getMinutes() //0-59 分钟
new Date().getSeconds()  //0-59 秒

或者获取字符串格式的时间,通过str.replace(///g,’-‘)将中间的’/‘替换成’-‘;

new Date().toLocaleString( )//获取当前日期和时间 字符串格式
"2017/2/15 上午11:49:25"
new Date().toLocaleDateString();   //获取字符串格式日期
"2017/2/15"
new Date().toLocaleTimeString() //获取字符串格式时间
"上午11:51:23"

想象代码不少于6行,放弃此方法;
2 利用距离1970年1月1日0点的毫秒数进行比较
获取当前时间距离标准时间的毫秒数比较简单,一行代码搞定;

1	new Date().getTime()

接下来,分析那两个的时间,字符串类型,格式为’2017-1-2 12:33:00’;利用Date.parse(),参数是日期格式的字符串,函并返回该日期与 1970 年 1 月 1 日午夜之间相差的毫秒数。很多书上写日期字符串的格式必须是’mm-dd-yyyy h:m:s’,但通过测试,发现并不是,如图

所以最终通过此方法,获取毫秒数,进行对比;

1 2	let startSec=Date.parse(record.start_time); let endSec=Date.parse(record.end_time);

先写到这,去吃饭;

展开全文 >>

'NEC各种标签的写法'

2017-02-14

NEC

NEC（nice easy css）是一种规定了规范的css写法，包括遵循一定的命名/分类等规范，比如布局样式类名以.g开头，模块.m开头，功能模块用.f开头等等。同时，nec则希望通过引入代码框架更简单和统一的实现页面的基础功能。

NEC下的标签框架

NEC下，所有标签可能涉及到的大众功能均作为框架，引用只需添加类名即可。规定几个常用带tab的标题头,请暂时忽略已经写好的类名，下一部分将做说明

html

<header class="m-hd">
    <h2 class="u-tt">标题</h2>
    <div class="more"><a href="#">more&raquo;</a></div>
    <ul>
        <li class="z-crt"><a href="#">默认：居左，不定宽</a></li>
        <li><a href="#">“标题”和“更多”可删</a></li>
        <li><a href="#">扩展类可以自由组合</a></li>
        <li><a href="#">标签标签</a></li>
    </ul>
</header>
    <header class="m-hd m-hd-bg">
        <h2 class="u-tt">标题</h2>
        <div class="more"><a href="#">mroe&raquo;</a></div>
        <ul>
            <li class="z-crt"><a href="#">有背景</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签标签</a></li>
        </ul>
    </header>
    <header class="m-hd m-hd-rt m-hd-sl">
        <h2 class="u-tt">标题</h2>
        <div class="more"><a href="#">more&raquo;</a></div>
        <ul>
            <li class="z-crt"><a href="#">居右，无缝</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签标签</a></li>
        </ul>
    </header>
    <header class="m-hd m-hd-sm">
        <div class="more"><a href="#">more&raquo;</a></div>
        <ul>
            <li class="z-crt"><a href="#">较小</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签标签</a></li>
        </ul>
    </header>
    <header class="m-hd m-hd-rt m-hd-sm">
        <h2 class="u-tt">标题</h2>
        <ul>
            <li class="z-crt"><a href="#">居右，较小</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签标签</a></li>
        </ul>
    </header>
    <header class="m-hd m-hd-fw m-hd-ra">
        <div class="more"><a href="#">more&raquo;</a></div>
        <ul>
            <li class="z-crt"><a href="#">定宽，直角</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签标签</a></li>
        </ul>
    </header>

CSS

/*含标题的tab头，默认不定宽都*/
.m-hd{height: 35px;line-height: 35px;padding: 1px 0 0;border-bottom:1px solid #ddd}
.m-hd h2 .m-hd ul,.m-hd li{float: left;}
.m-hd h2{margin: 0 20px 0 0;font-size:16px}
.m-hd li{position: relative;margin: -1px 0 0 2px}
.m-hd li:first-child{margin-left: 0;}
.m-hd li a,.m-hd li a:hover{text-decoration: none;color:#666;}
.m-hd li a{display:block;padding:0 15px;border:1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0;text-align:center;font-size:14px;background:#f8f8f8;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#fdfdfd),to(#f8f8f8));background:-webkit-linear-gradient(#fdfdfd,#f8f8f8);background:-moz-linear-gradient(#fdfdfd,#f8f8f8);background:-ms-linear-gradient(#fdfdfd,#f8f8f8);background:linear-gradient(#fdfdfd,#f8f8f8);}
.m-hd li a:hover{background:#fff;}
.m-hd li.z-crt a{padding-bottom:1px;margin-bottom:-1px;background:#fff;}
.m-hd .more{float:right;margin-left:10px;}
/* 有背景 */
.m-hd-bg{padding:11px 10px 0;border-radius:5px 5px 0 0;background:#f7f7f7;}
/* tab无缝 */
.m-hd-sl li{margin-left:-1px;}
.m-hd-sl li a{border-radius:0;}
.m-hd-sl li:first-child a{border-top-left-radius:5px;}
.m-hd-sl li:last-child a{border-top-right-radius:5px;}
/* tab居右 */
.m-hd-rt h2{margin-right:0;}
.m-hd-rt ul{float:right;}
/* tab较小 */
.m-hd-sm{height:25px;line-height:25px;}
.m-hd-sm h2{font-size:14px;}
.m-hd-sm li a{padding:0 10px;font-size:12px;}
/* tab定宽 */
.m-hd-fw li{width:80px;}
.m-hd-fw li a{padding:0;}
/* tab直角 */
.m-hd-ra,.m-hd-ra li a,.m-hd-ra li:first-child a,.m-hd-ra li:last-child a{border-radius:0;}

展开全文 >>

CSS3 动画效果简要描述

2017-02-10

其实本来想直接放我的动画库的，这里先做基础只是的奠基，H5的动画其实一直被认为有些问题，使用CSS3可以实现的动画就不用H5吧。首先需要声明的是CSS动画（animation）再IE6~9是不兼容的，怎么办，静态背景图替代之

最基本结构，你懂的

1
2
3

<div class="box">
    <i>今天吃点啥</i>
</div>

首先写动画过程

关键词keyframes,构建动画的语法是
@keyframes name{ 0%{code}~100%{code}}，具体keyframes声明（注意多引擎声明），改动画效果的名字name,代码体里，从0%~100%，元素的变化过程，具体看代码

@keyframes _t {
    0% {background: #bebebe;left: 0px;top: 0px;transform: rotate(0deg);}
    25% {background: #464646;left: 100px;top: 0px;transform: rotate(10deg);}
    50% {background: #d6d6d6;left: 150px;top: 0px;transform: rotate(20deg);}
    55% {background: #fafafa;left: 200px;top: 0px;transform: rotate(40deg);}
    60% {background: #fafafa;left: 200px;top: 50px;transform: rotate(0deg);}
    70% {background: #d6d6d6;left: 200px;top: 100px;transform: rotate(0deg);}
    80% {background: #464646;left: 200px;top: 50px;transform: rotate(-40deg);}
    95% {background: #b4b4b4;left: 50px;top: 50px;transform: rotate(-360deg);}
    100% {background: #bebebe;left: 0px;top: 0px;transform: rotate(0deg);}
}
/*剩下的@-webkit-keyframes /-o-keyframes/-moz-keyframse等省略了就*/

简要说一下上面的代码，即刚开始的时候，元素背景色为#bebebe,定位为左上角，transform为变形，rotate（旋转）角度0deg；当动画进行到25%时，背景色变为#464646，位置水平移动100px,角度10deg.依次类推。知道100%时恢复为初始，这么一个循环过程，当然你可以设定无限个进度节点，大量的动画效果。

元素引入动画

构建好动画后，为元素引入动画即可，基本语法为
ele{animation: name duration timing-function delay iteration-count direction;}
animation声明，当然一贯的，你同时要有私有声明-webkit-animation/-moz/-o，name就是引入的动画名，本案例为_t，duration(规定动画时长，ms计量)，timing-function（速度曲线，linear/ease-in-out等），delay（延迟执行动画时间），iteration-count（重复动画默认为1，可以为多次，infinite则表示无限循环），direction(value:normal正常播放/alternate次轮反向播放 )


div{
    position: relative;
    width: 200px;
    height: 200px;
    line-height: 200px;
    background: #bebebe;
    text-align: center;
    /*引入动画_t,单轮7s执行结束，执行曲线ease-in-out，延迟2s 反复播放，次轮反向*/
    -moz-animation: _t 7s ease-in-out 2s infinite alternate;
    -webkit-animation:_t 7s ease-in-out 2s infinite alternate;
    -o-animation: _t 7s ease-in-out 2s infinite alternate;
    animation: _t 7s ease-in-out 2s infinite alternate;
}

恕在下没有制作gif图，所以這里没有效果图展示。

嵌套动画

动画效果可以元素嵌套，比如建立动画效果_i

1	@keyframes _i {0% {color:#fafafa}25% {color:red}50% {color: burlywood}55% {color:aquamarine}60% {color:aqua}70% {color: aquamarine}80% {color:burlywood}95% {color:red}100% {color:#fafafa}}

再div所含i元素中嵌套

i{
    font-family: "Microsoft YaHei";
    font-size:14px;
    color: #fafafa;
    animation: _i 7s ease-in-out 2s infinite alternate;
    -moz-animation: _i 7s ease-in-out 2s infinite alternate;
    -webkit-animation:_i 7s ease-in-out 2s infinite alternate;
    -o-animation: _i 7s ease-in-out 2s infinite alternate;
}

恕在下没有制作gif图，所以這里没有效果图展示。

展开全文 >>

常用正则表达式

2017-02-09

记录几个常用的正则表达式，备用，一直updating $ adding

匹配中文字符

// 匹配中文字符的标准写法，肯定记不住，用的是unicode。
/[\u4e00-\u9fa5]/
//同样的引申一下，匹配中文姓名的正则为
/^[\u4e00-\u9fa5]{2,4}/

值得一提的是，ES5之前的并不能完全支持unicode值，ES6中添加了u字符，使得这成为了可能

匹配双字节字符，包括中文

1	/[^\x00-\xff]/

匹配空白行

/\n\s*\r/

匹配email地址

//一般写法
 /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
//详细大神写法，这个更加详细，?:表示不会被捕捉。
/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/

匹配网址url

url比较复杂，这里只写匹配普通http协议的网址

1	/(http\|ftp\|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/

匹配有效数字

1	/^[+-]?(\d\|([1-9]+))(\.\d+)?$/

匹配国内电话

1	/\d{3}-\d{8}\|\d{4}-\{7,8}/

匹配qq

1	/[1-9][0-9]{4,}/

身份证号

1	/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]\|X)$/

匹配年月日

1	/([0-9]{3}[1-9]\|[0-9]{2}[1-9][0-9]{1}\|[0-9]{1}[1-9][0-9]{2}\|[1-9][0-9]{3})-(((0[13578]\|1[02])-(0[1-9]\|[12][0-9]\|3[01]))\|((0[469]\|11)-(0[1-9]\|[12][0-9]\|30))\|(02-(0[1-9]\|[1][0-9]\|2[0-8])))/

展开全文 >>

css优化原则

2017-02-08

如何书写更加整洁的css代码，遵循几项原则：

代码重置

总有人说你们写CSS的时候有点不道德，上来就把别人的默认padding/margin啥的都干掉了，等用的着的时候又贱贱的加上。去掉这些默认样式一个是为了后面的代码容易操作，另一方面也为消除不同浏览器默认样式不同的影响。
一般的都会包括这么几个重置：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img {
    border: medium none;
    margin: 0;
    padding: 0;
}
/** 设置默认字体 **/
body, button, input, select, textarea {
    font: 12px/1.5 '宋体', tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
em {
    font-style: normal;
}
/** 重置列表样式 **/
ul, ol {
    list-style: none;
}
/** 重置超链接元素 **/
a {
    text-decoration: none;
    color: #333;
}
a:hover {
    text-decoration: underline;
    color: #F40;
}
/** 重置图片元素 **/
img {
    border: 0px;
}
/** 重置表格元素 **/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

使用缩写

缩写可以减少css文件的大小，并增加可读性和可维护性。然而并非所有值都可以缩写，浏览器读取缩写时，会将所有项都设置一遍，会消耗一定的性能。常用缩写包括：

/*盒子模型缩写*/
div{
    padding:10px;/*4个内边距均为10px*/
    padding:10px 20px;/*上下均为10px,左右均为20px*/
    padding:10px 20px 30px;/*上下分别为10/30px,左右均为20px*/
}
/*16进制颜色*/
li{
    color: #000;/*原色#000000*/
    background-color: #389;/*原色为#338899*/
}
/*字体*/
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;/*至少指定size、family*/
}

不需要全部属性都设定时，尽量不用缩写，比如：

1	div{margin-left:auto;margin-right:auto;}/不考虑上下边距，仅水平居中/

避免性能消耗属性

expression表达式/filter滤镜，这两者再IE中已经得到较好的支持，但确实是个耗性能的属性，谨慎使用，除非需求要求，比如再opacity（透明度）时，兼容ie6~8必须使用filter，这时需求大于一切。

选择器合并

选择器合并已经是常见的基本代码规范，再相同功能，如background采用同一张图片时，可将选择器合并，避免同一种属性反复写，默认属性重置也是这个道理。

1
2
3

div .first,.second,.third,.fourth{
    background:url(../xx/xx.png) no-repeat 900px 900px; 
}

CSS做更多的事情

能用CSS实现的事情，尽量避免使用js。

再不兼容低版本浏览器的情况下（移动开发），完全可以采用CSS3的动画等来实现，而不是采用js。
视觉变化，使用CSS控制className
设置多节点样式，避免使用js时的浏览器多次渲染耗性能

清晰的注释

将每一个模块用注释隔开，增加可读性。哪怕是header/nav/footer这样简单的分隔。

压缩

套用工具喽，比如gulp，将多余空格去除。

展开全文 >>

居中那件不大不小的事

2017-02-07

元素及元素内容的水平/垂直完全居中常被作为考察前端工程师的基本技能，而这项技能目前也是再项目中较为常见的实际应用之一。

水平居中

水平居中的实现相对简单，主要分为html中块级元素和内联元素的居中。

定宽块级元素
首先有个div
1
<div class="center"></div>

div的居中，只需要设置左右margin为auto即可

.center{
    width:200px
    margin: 50px auto;
}

不定宽块级元素
由于宽度不定，比如再响应式布局中，如果限制了margin，可能会导致不必要的误差。此时，可将通过3种方法进行居中设置（table/inline/position）
还是上述div,再不设置width:200px的情况下，可进行如下3种操作

/**
利用table标签的长度自适应性，再对其进行定宽块级元素(ul/li)的margin操作
*/
<div class="center">
    <table>
        <tbody>
        <tr>
            <td>
                <ul>
                    <li>小橘子</li>
                    <li>小橘子</li>
                </ul>
            </td>
        </tr>
        </tbody>
    </table>
</div>
table{
    marigin:0 auto;
}
/**
    更改display为inline，将父级设置为text-align:center
*/
<div class="center">
    <ul>
        <li>小橘子</li>
        <li>小橘子</li>
    </ul>
</div>
.center{
    text-aling:center;
}
ul{
    display:inline;
}
/**
    通过position，父级左浮动后，左偏移50%，同时子元素则左偏移-50%。其实此方法也可为定宽元素设置居中，将子元素绝对定位，左偏移-50%，有移动宽度的一半即可。
*/
.center{
    positon:relative;
    float:left;
    left:50%;
}
ul{
   position:relative;
   left:-50%;
}

内联元素
可以再其父级添加text-align:center；

<div class="center">
        <span>小橘子小橘子小橘子</span>
</div>
.center{
    ......
     text-align: center;
}

垂直居中

垂直居中相对水平居中确是有点棘手，普通的当行元素，你可以通过上下padding值一样来设置居中，但这方法有挺多情况不能用，因此不推荐

单行内联元素
子元素为单行不换行，且父元素高度确定，可以将父元素height和line-height设置为相等

<div class="center">
    <ul>
        <li>小橘子</li>
    </ul>
</div>
.center {
    width: 400px;
    height: 400px;
    line-height: 400px;
    text-align: center;
}

2.多行内联元素
第一个方法是跟不定宽块级元素table方法居中使用相同，套table->tbody->tr->td，然后引入垂直居中vertical-align：middle,这里不作演示。
另外一个是使用table-cell显示，但此方法再ie6~8不兼容

.center {
    width: 400px;
    height: 400px;
    display: table-cell;
    vertical-align: middle;/*使用table-cell以激活table-cell*/
}

块级元素垂直居中

/**
元素高度已知的情况下
*/
.center {
    width: 400px;
    height: 400px;
    position:relative;
    border: 2px solid;
}
ul{
    height: 200px;
    width: 200px;
    position: absolute;
    top:50%;
    margin-top:-100px;/*即下降高度的一半*/
}
/**
高度未知的情况下，可以使用CSS3的transform属性
*/
ul{
    。。。。省略
    transform:translateY(-50%);
}

同时水平和垂直居中

元素存在宽度和高度，说明他已经是个块级或者伪块级了，可以使用position方法，关键代码：

.center{
    positon:relative;
}
ul{
    width:200px;
    height:200px;
    positon:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
}

元素宽度和高度未知的情况下，引用transform也可进行水平和垂直同时居中

1 2	......省略 transfrom:translate(-50%,-50%);

特殊的flex布局

使用CSS3种的flex布局，进行这些居中就方便和快捷多了。目前还不能很好的兼容再所有浏览器中，引入f；flex布局需要声明浏览器，比如display:-webkit-flex，但此是趋势。flex布局较为复杂，仅介绍与居中有关的几个属性。

justify-content:内容相对于主轴的对齐方式，值包括了start(相对主轴开始对齐)/end(相对主轴结束对齐)/center(主轴中对齐，主轴为横轴则为居中，主轴为纵轴，则为垂直对齐)/space-between(两端对其)/space-around(间隔相等对齐)
align-item：相对交叉轴的对齐方式，值包括了flex-start(交叉轴的起点对齐)/flex-end（交叉轴的终点对齐）/flex-center(交叉轴的中点对齐)/stretch（默认，占满）/baseline（第一行文字基线对齐）

展开全文 >>

再网上看到的，试着敲了一遍，弥补我不堪的css

2017-02-06

Css底子不行，看人家用css搭建了一个macBook，甚是不错，模仿敲了一遍。
首先有些图标并没有添加，只做到大概和基本键位，其次并没有实现键位的功能，日后如果有时间，还可添加笔记本盖打开的效果。
实现仅用HTML和CSS/CSS3,其中使用了伪类及CSS3的选择器nth-Child,整体代码没有难度。

结构

<body>
<!--平板-->
<div class="board">
    <!--macBar-->
    <div class="bar"></div>
    <!--键盘-->
    <div class="keyboard">
        <!--按键-->
        <ul></ul>
    </div>
    <!--触摸区-->
    <div class="touch"></div>
</div>
</body>

添加按键

<ul>
        ....省略
        <li><span>!</span><span>1</span></li>
        <li><span>@</span><span>2</span></li>
        <li><span>#</span><span>3</span></li>
        <li></li>
        <li></li>
        <li>Q</li>
          ....省略
    </ul>

多个span嵌套表示某个有两个值的按键。

board 的实现

.board{
    margin: 50px auto;
    padding: 0 auto;
    height: 450px;
    width: 600px;
    background: #D2D2D2;
    border-radius: 20px;
    position: relative;
    box-shadow: 0px 5px 6px rgb(160,160,160);
    background: -webkit-linear-gradient(60deg,#fafafa 25%,#d2d2d2);/*不考虑ie6~9兼容*/
}

电脑盖

用伪类进行设置.

.board:before{
    content: "";
    width:780px;
    height: 20px;
    display: block;
    background:#d2d2d2;
    position: absolute;
    top:-20px;
    left:-90px;
    /**
    上面左右两个大圆角，下面两个小圆角
     */
    border-radius: 0 0 3px 3px;
    border-top-left-radius: 390px 18px;
    border-top-right-radius: 390px 18px;
    border-bottom: 2px solid ;
    background: -webkit-linear-gradient(top,#d2d2d2 50%,#fafafa)
}

bar

盖和主机的链接部分

}
.board .bar{
    width: 450px;
    height: 20px;
    position: absolute;
    left:75px;
    top:2px;
    border-radius: 2px;
    /**
    留空白，更像那么回事
     */
    border: 2px solid #fff;
    border-top: 0;
    background:-webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
}

键盘

绘制键盘区,就是画个框子

.board .keyboard{
    position: absolute;
    left:35px;
    top:35px;
    width: 530px;
    height: 216px;
    border:1px solid #b4b4b4;
    border-radius: 8px;
    background: #fafafa;
    /**
    阴影增加立体感，分分钟3d起来
     */
    box-shadow:2px 0px 2px #b4b4b4 inset,
    0px 3px 3px #b4b4b4 inset,
    -2px -0px 1px #b4b4b4 inset,
    0px -3px 3px #b4b4b4 inset;
}

按键

1 对按键做统一格式安排如下：

ul,li{
    list-style: none;
    padding: 0 auto;
    margin: 0 auto;
    display: block;
    font-family: Verdana;
    cursor: pointer;
    /**
    按键处理为文本不可选择
     */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul{
    width:530px;
    margin-top:8px;
    padding-left: 8px;
}
li{
    width: 29px;
    height: 29px;
    line-height: 29px;
    float:left;
    margin-right: 5px;
    margin-bottom: 5px;
    color: #fff;
    background: #000;
    text-align: center;
    font-size:12px;
    border: 1px solid #464646;
    border-radius: 4px;
    box-shadow: 1px 0px 0px #000,
    0px 1px 0px #000,
    -1px 0px 0px #000,
    0px -1px 0px #000;
}

2 对第一排的功能按键进行大小调整

/**
利用nth-Child选择器,选择前14个功能键
 */
li:nth-child(-n+14) {
    width: 30px;
    height: 15px;
}

3 拥有换挡多功能的按键

/**
拥有换挡功能的键
 */
li:nth-child(-n+27):nth-child(n+16) span,li:nth-child(40) span,li:nth-child(41) span,li:nth-child(42) span,
li:nth-child(53) span,li:nth-child(54) span,li:nth-child(-n+66):nth-child(n+64) span{
    display: block;
    margin-top: 5px;
    line-height: 0.7;
}

4 方向键

li:nth-child(75),li:nth-child(77),li:nth-child(78){
    margin-top: 18px;
    height: 14px;
}
li:nth-child(76){
    height: 13px;
    margin-top: 19px;
}
li:nth-child(78){
    position: absolute;
    bottom: 22px;
    right:38px;
}

5 其他乱七八糟大小的键,只需要调整宽度即可

li:nth-child(28), li:nth-child(29) {
    width: 45px;
}
li:nth-child(43), li:nth-child(55) {
    width: 55px;
}
li:nth-child(56), li:nth-child(67) {
    width: 73px;
}
li:nth-child(-n+74):nth-child(n+68) {
    height: 33px;
}
li:nth-child(72) {
    width: 173px;
}
li:nth-child(71), li:nth-child(73) {
    width: 37px;
}

最后，将touch区放上

.touch{
    position: absolute;
    width: 200px;
    height: 150px;
    border:2px solid #bebebe;
    bottom:23px;
    left:200px;
    border-radius: 8px;
    background: #d6d6d6;
}

ok了，最终图如下
效果图

展开全文 >>

Brave曝安全问题？如今浏览器市场啥样子了

2017-01-31

近日，自发布以来就备受关注和青睐的Brave浏览器，被曝出存在安全问题漏洞——攻击者可以通过利用该漏洞伪造网页进行欺骗，一旦用户点击访问，将可能出现个人相关信息的泄露，同时攻击者还可再虚拟页面实施木马植入和钓鱼等行为。这对一直以广告拦截、防cookie及像素追踪等安全性特点而著称的Brave造成一定的负面影响。不过，最早曝出该问题的地点是在Brave开发人员再Hackerone平台上设立的安全问题有奖征集项目，该项目本身就在于鼓励广大网络安全工作相关人员参与到Brave安全性能提升中，这也是Brave作为开源软件，不断进化的必要措施。

Brave

据悉，Brave由JavaScript创建者兼Mozilla联合创始人Brendan Eich成立的Brave Software公司于2016年初发布。特色为能够屏蔽程序化广告，并换成自家的“广告库”，以快速呈现网站，这样可阻止所有第三方追踪的cookies、所有的指纹识别技术以及所有试图注入广告的脚本，兼具快速与安全。目前，该浏览器已经推出了面向Mac、Windows、iOS和Android四大平台的版本。该浏览器其实基于开源的Chromium打造，并且用到了GitHub Atom文本编辑器中的Electron工具。
Brave

助推了Chrome

上述不可忽视的一点，无论Brave如何好，其仍然是基于Chromium的，也就是说其实Brave的流行从侧面给Chromium好好的宣传了一把。Chromium在架构上使用了Apple发展出来的WebKit排版引擎、Safari的部份源代码与Firefox的成果，并采用Google自家的V8引擎，提升解译JavaScript的效率，同时设计“沙盒”、“黑名单”、“无痕浏览”等功能来实现稳定与安全的网页浏览环境。Chromium开放源代码，借助Google Developer以及其他开发者的力量，Chromium的版本更新速度甚至可以快到没几个小时就有新版本，不过Chromium意在作为Chrome浏览器的实验版或者工程版，因此只有成熟的Chromium技术才会搬到Chrome上使用。
从百度统计的国内浏览器市场份额来看，Chromium的不断进化和提升为Chrome的市场推进提供了强大的力量，Opera的PC版以及Mozilla的Brave,都是基于开源的Chromium。

“兼容头疼的”IE8总份额从15年的36%减少到16年底的14.2%,Chrome则超过40.52%,搜狗,猎豹,QQ等其他Chromium内核浏览器则也还有近10%的市场份额.不过IE7和IE10总共还有5%左右，IE6+IE7还有Edge已经被列入其他，不单独计数。偏向IE特性的360目前也退出了主流（得，现在打开360已经有不兼容某些显示了）。