5个你不明白的HTML5的接口介绍,响应式增强统筹

响应式增强安顿

2015/03/18 · CSS,
HTML5,
JavaScript ·
响应式,
设计

本文由 伯乐在线 –
fzr
翻译,黄利民
校稿。未经许可,禁止转发!
英文出处:24ways.org。欢迎加入翻译组。

24ways
在这10年中曾经日趋变得强大了。在因特网历史中那已是一个永久永远的了。回看一下在那段岁月里我们见证所有变化:Ajax的勃兴,移动设备的增产,前端开发工具不可预言的前景。

工具和技能来来往往,兴起衰落,但在过去的十年中有一件事于自我而言是一向尚未转变的:渐进式增强。

渐进式增强不是一门技术。它更像是一种考虑格局。渐进式增强鼓励你去思想网页所提供的为主意义,而不是去想一个已成功网页如何展现的细不是难点。所以渐进式增强允许你以更抽象的法门考虑大旨职能,而不是纠结于网页在正确的宽屏设备上的精美状态。

若果您早就规定要加上的主旨功用是何等–向购物栏中添加一件商品,公布一条新闻,分享一张图纸–然后您能够以一种最简单易行的艺术达成该功效。那日常也象征要从完美的过时的HTML出手。你所须求的家常只是链接和表格。然后,只要您已经使得该宗旨职能为主工作,你就足以初始对越多现代浏览器坚实效用以渐渐提供更好的用户体验。

以那种艺术工作的补益不仅仅是你的网页可以在旧式浏览器中劳作(即使只是中央能运行)。它还是能确保如果在现在的浏览器中冒出的小毛病不至于酿成大祸。

人们对渐进式增强存在一个误解,认为渐进式增强就是花时间解决旧式浏览器,可是谜底却反倒。将基本成效投入使用并不会开销太久。而且假若你早已完毕这一部分办事,你就足以随心所欲地去测试新型最好的浏览器技术,脑中的意识是不怕它们现在还不能够被大规模支持,也不成难点,因为您早就把最保证的东西投入使用了。

对待Web发展的关键在于意识到不会有最后的接口—可能会有很五唯有一线差异但会借助于自由时刻任意用户的性质和容量的接口。网站不必要在每一个浏览器中都扳平。

真正通晓了这一个就是一个高大地开拓进取。你能够把时光费用在为愈来愈多浏览器提供最好经验的同时保障能在其他建立办事的地方落到实处宗旨职能,而不是全力使你的网站在距离巨大的浏览器中一模一样。

允许自己以一个简易的例子来发挥:导航。

先是步:主旨功效

一经大家现在有一个关于圣诞节12天欢庆的简练网站,一天一个页面。这几个基本职能也格外清楚了:

1、精通其中擅自一天。
2、从一天到另一天浏览。

首先个功用可以经过将文件用头条,段落以及拥有常用的HTML结构化标签组装起来完毕。第一个则经过一一日千里的超链接完结。
那么现在导航列表最契合放在哪个地方啊?个人而言,我是一个跳转到页脚导航情势的粉丝。这些格局先放网页内容,其次才是导航。页面顶部有一个含有href属性的连接指向导航的标签。

XHTML

<a class=”control” href=”#menu”>Menu</a> … <nav
id=”menu” role=”navigation”>… <a class=”control”
href=”#top”>Dismiss</a></nav>

1
2
3
4
5
<a class="control" href="#menu">Menu</a>
 
<nav id="menu" role="navigation">…
<a class="control" href="#top">Dismiss</a></nav>

查阅页脚超链导航情势的示范。

是因为唯有超链接,这么些情势也只是在网络初兴时期能在每一个浏览器上行事。Web浏览器要做的只是显得超链接(正如名字所示)。

第二步:增强型布局

在小屏幕设备上,比如移动电话,页脚链接格局是一个相当不难的解决办法。一旦有更加多的屏幕空间可选择时,就能够利用CSS将导航重新定位在情节之上。我得以安装position属性为absolute,使用弹性布局盒,或者安装display属性为table。

CSS

@media all and (min-width: 35em) { .control { display: none; } body {
display: table; } [role=”navigation”] { display: table-caption;
columns: 6 15em; } }

1
2
3
4
5
6
7
8
9
10
11
12
@media all and (min-width: 35em) {
  .control {
    display: none;
  }
  body {
    display: table;
  }
  [role="navigation"] {
    display: table-caption;
    columns: 6 15em;
  }
}

翻看宽屏样式的演示。

第三步:增强!

科学。现在本身早就足以为所有人提供基本功能了,而且对宽屏也有一定不错的响应风格设计。到此地我得以告一段落脚步了,但渐进式增强的其实优点却是我还没有马到功成的。从此时先河,我得以疯狂地为现代浏览器添加各个奇异的优化功效,而不用担心无法为旧式浏览器提供退路—退路已经准备好了。

事实上我想为小显示屏的设备提供一个美丽的屏外画布。上边是自身的安顿:

1、 将导航放置在主内容上边。
2、 监听伪类为.control的链接是或不是被点击并堵住其反应。
3、 当那几个链接被点击后,为本位body切换赋予伪类.active。
4、 假诺伪类.active存在,将内容滑出以突显导航。

上面是固定内容和导航的CSS代码:

CSS

@media all and (max-width: 35em) { [role=”main”] { transition: all
.25s; width: 100%; position: absolute; z-index: 2; top: 0; right: 0; }
[role=”navigation”] { width: 75%; position: absolute; z-index: 1; top:
0; right: 0; } .active [role=”main”] { transform: translateX(-75%); }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media all and (max-width: 35em) {
  [role="main"] {
    transition: all .25s;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  [role="navigation"] {
    width: 75%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
  }
  .active [role="main"] {
    transform: translateX(-75%);
  }
}

在自我的JavaScript代码中,我将会监听伪类.control链接上的别的点击事件,然后据此为基点body切换赋予伪类.active。

JavaScript

(function (win, doc) { ‘use strict’; var linkclass = ‘control’,
activeclass = ‘active’, toggleClassName = function (element,
toggleClass) { var reg = new RegExp(‘(s|^)’ + toggleClass + ‘(s|$)’); if
(!element.className.match(reg)) { element.className += ‘ ‘ +
toggleClass; } else { element.className = element.className.replace(reg,
”); } }, navListener = function (ev) { ev = ev || win.event; var target
= ev.target || ev.srcElement; if (target.className.indexOf(linkclass)
!== -1) { ev.preventDefault(); toggleClassName(doc.body, activeclass); }
}; doc.addEventListener(‘click’, navListener, false); }(this,
this.document));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function (win, doc) {
  ‘use strict’;
  var linkclass = ‘control’,
    activeclass = ‘active’,
    toggleClassName = function (element, toggleClass) {
      var reg = new RegExp(‘(s|^)’ + toggleClass + ‘(s|$)’);
      if (!element.className.match(reg)) {
        element.className += ‘ ‘ + toggleClass;
      } else {
        element.className = element.className.replace(reg, ”);
      }
    },
    navListener = function (ev) {
      ev = ev || win.event;
      var target = ev.target || ev.srcElement;
      if (target.className.indexOf(linkclass) !== -1) {
        ev.preventDefault();
        toggleClassName(doc.body, activeclass);
      }
    };
  doc.addEventListener(‘click’, navListener, false);
}(this, this.document));

自己一度准备妥当了,是啊?哪有那么快!

CSS3与页面布局学习笔记(一)——概要、选用器、特殊性与刻度单位,css3学学笔记

web前端开发者最最注的始末是四个:HTML、CSS与JavaScript,他们各自在不相同方面公布团结的功效,HTML完结页面结构,CSS完结页面的变现与作风,JavaScript达成部分客户端的效劳与工作。当然内容与用户资源也是不可能忽视的。尽量不要跨职务范围使用,有点“SRP单一任务”的意趣,如字体大小应该是CSS控制的,就不该使用HTML标签完毕,尽管CSS能一举成功的难点尽量不要用JavaScript完结。

美高梅开户网址 1美高梅开户网址 2

javascript和css完毕垂直方向自适应的三角形提示菜单

那是一个相比简单实用的食谱,最紧要的是她不需求引用jQuery库。菜单在笔直方向上能做到自适应,当主菜单靠近顶部,子菜单将会在底下,当主菜单靠近底部,子菜单在地点。运用Modernizr的触摸检测成效,大家得以让子菜单的响应在pc上是hover,而在触摸设备上是点击。例子中还出现说法了什么在步长比较窄的气象下何以调整布局。分享一个最好用的UI前端框架!

html代码:

.代码

        • Home
          • Veggie made
        • Sorrel desert
        • Raisin kakadu
        • Plum salsify
        • Bok choy celtuce
        • Onion endive
        • Bitterleaf
        • Sea lettuce
          • Pepper tatsoi
        • Brussels sprout
        • Kakadu lemon
        • Juice green
        • Wine fruit
        • Garlic mint
        • Zucchini garnish
        • Sea lettuce
          • Sweet melon
        • Sorrel desert
        • Raisin kakadu
        • Plum salsify
        • Bok choy celtuce
        • Onion endive
        • Bitterleaf
      • 前端UI分享

    css代码分享一个最好用的UI前端框架!

    .代码

    1. /* Iconfont made with icomoon.com */
    2. @font-face {
    3. font-family: ‘cbp-tmicons’;
    4. src:url(‘../fonts/tmicons/cbp-tmicons.eot’);
    5. src:url(‘../fonts/tmicons/cbp-tmicons.eot?#iefix’)
      format(’embedded-opentype’),
    6. url(‘../fonts/tmicons/cbp-tmicons.woff’) format(‘woff’),
    7. url(‘../fonts/tmicons/cbp-tmicons.ttf’) format(‘truetype’),
    8. url(‘../fonts/tmicons/cbp-tmicons.svg#cbp-tmicons’)
      format(‘svg’);
    9. font-weight: normal;
    10. font-style: normal;
    11. }
      1. /* reset list style */
    12. .cbp-tm-menu,
    13. .cbp-tm-menu ul {
    14. list-style: none;
    15. }
      1. /* set menu position; change here to set to relative or
        float, etc. */
    16. .cbp-tm-menu {
    17. display: block;
    18. position: absolute;
    19. z-index: 1000;
    20. bottom: 0;
    21. width: 100%;
    22. background: #47a3da;
    23. text-align: right;
    24. padding: 0 2em;
    25. margin: 0;
    26. text-transform: capitalize;
    27. }
      1. /* first level menu items */
    28. .cbp-tm-menu > li {
    29. display: inline-block;
    30. margin: 0 2.6em;
    31. position: relative;
    32. }
      1. .cbp-tm-menu > li > a {
    33. line-height: 4em;
    34. padding: 0 0.3em;
    35. font-size: 1.2em;
    36. display: block;
    37. color: #fff;
    38. }
    39. 前端UI分享 .代码

      1. .no-touch .cbp-tm-menu > li > a:hover,
      2. .no-touch .cbp-tm-menu > li > a:active {
      3. color: #02639d;
      4. }
        1. /* sumbenu with transitions */
      5. .cbp-tm-submenu {
      6. position: absolute;
      7. display: block;
      8. visibility: hidden;
      9. opacity: 0;
      10. padding: 0;
      11. text-align: left;
      12. pointer-events: none;
      13. -webkit-transition: visibility 0s, opacity 0s;
      14. -moz-transition: visibility 0s, opacity 0s;
      15. transition: visibility 0s, opacity 0s;
      16. }
        1. .cbp-tm-show .cbp-tm-submenu {
      17. width: 16em;
      18. left: 50%;
      19. margin: 0 0 0 -8em;
      20. opacity: 1;
      21. visibility: visible;
      22. pointer-events: auto;
      23. -webkit-transition: visibility 0s, opacity 0.3s;
      24. -moz-transition: visibility 0s, opacity 0.3s;
      25. transition: visibility 0s, opacity 0.3s;
      26. }
        1. .cbp-tm-show-above .cbp-tm-submenu {
      27. bottom: 100%;
      28. padding-bottom: 10px;
      29. }
        1. .cbp-tm-show-below .cbp-tm-submenu {
      30. top: 100%;
      31. padding-top: 10px;
      32. }
        1. /* extreme cases: not enough space on the sides */
      33. .cbp-tm-nospace-right .cbp-tm-submenu {
      34. right: 0;
      35. left: auto;
      36. }
        1. .cbp-tm-nospace-left .cbp-tm-submenu {
      37. left: 0;
      38. }
      39. 前端UI分享 .代码

        1. /* last menu item has to fit on the screen */
        2. .cbp-tm-menu > li:last-child .cbp-tm-submenu {
        3. right: 0;
        4. }
          1. /*
        5. arrow: depending on where the menu will be shown, we set
        6. the right position for the arrow
        7. */
          1. .cbp-tm-submenu:after {
        8. border: solid transparent;
        9. content: ” “;
        10. height: 0;
        11. width: 0;
        12. position: absolute;
        13. pointer-events: none;
        14. }
          1. .cbp-tm-show-above .cbp-tm-submenu:after {
        15. top: 100%;
        16. margin-top: -10px;
        17. }
          1. .cbp-tm-show-below .cbp-tm-submenu:after {
        18. bottom: 100%;
        19. margin-bottom: -10px;
        20. }
          1. .cbp-tm-submenu:after {
        21. border-color: transparent;
        22. border-width: 16px;
        23. margin-left: -16px;
        24. left: 50%;
        25. 5个你不明白的HTML5的接口介绍,响应式增强统筹。}
          1. .cbp-tm-show-above .cbp-tm-submenu:after {
        26. border-top-color: #fff;
        27. }
          1. .cbp-tm-show-below .cbp-tm-submenu:after {
        28. border-bottom-color: #fff;
        29. }
          1. .cbp-tm-submenu > li {
        30. display: block;
        31. background: #fff;
        32. }
          1. .cbp-tm-submenu > li > a {
        33. padding: 5px 2.3em 5px 0.6em; /* top/bottom paddings in
          ’em’ cause a tiny “jump” in Chrome on Win */
        34. display: block;
        35. font-size: 1.2em;
        36. position: relative;
        37. color: #47a3da;
        38. border: 4px solid #fff;
        39. -webkit-transition: all 0.2s;
        40. -moz-transition: all 0.2s;
        41. transition: all 0.2s;
        42. }
          1. .no-touch .cbp-tm-submenu > li > a:hover,
        43. .no-touch .cbp-tm-submenu > li > a:active {
        44. color: #fff;
        45. background: #47a3da;
        46. }
          1. /* the icons (main level menu icon and sublevel
            icons) */
        47. .cbp-tm-submenu li a:before,
        48. .cbp-tm-menu > li > a:before {
        49. font-family: ‘cbp-tmicons’;
        50. speak: none;
        51. font-style: normal;
        52. font-weight: normal;
        53. font-variant: normal;
        54. text-transform: none;
        55. line-height: 1;
        56. vertical-align: middle;
        57. margin-right: 0.6em;
        58. -webkit-font-smoothing: antialiased;
        59. }
        60. 前端UI分享 .代码

          1. .cbp-tm-submenu li a:before {
          2. position: absolute;
          3. top: 50%;
          4. margin-top: -0.5em;
          5. right: 0.5em;
          6. }
            1. .cbp-tm-menu > li >
              a:not(:only-child):before {
          7. content: “\f0c9”;
          8. font-size: 60%;
          9. opacity: 0.3;
          10. }
            1. .cbp-tm-icon-archive:before {
          11. content: “\e002”;
          12. }
            1. .cbp-tm-icon-cog:before {
          13. content: “\e003”;
          14. }
            1. .cbp-tm-icon-users:before {
          15. content: “\e004”;
          16. }
            1. .cbp-tm-icon-earth:before {
          17. content: “\e005”;
          18. }
            1. .cbp-tm-icon-location:before {
          19. content: “\e006”;
          20. }
            1. .cbp-tm-icon-mobile:before {
          21. content: “\e007”;
          22. }
            1. .cbp-tm-icon-screen:before {
          23. content: “\e008”;
          24. }
            1. .cbp-tm-icon-mail:before {
          25. content: “\e009”;
          26. }
            1. .cbp-tm-icon-contract:before {
          27. content: “\e00a”;
          28. }
            1. .cbp-tm-icon-pencil:before {
          29. content: “\e00b”;
          30. }
            1. .cbp-tm-icon-article:before {
          31. content: “\e00c”;
          32. }
            1. .cbp-tm-icon-clock:before {
          33. content: “\e00d”;
          34. }
            1. .cbp-tm-icon-videos:before {
          35. content: “\e00e”;
          36. }
            1. .cbp-tm-icon-pictures:before {
          37. content: “\e00f”;
          38. }
            1. .cbp-tm-icon-link:before {
          39. content: “\e010”;
          40. }
            1. .cbp-tm-icon-refresh:before {
          41. content: “\e011”;
          42. }
            1. .cbp-tm-icon-help:before {
          43. content: “\e012”;
          44. }
            1. /* Media Queries */
          45. @media screen and (max-width: 55.6875em) {
          46. .cbp-tm-menu {
          47. font-size: 80%;
          48. }
          49. }
          50. 前端UI分享 .代码

            1. @media screen and (max-height: 25.25em), screen
              and (max-width: 44.3125em) {
              1. 3. .cbp-tm-menu {
            2. font-size: 100%;
            3. position: relative;
            4. text-align: center;
            5. padding: 0;
            6. top: auto;
            7. }
              1. 11. .cbp-tm-menu > li {
            8. display: block;
            9. margin: 0;
            10. border-bottom: 4px solid #3793ca;
            11. }
              1. 17. .cbp-tm-menu > li:first-child {
            12. border-top: 4px solid #3793ca;
            13. }
              1. 21. li.cbp-tm-show > a,
            14. .no-touch .cbp-tm-menu > li > a:hover,
            15. .no-touch .cbp-tm-menu > li > a:active {
            16. color: #fff;
            17. background: #02639d;
            18. }
              1. 28. .cbp-tm-submenu {
            19. position: relative;
            20. display: none;
            21. width: 100%;
            22. }
              1. 34. .cbp-tm-submenu > li {
            23. padding: 0;
            24. }
              1. 38. .cbp-tm-submenu > li > a {
            25. padding: 0.6em 2.3em 0.6em 0.6em;
            26. border: none;
            27. border-bottom: 2px solid #6fbbe9;
            28. }
              1. 44. .cbp-tm-submenu:after {
            29. display: none;
            30. }
              1. 48. .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {
            31. display: block;
            32. width: 100%;
            33. left: 0;
            34. margin: 0;
            35. padding: 0;
            36. bottom: auto;
            37. top: auto;
            38. }
              1. 58. }

              javascript代码

              .代码

              1. 1. /**
                2. * cbpTooltipMenu.js v1.0.0
                3. *
                4. *
                5. * Licensed under the MIT license.
                6. *

                7. *
                8. * Copyright 2013, Codrops
                9. *
                10. */
                11. ;( function( window ) {
                12. 13. ‘use strict’;
                14. 15. var document = window.document,
                16. docElem = document.documentElement;
                17. 18. function extend( a, b ) {
                19. for( var key in b ) {
                20. if( b.hasOwnProperty( key ) ) {
                21. a[key] = b[key];
                22. }
                23. }
                24. return a;
                25. }
                26. 27. // from

                28. function getViewportH() {
                29. var client = docElem[‘clientHeight’],
                30. inner = window[‘innerHeight’];
                31. if( client < inner )
                32. return inner;
                33. else
                34. return client;
                35. }
                36. 37. //

                38. function getOffset( el ) {
                39. return el.getBoundingClientRect();
                40. }
                41. 42. //

                43. function isMouseLeaveOrEnter(e, handler) {
                44. if (e.type != ‘mouseout’ && e.type !=
                ‘mouseover’) return false;
                45. var reltg = e.relatedTarget ?
                e.relatedTarget :
                46. e.type == ‘mouseout’ ? e.toElement :
                e.fromElement;
                47. while (reltg && reltg != handler) reltg =
                reltg.parentNode;
                48. return (reltg != handler);
                49. }
                50. 51. function cbpTooltipMenu( el, options ) {
                52. this.el = el;
                53. this.options = extend( this.defaults,
                options );
                54. this._init();
                55. }
                56. 前端UI分享 .代码
                1. cbpTooltipMenu.prototype = {
                2. defaults : {
                3. // add a timeout to avoid the menu to
                open instantly
                4. delayMenu : 100
                5. },
                6. _init : function() {
                7. this.touch = Modernizr.touch;
                8. this.menuItems =
                document.querySelectorAll( ‘#’ +
                this.el.id + ‘ > li’ );
                9. this._initEvents();
                10. },
                11. _initEvents : function() {
                12. 13. var self = this;
                14. 15. Array.prototype.slice.call(
                this.menuItems ).forEach( function( el,
                i ) {
                16. var trigger = el.querySelector( ‘a’ );
                17. if( self.touch ) {
                18. trigger.addEventListener( ‘click’,
                function( ev ) { self._handleClick(
                this, ev ); } );
                19. }
                20. else {
                21. trigger.addEventListener( ‘click’,
                function( ev ) {
                22. if( this.parentNode.querySelector(
                ‘ul.cbp-tm-submenu’ ) ) {
                23. ev.preventDefault();
                24. }
                25. } );
                26. el.addEventListener( ‘mouseover’,
                function(ev) { if( isMouseLeaveOrEnter(
                ev, this ) ) self._openMenu( this ); }
                );
                27. el.addEventListener( ‘mouseout’,
                function(ev) { if( isMouseLeaveOrEnter(
                ev, this ) ) self._closeMenu( this ); }
                );
                28. }
                29. } );
                30. 31. },
                32. _openMenu : function( el ) {
                33. 34. var self = this;
                35. clearTimeout( this.omtimeout );
                36. this.omtimeout = setTimeout( function()
                {
                37. var submenu = el.querySelector(
                ‘ul.cbp-tm-submenu’ );
                38. 39. if( submenu ) {
                40. el.className = ‘cbp-tm-show’;
                41. if( self._positionMenu( el ) === ‘top’
                ) {
                42. el.className += ‘ cbp-tm-show-above’;
                43. }
                44. else {
                45. el.className += ‘ cbp-tm-show-below’;
                46. }
                47. }
                48. }, this.touch ? 0 :
                this.options.delayMenu );
                49. 50. },
                51. _closeMenu : function( el ) {
                52. 53. clearTimeout( this.omtimeout );
                54. 55. var submenu = el.querySelector(
                ‘ul.cbp-tm-submenu’ );
                56. 57. if( submenu ) {
                58. // based on

                59. el.className = el.className.replace(new
                RegExp(“(^|\\s+)” + “cbp-tm-show” +
                “(\\s+|$)”), ‘ ‘);
                60. el.className = el.className.replace(new
                RegExp(“(^|\\s+)” +
                “cbp-tm-show-below” + “(\\s+|$)”), ‘
                ‘);
                61. el.className = el.className.replace(new
                RegExp(“(^|\\s+)” +
                “cbp-tm-show-above” + “(\\s+|$)”), ‘
                ‘);
                62. }
                63. 64. },
                65. _handleClick : function( el, ev ) {
                66. var item = el.parentNode,
                67. items = Array.prototype.slice.call(
                this.menuItems ),
                68. submenu = item.querySelector(
                ‘ul.cbp-tm-submenu’ )
                69. 70. // first close any opened one..
                71. if( this.current && items.indexOf( item
                ) !== this.current ) {
                72. this._closeMenu( this.el.children[
                this.current ] );
                73. this.el.children[ this.current
                ].querySelector( ‘ul.cbp-tm-submenu’
                ).setAttribute( ‘data-open’, ‘false’ );
                74. }
                75. 76. if( submenu ) {
                77. ev.preventDefault();
                78. 79. var isOpen = submenu.getAttribute(
                ‘data-open’ );
                80. 81. if( isOpen === ‘true’ ) {
                82. this._closeMenu( item );
                83. submenu.setAttribute( ‘data-open’,
                ‘false’ );
                84. }
                85. else {
                86. this._openMenu( item );
                87. this.current = items.indexOf( item );
                88. submenu.setAttribute( ‘data-open’,
                ‘true’ );
                89. }
                90. }
                91. 92. },
                93. arget=”_blank”
                href=”
                94. 95. _positionMenu : function( el ) {
                96. // checking where’s more space left in
                the viewport: above or below the element
                97. var vH = getViewportH(),
                98. ot = getOffset(el),
                99. spaceUp = ot.top ,
                100. spaceDown = vH – spaceUp –
                el.offsetHeight;
                101. 102. return ( spaceDown <= spaceUp ?
                ‘top’ : ‘bottom’ );
                103. }
                104. }
                105. 106. // add to global namespace
                107. window.cbpTooltipMenu = cbpTooltipMenu;
                108. 109. window );

                那是一个相比较不难实用的菜系,最紧要的是她不要求引用jQuery库。菜单在笔直方向上能做…

点评:固然近日的主流浏览器已经已毕了无数的HTML5新特色,不过不少开发者根本就没放在心上到那么些更简短,也很有用的API,本体系小说介绍这个接口API,同时也可望能鼓励越来越多开发者去商量那么些还不有名的API

专业符合测试

自我假如在自我的代码中曾经已毕add伊夫ntListener函数。那并不是一个安然无恙的即使。因为JavaScript不像HTML或CSS那样具有容错性。假使你使用了一个浏览器不可以识其余HTML元素或品质,或是使用了一个浏览器不可以明了的CSS选拔器,属性或是值,那都不是大题材。浏览器会忽略掉它无法识其他东西:既不会抛出荒唐也不会停下解析文件。

JavaScript就差异了。如若您的JavaScript代码有荒唐,又或者应用了一个浏览器不可能分辨的JavaScript函数或性质,浏览器会抛出荒唐,而且会告一段落解析文件。那就是为啥JavaScript中特征在运用此前务须要测试。那也证实将基本功用信赖于JavaScript是至极不安全的。

就自我而言,我急需测试add伊夫ntListener函数的存在性:

JavaScript

(function (win, doc) { if (!win.addEventListener) { return; } … var
enhanceclass = ‘cutsthemustard’; doc.documentElement.className += ‘ ‘ +
enhanceclass; }(this, this.document));

1
2
3
4
5
6
7
8
(function (win, doc) {
  if (!win.addEventListener) {
    return;
  }
  …
  var enhanceclass = ‘cutsthemustard’;
  doc.documentElement.className += ‘ ‘ + enhanceclass;
}(this, this.document));

BBC的大牛们称那种特点测试为正式符合测试。假使一个浏览器通过了该测试,它就达到了业内,所以它就拿走了坚实质量。即便一个浏览器没能达到规范,它就从未有过升高的属性。这也不算什么坏事,记住,网站不须要在各种浏览器中都突显的相同。

我梦想确保自身的离线画布样式只能选取于符合标准的浏览器。我会使用JavaScript为文档添加一个伪类.cutsthemustard:

JavaScript

(function (win, doc) { if (!win.addEventListener) { return; } … var
enhanceclass = ‘cutsthemustard’; doc.documentElement.className += ‘ ‘ +
enhanceclass; }(this, this.document));

1
2
3
4
5
6
7
8
(function (win, doc) {
  if (!win.addEventListener) {
    return;
  }
  …
  var enhanceclass = ‘cutsthemustard’;
  doc.documentElement.className += ‘ ‘ + enhanceclass;
}(this, this.document));

当今自我得以行使已存在的类名来调动自身的CSS:

CSS

@media all and (max-width: 35em) { .cutsthemustard [role=”main”] {
transition: all .25s; width: 100%; position: absolute; z-index: 2; top:
0; right: 0; } .cutsthemustard [role=”navigation”] { width: 75%;
position: absolute; z-index: 1; top: 0; right: 0; } .cutsthemustard
.active [role=”main”] { transform: translateX(-75%); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media all and (max-width: 35em) {
  .cutsthemustard [role="main"] {
    transition: all .25s;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  .cutsthemustard [role="navigation"] {
    width: 75%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
  }
  .cutsthemustard .active [role="main"] {
    transform: translateX(-75%);
  }
}

查阅符合标准的增强型离线画布导航演示。记住,这只适用于小显示器,所以你恐怕会须求将浏览器窗口压扁。

一、CSS3概要

CSS(Cascading Style
Sheet)是层叠样式表的意思,CSS3就是在CSS2.1的基本功上提高的CSS新本子,属于HTML5的一片段。它可以有效地对页面的布局、字体、颜色、背景、动画和其它效用落到实处。CSS3是CSS技术的升级版本,CSS3语言开发是通往模块化发展的。在此从前的业内作为一个模块实在是太庞大而且相比复杂,所以,把它表达为局地小的模块,越来越多新的模块也被加入进来。那几个模块蕴涵:
盒子模型、列表模块、超链接形式 、语言模块 、背景和边框 、文字特效
、多栏布局等。

美高梅开户网址 3

原文地址:5 HTML5 APIs You Didn’t Know Existed
原稿日期: 二零一零年0四月27日
翻译日期: 二〇一三年十一月7日
当芸芸众生看到或者说出”HTML5″那一个词的时候,估算最少有一半上述的人,会联想到她既是一个妖媚而又充满魅力的尤物,同时也是一只可以把你搞得焦头烂额的独角兽,那能怪我们那个开发者吗?
咱俩注意到那一个基础的Api停滞发展了那样长久的光阴(大概是1999-2009),以至于像”placeholder”那样基础的一个叠加功用,也要开支我们不短的年华来处理。
即便如今的主流浏览器已经落到实处了很多的HTML5新特色,然而众多开发者根本就没留神到那几个更精简,也很有用的API。
本序列小说介绍那个接口API,同时也希望能砥砺更加多开发者去切磋那些还不有名的API。
Element.classList
其一特性已经揭橥了一点年,通过classList,我们可以透过JavaScript来支配底层css的class属性.
代码如下:

增长所有!

那可是是一个相持相比较简单的例子,但它申明了渐进式增强背后的思索:只要你已经为所有人提供了要旨功用,就足以随心所欲为当代浏览器增添最风靡的增加品质。

渐进式增强并不表示你必须为所有人都提供相同的成效—恰恰相反。这也是怎么须求尽快确定你的要旨成效是怎么着,而且保障这一个宗旨功能可以被多数主干技巧提供落成。在这几个点的功底上,你可以自由添加越来越多的不属于重点职务的风味。你可以在能支撑更加多特点的浏览器上相应的增进更加多的特性,比如CSS的卡通片效果,JavaScript的定位作用以及HTML中新的输入框类型。

正如本人所说的,渐进式增强不是一门技术。它是一种思维方式。如若你已经开端运用那种思考格局,你就早已准备好了直面接下去的十年了。

赞 1 收藏
评论

1.1、特点

代码如下:

关于小编:fzr

美高梅开户网址 4

微博:@fzr-fzr)
个人主页 ·
我的篇章 ·
26

美高梅开户网址 5

1.2、效果演示

纯CSS3画出小黄人并落成动画效果

美高梅开户网址 6

HTML页面:

美高梅开户网址 7<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>drawLittleHuang</title> <link
rel=”stylesheet” type=”text/css” href=”drawLittleHuang.css”>
</head> <body> <div class=”wrapper”><!– 容器
–> <div class=”littleH”><!– 小黄人 –> <div
class=”bodyH”><!– 身体 –> <div class=”trousers”><!–
裤子 –> <div class=”condoleBelt”><!– 吊带 –> <div
class=”left”></div> <div class=”right”></div>
</div> <div class=”trousers_top”></div><!–
裤子卓越的矩形部分 –> <div class=”pocket”></div><!–
裤袋 –> <!– 三条线 –> <span
class=”line_left”></span> <span
class=”line_right”></span> <span
class=”line_bottom”></span> </div> </div> <div
class=”hair”><!– 头发 –> <span
class=”left_hair_one”></span> <span
class=”left_hair_two”></span> </div> <div
class=”eyes”><!– 眼睛 –> <div class=”leftEye”><!–
左眼 –> <div class=”left_blackEye”> <div
class=”left_white”></div> </div> </div> <div
class=”rightEye”><!– 右眼 –> <div
class=”right_blackEye”> <div class=”right_white”></div>
</div> </div> </div> <div class=”mouse”><!–
嘴巴 –> <div class=”mouse_shape”></div> </div>
<div class=”hands”><!– 双手 –> <div
class=”leftHand”></div> <div
class=”rightHand”></div> </div> <div
class=”feet”><!– 双脚 –> <div
class=”left_foot”></div> <div
class=”right_foot”></div> </div> <div
class=”groundShadow”></div><!– 脚底阴影 –> </div>
</div> </body> </html> View Code

CSS样式:

美高梅开户网址 8@charset
“utf-8″; body{ margin: 0; padding:0; } .wrapper{ width: 300px;
margin:100px auto; } .litteH{ position: relative; } .bodyH{ position:
absolute; width: 240px; height: 400px; border:5px solid #000;
border-radius: 115px; background: rgb(249,217,70); overflow: hidden;
z-index: 2; } .bodyH .condoleBelt{ position: absolute; } .bodyH
.condoleBelt .left, .bodyH .condoleBelt .right{ width: 100px; height:
16px; border:5px solid #000; background: rgb(32,116,160); position:
absolute; top:-90px; left:-35px; z-index: 2;
-webkit-transform:rotate(45deg); } .bodyH .condoleBelt .left{ top:-88px;
left:165px; -webkit-transform:rotate(-45deg); } .bodyH .condoleBelt
.left:after, .bodyH .condoleBelt .right:after{ content: ”; width: 8px;
height: 8px; border-radius: 50%; background: #000; position: absolute;
top:4px; left:88px; } .bodyH .condoleBelt .left:after{ left:5px; }
.bodyH .trousers{ position: absolute; bottom: 0; width: 100%; height:
100px; border-top: 6px solid #000; background: rgb(32,116,160); }
.trousers_top{ width: 160px; height: 60px; border:6px solid #000;
border-bottom: none; border-radius: 0 0 5px 5px; background:
rgb(32,116,160); position: absolute; bottom: 100px; left:34px; }
.pocket{ width: 60px; height: 45px; border:6px solid #000;
border-radius: 0px 0px 25px 25px; position: absolute; bottom:65px;
left:84px; } .line_right{ width: 30px; height: 30px;
border-bottom-left-radius: 100px; border-bottom:6px solid #000;
border-left:6px solid #000; position: absolute; left: 0; bottom:60px;
-webkit-transform:rotate(-75deg); } .line_left{ width: 30px; height:
30px; border-bottom-right-radius: 100px; border-bottom:6px solid #000;
border-right:6px solid #000; position: absolute; right: 0; bottom:63px;
-webkit-transform:rotate(75deg); } .line_bottom{ height: 40px;
border:3px solid #000; border-radius: 3px; position: absolute;
left:118px; bottom: 0px; } .hair{ position: relative; }
.left_hair_one{ width: 130px; height: 100px; border-radius: 50%;
border-top:8px solid #000; position: absolute; left:17px; top:-17px;
-webkit-transform:rotate(27deg); -webkit-animation: lefthair 2s
ease-in-out infinite; } @-webkit-keyframes lefthair{ 0%,25%,31%,100%{ }
30%{ -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0); } }
.left_hair_two{ width: 80px; height: 80px; border-radius: 50%;
border-top:6px solid #000; position: absolute; left:45px; top:-10px;
-webkit-transform:rotate(15deg); } .eyes{ position: relative; z-index:
3; } .eyes .leftEye,.eyes .rightEye{ width: 85px; height: 85px;
border-radius: 50%; border:6px solid #000; background: #fff; position:
absolute; top:60px; left: 27px; } .eyes .leftEye{ left: 124px; } .eyes
.leftEye .left_blackEye, .eyes .rightEye .right_blackEye{ width: 40px;
height: 40px; border-radius: 50%; background: #000; position: absolute;
top:24px; left:22px; -webkit-animation: blackeye 5s ease-in infinite; }
@-webkit-keyframes blackeye{ 0%,20%,50%,70%,100%{ -webkit-transform:
translateX(0px); } 30%,40%{ -webkit-transform: translateX(15px); }
80%,90%{ -webkit-transform: translateX(-15px); } } .eyes .leftEye
.left_blackEye .left_white, .eyes .rightEye .right_blackEye
.right_white{ width: 20px; height: 20px; border-radius: 50%;
background: #fff; position: absolute; top:7px; left:17px;
-webkit-animation: whiteeye 5s ease-in-out infinite; }
@-webkit-keyframes whiteeye{ 0%,20%,50%,70%,100%{ -webkit-transform:
translateX(0px); } 30%,40%{ -webkit-transform: translate3d(3px,4px,0); }
80%,90%{ -webkit-transform: translate3d(-15px,4px,0); } } .eyes .leftEye
.left_blackEye .left_white{ top:4px; left:17px; } .eyes
.leftEye:after, .eyes .rightEye:after{ content: ”; width: 28px; height:
18px; background: #000; position: absolute; left:-30px; top:37px;
-webkit-transform:skewX(20deg) rotate(7deg); } .eyes .leftEye:after{
left:89px; top:37px; -webkit-transform:skewX(-20deg) rotate(-7deg); }
.mouse{ position: relative; } .mouse .mouse_shape{ width: 55px; height:
35px; border:5px solid #000; border-bottom-left-radius: 30px;
background: #fff; position: absolute; top:175px; left:98px; z-index: 3;
-webkit-transform:rotate(-35deg); -webkit-animation: mouse 5s
ease-in-out infinite; } @-webkit-keyframes mouse{ 40%,43%{ width: 45px;
height: 25px; top:180px; } 0%,35%,48%,100%{ width: 55px; height: 35px;
top:175px; -webkit-transform:rotate(-35deg); } } .mouse
.mouse_shape:after{ content: ”; width: 70px; height: 32px;
border-bottom:5px solid #000; border-radius:35px 26px 5px 5px;
background: rgb(249,217,70); position: absolute; top:-16px; left:3px;
-webkit-transform:rotate(34deg); -webkit-animation: mouse_mask 5s
ease-in-out infinite; } @-webkit-keyframes mouse_mask{ 40%,43%{ width:
60.5px; top:-19.3px; left:1.5px; } 0%,35%,48%,100%{ width: 70px;
top:-16px; left:3px; -webkit-transform:rotate(33deg); } } .hands{
position: relative; } .hands .leftHand, .hands .rightHand{ width: 80px;
height: 80px; border:6px solid #000; border-radius: 25px; background:
rgb(249,217,70); position: absolute; top:220px; left:-23px;
-webkit-transform:rotate(40deg); -webkit-animation:rightHand .8s
ease-in-out infinite; } @-webkit-keyframes rightHand{ 0%,50%,100%{
-webkit-transform: rotate(40deg); } 30%{ -webkit-transform:
rotate(37deg) translateX(1px); } } .hands .leftHand{ left:182px;
top:220px; -webkit-transform:rotate(-40deg); -webkit-animation:leftHand
.8s ease-in-out infinite; } @-webkit-keyframes leftHand{ 0%,50%,100%{
-webkit-transform: rotate(-40deg); } 80%{ -webkit-transform:
rotate(-37deg) translateX(-1px); } } .hands .leftHand:after, .hands
.rightHand:after{ content: ”; width: 6px; border:3px solid #000;
border-radius: 3px; position: absolute; left:13px; top:50px;
-webkit-transform:rotate(90deg); } .hands .leftHand:after{ left:53px;
top:50px; -webkit-transform:rotate(-90deg); } .feet{ position: relative;
} .feet .left_foot, .feet .right_foot{ width: 36px; height: 50px;
border-bottom-right-radius: 6px; border-bottom-left-radius: 9px;
background: #000; position: absolute; top: 406px; left:88px;
-webkit-transform-origin: right top; -webkit-animation: rightfoot .8s
ease-in-out infinite; } @-webkit-keyframes rightfoot{ 0%,50%,100%{
-webkit-transform: rotate(0deg); } 80%{ -webkit-transform:
rotate(10deg); } } .feet .left_foot{ border-bottom-right-radius: 9px;
border-bottom-left-radius: 6px; left:130px; -webkit-transform-origin:
left top; -webkit-animation: leftfoot .8s ease-in-out infinite; }
@-webkit-keyframes leftfoot{ 0%,50%,100%{ -webkit-transform:
rotate(0deg); } 30%{ -webkit-transform: rotate(-10deg); } } .feet
.left_foot:after, .feet .right_foot:after{ content: ”; width: 60px;
height: 35px; border-radius: 20px 10px 21px 15px; background: #000;
position: absolute; left:-36px; top:14.4px;
-webkit-transform:rotate(5deg); } .feet .left_foot:after{
border-radius: 10px 20px 15px 21px; left:13px;
-webkit-transform:rotate(-5deg); } .groundShadow{ width: 200px; height:
2px; border-radius: 50%; background: rgba(0,0,0,0.3); box-shadow: 0 0
2px 4px rgba(0,0,0,0.3); position: relative; top: 455px; left:25px; }
View Code

 

相册演示的代码能够在演示中下载到。

// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除,没有则增加
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实,本函数 toggleClassList 假诺协理的话,
// 那么下边的代码就不会被执行,此处仅作示范,请灵活运用
// 2. classList API
// element 的class属性是还是不是蕴含 hide 这些CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};

1.3、协理文档与上学

高于的扶植文档是最好的学习资料,CSS2的拉扯,相当详尽:

美高梅开户网址 9

CSS3的佑助文档:

美高梅开户网址 10

美高梅开户网址 11

 

点击下载支持文档

ContextMenu API
经测试chrome28不管用。。。
新的API,ContextMenu 是极好的接口:
此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单),而不是去掩盖浏览器的默许右键菜单。
急需注意的是,你最好应用js脚本来动态的开创菜单contextmenu,那样能够幸免页面禁用JS脚本的事态
下出现多余的HTML代码。
代码如下:

二、选择器

在行使CSS时大家率先要做的事体是找到元素,在写相应的样式,在CSS2.1中最常使用的是两种拔取器:

a)、ID选择器:以#开头,引用时利用id,如id=”div1″

#div1

{

   color:red;

}

b)、类选用器:以.初阶,使用class属性引用,能够有三个,如class=”cls1 cls2
cls3″

.cls1

{

   background-color:#99ccff;

}

c)、标签选取器:以标签名称起首,如p,span,div,*

div span

{

   font-size:14px;

}

当然还有如伪类接纳,a:hover,a:link,a:visted,a:active。

在CSS3中新增了成百上千的选拔器,倘若大家会jQuery,jQuery中多数选拔器在CSS3中都可以一直利用。

代码如下:

1.1、基础的接纳器

美高梅开户网址 12

黄色字体中采用器的分别是:p.info的趣味是p元素中务必有class=”info”属性将被挑选,p
.info是挑选后代元素,示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style type="text/css">
            p.info{
                color: red;
            }
            p .info{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h2>选择器</h2>
        <p class="info">p1</p>
        <p>
                span1
                <p>p3</p>
        </p>
    </body>
</html>

 运行结果:

美高梅开户网址 13

<div class=”hide”>
<!– contextmenu 指定了运用哪个上下文菜单。 –>
<!– !!!不晓得怎么,我的浏览器上那几个配置不起成效。 –>
<section contextmenu=”mymenu”
style=”min-height:100px;min-height:200px;background:#999;”>
<h1>点击此区域查看菜单</h1>
<!–
为了代码结构的原原本本,把menu元素放到了要选择的元素内部,其实您也可以放置外部的别样地点:
–>
<!– 添加菜单,至于图片图标,请自己设置。add the menu –>
<menu type=”context” id=”mymenu”>
<menuitem label=”刷新页面” onclick=”window.location.reload();”
icon=”;
<menu label=”分享到…”
icon=”;
<menuitem label=”和讯新浪”
icon=””
onclick=”window.location.href=’;
美高梅开户网址,<menuitem label=”腾讯今日头条”
icon=””
onclick=”window.location.href=’;
</menu>
</menu>
</section>
</div>

1.2、组合接纳器

美高梅开户网址 14

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
    </body>
</html>

运转结果:

美高梅开户网址 15

 示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 > span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
    </body>
</html>

美高梅开户网址 16

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 + span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
        span4
    </body>
</html>

美高梅开户网址 17

Element.dataset
数据集(dataset) API 允许开发者对DOM元素设置(set)和获取(get) 以 data-
前缀初叶的属性值。
代码如下:

1.3、属性选拔器

美高梅开户网址 18

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style type="text/css">
            div[id][class~=cls1] {
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        span0
        <div id="div1" class="cls1">
            div1
        </div>
        <div id="div2" class="cls1 cls2">
            div2
        </div>
    </body>

</html>

 运行结果:

美高梅开户网址 19

代码如下:

1.4、伪类

美高梅开户网址 20

 示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类</title>
        <style type="text/css">
           td:first-child
           {
                 background: lightcoral;
           }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <table border="1" width="100%">
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </table>
        <hr />
        <table border="1" width="100%">
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </table>
    </body>

</html>

 运行结果:

美高梅开户网址 21

 陶冶:完结隔行换色,当鼠标悬停在每一行上时高亮彰显为香艳,按下时高亮紫色。

美高梅开户网址 22

        <style type="text/css">
           tr:nth-child(2n+1){
                background:lightblue;
           }
           tr:hover{
               background: yellow;
           }
           tr:active{
               background: orangered;
           }
        </style>

<div id=”intro” data-website=”www.csdn.net” data-id=”551996458″
data-my-name=”铁锚”
data-blog-url=”;

1.5、伪元素

美高梅开户网址 23

正式的伪元素应该使用::,但单:也行,只是为了合营。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类</title>
        <style type="text/css">
            a::before {
                content: "网站";
                display: inline-block;
                background: red;
                color: white;
            }
        </style>
    </head>
    <body>
        <h2>伪元素</h2>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://best.cnblogs.com">博客园</a>
    </body>
</html>

运行结果:

美高梅开户网址 24

代码如下:

三、特殊性(优先级)

a)、同体系,同级其他体制后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID接纳器>伪类>属性选取器>类选用器>标签选择器>通用选拔器(*)>继承的样式
d)、具体 > 泛化的,特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

内嵌样式:内嵌在要素中,<span><!DOCTYPE html> <html>
<head> <meta charset=”UTF-8″>
<title>优先级</title> <style type=”text/css”> * {
color: yellow; } p { color: red !important; } .cls1 { color: deeppink; }
.cls2{ color: blueviolet; } #p1{ color:blue; } </style>
</head> <body> <div> <p id=”p1″ class=”cls2 cls1″
style=”color:#ccc”>p1</p> <span>span1</span>
</div> </body> </html>

运作结果:

美高梅开户网址 25

function testDataset(){
//
var intro = document.getElementById(“intro”);
// 注意这些不是 id属性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = “qq:”+id
+”,website:”+website
+”,blogUrl:”+blogUrl
+”,myName:”+myName
;
//
warn(msg);
};

3.2、计算特殊性值

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选拔 >
伪对象 > 继承 > 通配符
权重、特殊性总计法:
CSS样式选用器分为4个阶段,a、b、c、d
1.即使体制是行内样式(通过Style=“”定义),那么a=1,1,0,0,0
2.b为ID接纳器的总额 0,1,0,0
3.c为属性选拔器,伪类拔取器和class类拔取器的多寡。0,0,1,0

4.d为标签、伪元素选拔器的数目 0,0,0,1

5.!important 权重最高,比 inline style 还要高

 比如结果为:1093比1100,按位对比,从左到右,只要一位超过则随即胜出,否则继续相比较。

美高梅开户网址 26

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>优先级</title>
        <style type="text/css">
            html body #div1
            {
                background: red;
            }

            .cls1 #div1{  
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="cls1">
            <div id="div1">div1
            </div>
            <div id="div2">div2
            </div>
        </div>
    </body>
</html>

运作结果:

美高梅开户网址 27

因为html body #div1的非正规性值为:0102,而.cls1
#div1的极度性值为0110,后者胜出。

从不怎么好说的,和classList一样,简单却实用。(想一想,是还是不是改变了后台和前台JS的少数交互以及解耦?)
window.postMessage API
IE8 已经协助 postMessage API 好几年了,此API允许window 和iframe
元素之间互相传送音信。
跨域支持啊。 代码如下:

四、刻度

在CSS中刻度是用于安装元素尺寸的单位。

独特值0可以简简单单单位。例如:margin:0px可以写成margin:0
有些特性可能同意有负长度值,或者有早晚的界定界定。如果不接济负长度值,那应该变换来可以被匡助的近年的一个尺寸值。
长度单位包罗统计:相对单位和相对单位。
冲突长度单位包含有: em, ex, ch, rem, vw, vh, vmax, vmin
纯属长度单位包括有: cm, mm, q, in, pt, pc, px

 美高梅开户网址 28

代码如下:

4.1、相对长度单位

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

// From window or frame on domain 1, send a message to the iframe which
hosts another domain
var iframeWindow = document.getElementById(“iframe”).contentWindow;
iframeWindow.postMessage(“Hello from the first window!”);
// From inside the iframe on different host, receive message
window.addEventListener(“message”, function(event) {
// Make sure we trust the sending domain
if(event.origin == “”) {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage(“Hello back!”);
}
]);
// message 只同意string 类型的数目,不过你可以动用 JSON.stringify 以及
JSON.parse 传递更加多有含义的音信。

4.2、文本相对长度单位

em
相对长度单位。相对于当下目的内文本的书体尺寸。如当前对行内文本的书体尺寸未被人为设置,则相对于浏览器的默许字体尺寸。(相对父元素的字体大小倍数)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }

浏览器的默许字体大小为16像素,浏览器默许样式也号称user agent
stylesheet,就是颇具浏览器内置的默许样式,多数是足以被修改的,但chrome无法直接修改,可以被用户样式覆盖。

美高梅开户网址 29

以身作则代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div2{
                background: blue;
                height: 5em;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

结果:美高梅开户网址 30

div2的冲天为80px,是因为user agent
stylesheet默许样式中字体大小为16px,根据这几个规则大家可以手动修改字体大小,div2的莫大将爆发变化。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5em;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

结果:

美高梅开户网址 31

rem

rem是CSS3新增的一个周旋单位(root
em,根em),相对于根元素(即html元素)font-size总括值的倍数
只相对于根元素的分寸
rem(font size of the root
element)是指绝对于根元素的字体大小的单位。简单来说它就是一个针锋相对单位。看到rem大家自然会想起em单位,em(font
size of the
element)是指相对于父元素的字体大小的单位。它们中间其实很一般,只不过一个测算的条条框框是借助根元素一个是借助父元素总计。(绝对是的HTML元素的字体大,默认16px)

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5rem;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

 

运行结果:

美高梅开户网址 32

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            html {
                font-size: 10px;
            }
            body {
                font-size: 16px;
            }
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5rem;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

结果:

美高梅开户网址 33

按理中度为5*10px=50像素中度,但此间为60,是因为chrome浏览器限制了小小字体大小为12px,从上图能够见见。

autofocus Attribute
autofocus 属性确保当页面加载后,给定的 BUTTON,INPUT或者 TEXTAREA
元素可以自行得到主题。

4.3、Web App与Rem

为了兑现不难的响应式布局,可以行使html元素中字体的大小与显示器间的比率设置font-size的值完成当显示器分辨率变化时让要素也转移,之前的tmall就动用那种方法,示例如下:

美高梅开户网址 34

示例一:

美高梅开户网址 35<!DOCTYPE
html> <html> <head> <meta charset=”UTF-8″>
<title>rem phone test</title> <!– 描述:视口 –>
<meta name=”viewport” content=”user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0″> <style> html { height:
100%; width: 100%; font-family: ‘Heiti SC’, ‘Microsoft YaHei’;
font-size: 20px; overflow: hidden; outline: 0; -webkit-text-size-adjust:
none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } body {
height: 100%; margin: 0; overflow: hidden; -webkit-user-select: none;
/*裁撤用户选用*/ width: 100%; } header, footer { width: 100%;
line-height: 1.5rem; font-size: 1rem; color: #000; border: 1px solid
#ccc; text-align: center; background-color: #ccc; } .bd { margin-top:
1rem; margin-bottom: .5rem; margin-right: -.5rem; font-size: 0; }
.bd:after { clear: both; } .box { width: 5rem; height: 5rem; display:
inline-block; margin-right: .5rem; margin-bottom: .5rem; } .blue-box {
background-color: #06c; } .org-box { background-color: #1fc195; }
</style> </head> <body>
<header>我是底部</header> <div class=”bd”> <div
class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
<div class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
<div class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
<div class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
</div> <footer>我是页脚</footer> <script> /*
;(function(win){ win.alert(“Hello IIEF”); })(window); */
//定义一个艺术并施行 (function(doc, win) { //得到文档的根节点html var
docEl = doc.documentElement;
//假设window中存在orientationchange对象,则取orientationchange,否则取resize
//为了事件绑定 resizeEvt = ‘orientationchange’ in win ?
‘orientationchange’ : ‘resize’; //定义一个主意,重新总计font-size大小
var recalc = function() { //页面的增幅 var clientWidth =
docEl.clientWidth; //若是没有大幅度则脱离 if (!clientWidth) return;
//重新总结font-size大小,假定320的宽窄时字体大小为20;,当页面变化时再一次安装字体大小
docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px’; };
//如若浏览器不襄助添加事件监听则停止 if (!doc.add伊夫ntListener) return;
//添加事件监听,指定事件处理函数的时期或阶段(boolean)true表示在破获事件实施,false表示冒泡时执行
win.add伊夫ntListener(resizeEvt, recalc, false);
//当Dom树加载成功时实施总计,DOMContentLoaded事件要在window.onload此前实施
doc.add伊夫ntListener(‘DOMContentLoaded’, recalc, false); })(document,
window); </script> </body> </html> View Code

运转结果:

 美高梅开户网址 36

美高梅开户网址 37

示例二:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>web app 与rem</title>
        <style type="text/css">
            html {
                font-size: 20px;
            }
            body {
                font-size: 16px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 3rem;
                width: 3rem;
                font-size: .7rem;
            }
        </style>
    </head>

    <body>
        <div id="div2">
            Hello rem
        </div>
        <script type="text/javascript">
            function resize() {
                var w = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = w * 20 / 290 + "px";
            }
            window.onresize =resize;

            resize();
        </script>
    </body>

</html>

 

运作结果:

 美高梅开户网址 38

美高梅开户网址 39

变屏幕变宽时元素大小也随后暴发变化,但这边并没有考虑中度,但为响应式布局与hack提供了思路。

代码如下:

五、示例与扶持下载

 援救文档与示范下载

参照:

美高梅开户网址 40

web前端开发者最最注的情节是七个:HTML、CSS与JavaScri…

<input autofocus=”autofocus” />
<button autofocus=”autofocus”>Hi!</button>
<textarea autofocus=”autofocus”></textarea>

autofocus 属性紧要用在简约的输入页面,详情请参考:autofocus 属性
各浏览器厂商对那一个API的支撑度各不同,所以在选择以前最好检测一下包容性,花一些时光来阅读方面所列出的API,您将会对她们询问和操纵越来越多。
一部分的测试代码如下:

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>5个你不知情的 HTML5 API接口演示 </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author”
content=”[email protected]”>
<meta name=”Description”
content=”original=;
<style>
.hide{ display:none}
.poplayer{ z-index:999; position:absolute;background-color:#fff;
top:0px;left:0px;overflow: hidden;width:100%;height:100%;opacity:1;}
.close{ top:3px; right:10px;position:absolute;}
</style>
<script>
// 突显警告音讯
function warn(msg){
warn = warn || “一个未知警告!”;
if(window.console){
console.warn(msg);
} else {
alert(msg);
}
};
// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除,没有则增进
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实,本函数 toggleClassList 借使协助的话,
// 那么上边的代码就不会被执行,此处仅作示范,请灵活利用
// 2. classList API
// element 的class属性是或不是带有 hide 那几个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};
// 使用className属性(Dom元素,css类名)
function toggleClassName(element,cName){
var className = element.className || “”;
// 去掉首尾的空白
cName = cName.replace(/^\s*|\s*$/g,””);
// cName 中间借使含有空白字符,则战败.
倘诺要可以处理,可以拆分为数组,单个处理
var blankReg = /\s+/;
if(blankReg.test(cName)){
warn(“‘”+cName+”‘中间含有空白字符”);
return false;
}
// 正则, \b 表示可知三番五次字符的分界,可以那样了解:
// “hide2 hide hide myname” 那么,
// hide2 的上下各有一个虚构的\b ,hide 前后也有,
// 不过 hi 和 de之间则并未。
// g 表示单行全局
//var rep = /\bhide\b/g;
var rep = new RegExp(“\\b” + cName + “\\b”, “g”);
if(rep.test(className)){
className = className.replace(rep,””);
} else {
className += ” “+cName;
}
// 替换新className。
element.className = className;
return true;
};
// 函数,切换(元素id,className)
function toggleClass(elementId,cName){
// 获取一个DOM元素
var element = document.getElementById(elementId);
// 如果不设有元素
if(!element){
warn(“id为”+elementId+”的元素不设有”);
return false;
}
if(!element.classList){
warn(“id为”+elementId+”的要素不帮助classList属性,将选用此外手段来贯彻”);
return toggleClassName(element,cName);
} else {
return toggleClassList(element,cName);
}
};
function testDataset(){
//
var intro = document.getElementById(“intro”);
// 注意那么些不是 id属性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = “qq:”+id
+”,website:”+website
+”,blogUrl:”+blogUrl
+”,myName:”+myName
;
//
warn(msg);
};
// dom加载后 执行
window.addEventListener(“DOMContentLoaded”, function() {
var open = document.getElementById(“open”);
var close = document.getElementById(“close”);
open.addEventListener(“click”,function(){
//
toggleClass(“diary2″,”hide”);
toggleClass(“loading”,”hide”);
});
close.addEventListener(“click”,function(){
//
toggleClass(“diary2″,”hide”);
toggleClass(“loading”,”hide”);
});
//
testDataset();
}, false);
</script>
</head>
<body>
<div>
<div id=”diary2″ class=”diary poplayer hide”>
<a href=”javascript:void(0)” _fcksavedurl=””javascript:void(0)””
id=”close”>关闭</a>
<div id=”loading” class=”loading hide” style=”z-index:1; position:
absolute; left: 40%; top: 30%; width: 104px; height: 104px;opacity:
0.5;background: #000000;border: 0px solid #000000;border-radius:
10px;-webkit-border-radius: 10px;”>
<img src=””
alt=””
style=”position:absolute; left:26px; top:10px;width: 50px;height:
50px;border-radius: 10px;-webkit-border-radius: 10px;”>
<div class=”loadingtext” style=”position:absolute;left: 12px;top:
76px;color: #ffffff;”>正在加载中</div>
</div>
</div>
<div>
<a href=”javascript:void(0)” id=”open”>打开</a>
</div>
</div>
<div class=”hide”>
<!– contextmenu 指定了拔取哪个上下文菜单。 –>
<!– !!!不精通怎么,我的浏览器上这一个配置不起成效。 –>
<section contextmenu=”mymenu”
style=”min-height:100px;min-height:200px;background:#999;”>
<h1>点击此区域查看菜单</h1>
<!–
为了代码结构的明驾驭白,把menu元素放到了要动用的元素内部,其实您也足以放置外部的其他地点:
–>
<!– 添加菜单,至于图片图标,请自己设置。add the menu –>
<menu type=”context” id=”mymenu”>
<menuitem label=”刷新页面” onclick=”window.location.reload();”
icon=”;
<menu label=”分享到…”
icon=”;
<menuitem label=”今日头条天涯论坛”
icon=””
onclick=”window.location.href=’;
<menuitem label=”腾讯今日头条”
icon=””
onclick=”window.location.href=’;
</menu>
</menu>
</section>
</div>
<div id=”intro” data-website=”www.csdn.net” data-id=”551996458″
data-my-name=”铁锚”
data-blog-url=”;
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图