{"id":488,"date":"2016-05-05T18:58:27","date_gmt":"2016-05-05T10:58:27","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=488"},"modified":"2016-09-03T10:33:26","modified_gmt":"2016-09-03T02:33:26","slug":"html5css3%e5%ae%9e%e7%8e%b0%e8%99%9a%e6%8b%9f%e9%94%ae%e7%9b%98%e5%8a%9f%e8%83%bd","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=488","title":{"rendered":"HTML5\/CSS3\u5b9e\u73b0\u865a\u62df\u952e\u76d8\u529f\u80fd"},"content":{"rendered":"

\n\t\u6211\u4eec\u5728\u8bbf\u95ee\u94f6\u884c\u3001\u91d1\u878d\u3001\u652f\u4ed8\u5b9d\u7b49\u7b2c\u4e09\u65b9\u7f51\u7ad9\u65f6\uff0c\u8f93\u5165\u5bc6\u7801\u6216\u8005\u5b89\u5168u\u76fe\u5b89\u5168\u7801\u7b49\uff0c\u90fd\u6709\u865a\u62df\u952e\u76d8\u529f\u80fd\u3002\u8fd9\u4e9b\u865a\u62df\u952e\u76d8\u53ea\u9700\u901a\u8fc7\u9f20\u6807\u70b9\u70b9\u5373\u53ef\u5b9e\u73b0\u952e\u76d8\u529f\u80fd\uff0c\u9884\u9632\u67d0\u4e9b\u6728\u9a6c\u5bf9\u952e\u76d8\u4e8b\u4ef6\u8fdb\u884c\u76d1\u542c\uff0c\u5bfc\u81f4\u5bc6\u7801\u6cc4\u9732\u95ee\u9898\u3002\u800c\u4f7f\u7528\u865a\u62df\u952e\u76d8\u5219\u5f88\u597d\u7684\u53ef\u4ee5\u89e3\u51b3\u8fd9\u7c7b\u5b89\u5168\u95ee\u9898\uff0c\u56e0\u4e3a\u6211\u4eec\u53ea\u7528\u9f20\u6807\u5de6\u952e\u8fdb\u884c\u70b9\u51fb\uff0c\u6728\u9a6c\u5c31\u76d1\u542c\u4e0d\u5230\u6211\u4eec\u5177\u4f53\u8f93\u5165\u7684\u5bc6\u7801\uff0c\u4ece\u800c\u8fbe\u5230\u66f4\u9ad8\u7684\u5b89\u5168\u6548\u679c\u3002
\n\t\u5c0f\u9762\u5c0f\u7f16\u5c31\u4e3a\u5927\u5bb6\u5b9e\u73b0\u4e00\u5757web\u7248\u7684\u865a\u62df\u952e\u76d8\u529f\u80fd\uff0c\u8fd0\u884cdemo\u622a\u56fe\u5982\u4e0b\uff1a
\n\t HTML\u5b9e\u73b0\u4ee3\u7801\u5982\u4e0b\uff1a\n<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset="UTF-8">\r\n<title>HTML5\/CSS3\u5b9e\u73b0\u865a\u62df\u952e\u76d8\u529f\u80fd<\/title>\r\n<style>\r\n\tbody{\r\n\t\tmargin: 0;\r\n\t\tpadding: 0;\r\n\t\tbackground: #222;\r\n\t}\r\n\tbody.light{\r\n\t\tbackground: #eee;\r\n\t}\r\n\t.switch{\r\n\t\tposition: absolute;\r\n\t\ttop: 35px;\r\n\t\tleft: calc(50% + 335px);\r\n\t\twidth: 40px;\r\n\t\theight: 15px;\r\n\t\tborder-radius: 360px;\r\n\t\tborder: 1px solid #ccc;\r\n\t\tcursor: pointer;\r\n\t}\r\n\t.switch.on{\r\n\t\tbackground: rgba(152, 194, 37, 1);\r\n\t\tborder: 1px solid rgba(132, 174, 17, 1);\r\n\t}\r\n\t.switch .switcher{\r\n\t\twidth: 15px;\r\n\t\theight: 15px;\r\n\t\tborder-radius: 360px;\r\n\t\tmargin-top: -1px;\r\n\t\tbackground: #fff;\r\n\t\tborder: 1px solid #ccc;\r\n\t\tbox-shadow: 0 0 2px rgba(0,0,0,0.3);\r\n\t\tcursor: pointer;\r\n\t}\r\n\t.switch.on .switcher{\r\n\t\tmargin-left: 24px;\r\n\t}\r\n\t.wrapper{\r\n\t\tposition: absolute;\r\n\t\ttop: 50px;\r\n\t\tleft: calc(50% - 400px);\r\n\t\twidth: 800px;\r\n\t\theight: 200px;\r\n\t}\r\n\t.wrapper ul{\r\n\t\tlist-style: none;\r\n\t\tmargin: 0;\r\n\t\tpadding: 0;\r\n\t}\r\n\t.wrapper ul li{\r\n\t\tfloat: left;\r\n\t\twidth: 40px;\r\n\t\theight: 40px;\r\n\t\tborder: 1px solid #333;\r\n\t\tborder-radius: 3px;\r\n\t\tmargin-left: 10px;\r\n\t\tmargin-top: 10px;\r\n\t\tposition: relative;\r\n\t}\r\n\tbody.light .wrapper ul li{\r\n\t\tborder: 1px solid #ccc;\r\n\t}\r\n\tbody.light .wrapper ul li .text{\r\n\t\tcolor: #bbb;\r\n\t}\r\n\tbody.light .wrapper ul li:nth-child(28) .text{\r\n\t\tbackground: #eee;\r\n\t\tborder-left: 1px solid #ccc;\r\n\t\tborder-right: 1px solid #ccc;\r\n\t}\r\n\tbody.light .wrapper ul li:nth-child(29) .text:before{\r\n\t\tbackground: #bbb;\r\n\t}\r\n\t.wrapper ul li:nth-child(14){\r\n\t\twidth: 90px;\r\n\t}\r\n\t.wrapper ul li:nth-child(15){\r\n\t\twidth: 70px;\r\n\t}\r\n\t.wrapper ul li:nth-child(28){\r\n\t\twidth: 60px;\r\n\t\tborder-bottom-right-radius: 0px;\r\n\t}\r\n\t.wrapper ul li:nth-child(28) .text{\r\n\t\tposition: absolute;\r\n\t\ttop: 27px;\r\n\t\tright: -1px;\r\n\t\tz-index: 5;\r\n\t\tbackground: #222;\r\n\t\tborder-left: 1px solid #333;\r\n\t\tborder-right: 1px solid #333;\r\n\t\twidth: 40px;\r\n\t\theight: 40px;\r\n\t}\r\n\t.wrapper ul li:nth-child(29){\r\n\t\twidth: 90px;\r\n\t}\r\n\t.wrapper ul li:nth-child(43){\r\n\t\twidth: 65px;\r\n\t}\r\n\t.wrapper ul li:nth-child(55){\r\n\t\twidth: 115px;\r\n\t}\r\n\t.wrapper ul li:nth-child(56){\r\n\t\topacity: 0.5;\r\n\t}\r\n\t.wrapper ul li:nth-child(43) .text{\r\n\t\tmargin-top: 22px !important;\r\n\t\tmargin-left: -10px;\r\n\t}\r\n\t.wrapper ul li:nth-child(55) .text{\r\n\t\tmargin-top: 22px !important;\r\n\t\tmargin-left: 85px;\r\n\t}\r\n\t.wrapper ul li:nth-child(59){\r\n\t\twidth: 55px;\r\n\t}\r\n\t.wrapper ul li:nth-child(60){\r\n\t\twidth: 260px;\r\n\t}\r\n\t.wrapper ul li:nth-child(61){\r\n\t\twidth: 55px;\r\n\t}\r\n\t.wrapper ul li:nth-child(63){\r\n\t\theight: 19px;\r\n\t\tmargin-top: 30px;\r\n\t}\r\n\t.wrapper ul li:nth-child(64){\r\n\t\theight: 19px;\r\n\t}\r\n\t.wrapper ul li:nth-child(65){\r\n\t\theight: 19px;\r\n\t\tmargin-top: 30px;\r\n\t\tmargin-left: -42px;\r\n\t\tborder-top: 0px solid #fff;\r\n\t}\r\n\t.wrapper ul li:nth-child(66){\r\n\t\theight: 19px;\r\n\t\tmargin-top: 30px;\r\n\t}\r\n\t.wrapper ul li .text{\r\n\t\tcolor: #444;\r\n\t\tfont-family: Helvetica;\r\n\t\tfont-weight: 500;\r\n\t\tfont-size: 12px;\r\n\t\tline-height: 17px;\r\n\t\twidth: 40px;\r\n\t\theight: 40px;\r\n\t\tmargin-top: 5px;\r\n\t\ttext-align: center;\r\n\t}\r\n\t.wrapper ul li:nth-child(14) .text{\r\n\t\ttext-align: right;\r\n\t\tmargin-left: 40px;\r\n\t\tfont-weight: 100;\r\n\t\tmargin-top: 20px !important;\r\n\t\tfont-size: 23px;\r\n\t}\r\n\t.wrapper ul li:nth-child(15) .text{\r\n\t\ttext-align: left;\r\n\t\tmargin-left: 4px;\r\n\t\tfont-weight: 0;\r\n\t\tmargin-top: 20px !important;\r\n\t\tfont-size: 23px;\r\n\t}\r\n\t.wrapper ul li:nth-child(29) .text.active:before{\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\ttop: 5px;\r\n\t\tleft: 5px;\r\n\t\twidth: 5px;\r\n\t\theight: 5px;\r\n\t\tbackground: #98c225 !important;\r\n\t\tbox-shadow: 0 0 3px #98c225;\r\n\t\tborder-radius: 360px;\r\n\t}\r\n\t.wrapper ul li:nth-child(29) .text:before{\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\ttop: 5px;\r\n\t\tleft: 5px;\r\n\t\twidth: 5px;\r\n\t\theight: 5px;\r\n\t\tbackground: #333;\r\n\t\tborder-radius: 360px;\r\n\t}\r\n\t.wrapper ul li:nth-child(29) .text{\r\n\t\tmargin-left: -10px;\r\n\t\tpadding-top: 5px;\r\n\t}\r\n\t.wrapper ul li.activeKey .finger{\r\n\t\tposition: absolute;\r\n\t\twidth: 40px;\r\n\t\theight: 40px;\r\n\t\ttop: -5px;\r\n\t\tleft: -5px;\r\n\t\tmargin-top: 5px;\r\n\t\tmargin-left: 5px;\r\n\t\tborder-radius: 360px;\r\n\t\tbackground: rgba(28, 171, 233, 0.5);\r\n\t\topacity: 0;\r\n\t}\r\n\tinput{\r\n\t\tborder: 0px solid #fff;\r\n\t\tbackground: transparent;\r\n\t\tfont-size: 20px;\r\n\t\tfont-family: Helvetica;\r\n\t\tfont-weight: 100;\r\n\t\twidth: 780px;\r\n\t\theight: 40px;\r\n\t\tposition: absolute;\r\n\t\ttop: 330px;\r\n\t\tcolor: #ccc;\r\n\t\tleft: calc(50% - 390px);\r\n\t\tborder-bottom: 1px solid #333;\r\n\t}\r\n\tbody ::-webkit-input-placeholder{\r\n\t\tcolor: #444;\r\n\t}\r\n\tbody.light ::-webkit-input-placeholder{\r\n\t\tcolor: #bbb;\r\n\t}\r\n\tbody.light input{\r\n\t\tborder-bottom: 1px solid #ccc;\r\n\t\tcolor: #222;\r\n\t}\r\n\tbody.light input:focus{\r\n\t\toutline: none;\r\n\t\tborder-bottom: 1px solid rgba(28, 171, 233, 0.5);\r\n\t}\r\n\tbody input:focus{\r\n\t\toutline: none;\r\n\t\tborder-bottom: 1px solid rgba(28, 171, 233, 0.5);\r\n\t}\r\n<\/style>\r\n<script src="http:\/\/cdn.bootcss.com\/prefixfree\/1.0.7\/prefixfree.min.js"><\/script>\r\n<\/head>\r\n\r\n<body>\r\n<div class='switch'>\r\n  <div class='switcher'><\/div>\r\n<\/div>\r\n<div class='wrapper'><\/div>\r\n<input placeholder='\u4e1a\u4f59\u8349:www.xttblog.com'>\r\n<script src='http:\/\/cdn.bootcss.com\/jquery\/2.2.1\/jquery.min.js'><\/script>\r\n<script src="js\/xttblog.js"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
\n\txttblog.js\u4ee3\u7801\u5982\u4e0b\uff1a\n<\/p>\n
\r\nvar keyboardMap = {\r\n  "type": "german",\r\n  192: 0,\r\n  49: 1,\r\n  50: 2,\r\n  51: 3,\r\n  52: 4,\r\n  53: 5,\r\n  54: 6,\r\n  55: 7,\r\n  56: 8,\r\n  57: 9,\r\n  48: 10,\r\n  189: 11,\r\n  187: 12,\r\n  8: 13,\r\n  9: 14,\r\n  81: 15,\r\n  87: 16,\r\n  69: 17,\r\n  82: 18,\r\n  84: 19,\r\n  90: 20,\r\n  85: 21,\r\n  73: 22,\r\n  79: 23,\r\n  80: 24,\r\n  219: 25,\r\n  187: 26,\r\n  13: 27,\r\n  20: 28,\r\n  65: 29,\r\n  83: 30,\r\n  68: 31,\r\n  70: 32,\r\n  71: 33,\r\n  72: 34,\r\n  74: 35,\r\n  75: 36,\r\n  76: 37,\r\n  186: 38,\r\n  222: 39,\r\n  220: 40,\r\n  16: 42,\r\n  188: 43,\r\n  89: 44,\r\n  88: 45,\r\n  67: 46,\r\n  86: 47,\r\n  66: 48,\r\n  78: 49,\r\n  77: 50,\r\n  188: 51,\r\n  190: 52,\r\n  189: 53,\r\n  16: 54,\r\n  17: 56,\r\n  18: 57,\r\n  91: 58,\r\n  32: 59,\r\n  93: 60,\r\n  18: 61,\r\n  37: 62,\r\n  38: 63,\r\n  39: 65,\r\n  40: 64,\r\n  60: 43,\r\n  44: 51,\r\n  223: 11,\r\n  45: 53,\r\n  63: 11,\r\n  43: 26\r\n},keyboardKeys = {\r\n  "type": "german",\r\n  0: [\"&deg;\",\"^\"],\r\n  1: [\"!\",\"1\"],\r\n  2: [\"\\\"\",\"2\"],\r\n  3: [\"§\",\"3\"],\r\n  4: [\"$\",\"4\"],\r\n  5: [\"%\",\"5\"],\r\n  6: [\"&\",\"6\"],\r\n  7: [\"\/\",\"7\"],\r\n  8: [\"(\",\"8\"],\r\n  9: [\")\",\"9\"],\r\n  10: [\"=\",\"0\"],\r\n  11: [\"?\",\"ß\"],\r\n  12: [\"`\",\"´\"],\r\n  13: [\"&larr;\"],\r\n  14: [\"\u21e5\"],\r\n  15: [\"Q\"],\r\n  16: [\"W\"],\r\n  17: [\"E\"],\r\n  18: [\"R\"],\r\n  19: [\"T\"],\r\n  20: [\"Z\"],\r\n  21: [\"U\"],\r\n  22: [\"I\"],\r\n  23: [\"O\"],\r\n  24: [\"P\"],\r\n  25: [\"Ü\"],\r\n  26: [\"*\",\"+\"],\r\n  27: [\"\u21a9\"],\r\n  28: [\"\u21ea\"],\r\n  29: [\"A\"],\r\n  30: [\"S\"],\r\n  31: [\"D\"],\r\n  32: [\"F\"],\r\n  33: [\"G\"],\r\n  34: [\"H\"],\r\n  35: [\"J\"],\r\n  36: [\"K\"],\r\n  37: [\"L\",\"@\"],\r\n  38: [\"Ö\"],\r\n  39: [\"Ä\"],\r\n  40: [\"'\",\"#\"],\r\n  42: [\"\u21e7\"],\r\n  43: [\">\",\"<"],\r\n  44: ["Y"],\r\n  45: ["X"],\r\n  46: ["C"],\r\n  47: ["V"],\r\n  48: ["B"],\r\n  49: ["N"],\r\n  50: ["M"],\r\n  51: [";",","],\r\n  52: [":","."],\r\n  53: ["_","-"],\r\n  54: ["\u21e7"],\r\n  55: ["fn"],\r\n  56: ["ctrl"],\r\n  57: ["alt","\u2325"],\r\n  58: ["cmd","\u2318"],\r\n  60: ["\u2318","cmd"],\r\n  61: ["alt","\u2325"],\r\n  62: ["\u25c0"],\r\n  63: ["\u25b2"],\r\n  64: ["\u25bc"],\r\n  65: ["\u25ba"]\r\n};\r\n\r\n$(document).ready(function(){\r\n  $("body").addClass("light");\r\n  $("input").focus();\r\n  var ul ="<ul>";\r\n  for(var i=0;i<66;i++){\r\n\t  ul+="<li><div class='text'><\/div><div class='finger'><\/div><\/li>";\r\n  }\r\n  ul+="<\/ul>";\r\n  $('div.wrapper').append(ul);\r\n  $(".wrapper ul li").each(function(i){\r\n    if(keyboardKeys[i]){\r\n      if(keyboardKeys[i].length > 1){\r\n        var string = "";\r\n        if(i==58 || i==60){\r\n          for(var j=0;j<keyboardKeys[i].length;j++){\r\n            string += keyboardKeys[i][j]+"&nbsp; &nbsp; &nbsp;";\r\n          }\r\n          $(".text", this).html(string).css("width","55px").css("margin-left","2px").css("margin-top","23px");\r\n        }\r\n        else{\r\n          for(var j=0;j<keyboardKeys[i].length;j++){\r\n            string += keyboardKeys[i][j]+"<br>";\r\n          }\r\n          $(".text", this).html(string); \r\n        }\r\n      }\r\n      else{\r\n        $(".text", this).html(keyboardKeys[i][0]).css("margin-top","13px"); \r\n      }\r\n      if(i==55 || i==56){\r\n        $(".text", this).html(keyboardKeys[i][0]).css("margin-top","23px").css("margin-left","-8px"); \r\n      }\r\n      if(i==57||i==61){\r\n        $(".text", this).html($(".text", this).html()).css("margin-top","-2px").css("margin-left","-8px").css("line-height","22px"); \r\n      }\r\n      if(i==61){\r\n        $(".text", this).css("margin-left","9px");\r\n      }\r\n      if(i > 61){\r\n        $(".text", this).css("margin-top","3px");\r\n      }\r\n    }\r\n  });\r\n  \r\n  $(".switch").click(function(){\r\n     $(this).toggleClass("on");\r\n     $("body").toggleClass("light");\r\n  });\r\n\r\n  document.addEventListener("keypress",function(e){\r\n    if(e.keyCode == 60 || e.keyCode == 44 || e.keyCode == 45 || e.keyCode == 223 || e.keyCode == 63 || e.keyCode == 43){\r\n      keyDownAni(keyboardMap[e.keyCode],e);\r\n    }\r\n    if(!$("input").is(":focus")){\r\n      e.preventDefault();\r\n    }\r\n  });\r\n  \r\n  document.addEventListener("keydown",function(e){\r\n    if(e.keyCode == 8 || e.keyCode == 9){\r\n      if(!$("input").is(":focus")){\r\n        e.preventDefault();\r\n      }\r\n    }\r\n    setTimeout(function(){\r\n      if(e.shiftKey && e.keyCode == 16){\r\n      var loc = e.location;\r\n      if(loc == 1){\r\n        \/\/left\r\n        keyDownAni(42,e);\r\n      }\r\n      else if(loc == 2){\r\n        \/\/right\r\n        keyDownAni(54,e);\r\n      }\r\n    }\r\n    else if(e.altKey && e.keyCode == 18){\r\n      if(e.location == 1){\r\n        \/\/left\r\n        keyDownAni(57,e);\r\n      }\r\n      else if(e.location == 2){\r\n        \/\/left\r\n        keyDownAni(61,e);\r\n      }\r\n    }\r\n    else if(e.keyCode == 187 || e.keyCode == 188 || e.keyCode == 189 || e.keycode == 191){\r\n      \r\n    }\r\n    else{\r\n      keyDownAni(keyboardMap[e.keyCode],e);\r\n    }\r\n    },10);\r\n  });\r\n});\r\n\r\nfunction keyDownAni(eq,e){\r\n  var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));\r\n  var uid = randLetter + Date.now();\r\n  var sk = isCapslock(e);\r\n  if(sk){\r\n    $(".wrapper ul li").eq(eq).children(".text").toggleClass("active");\r\n  }\r\n  else{\r\n    $(".wrapper ul li").eq(eq).children(".text").toggleClass("active");\r\n  }\r\n  $(".wrapper ul li").eq(eq).addClass("activeKey");\r\n  $(".wrapper ul li").eq(eq).attr("id",uid);\r\n  $("#"+uid+" .finger").animate({\r\n    opacity: 1,\r\n    width: "30px",\r\n    height: "30px",\r\n    top: "0px",\r\n    left: "0px"\r\n  },300, function(){ \r\n    $("#"+uid+" .finger").animate({\r\n      opacity: 0,\r\n      width: "40px",\r\n      height: "40px",\r\n      top: "-5px",\r\n      left: "-5px"\r\n    },300,function(){\r\n      $("#"+uid+" .finger").eq(eq).removeClass("activeKey");\r\n    });\r\n  });\r\n}\r\n\r\nfunction isCapslock(e){\r\n    e = (e) ? e : window.event;\r\n    var charCode = false;\r\n    if (e.which) {\r\n        charCode = e.which;\r\n    } else if (e.keyCode) {\r\n        charCode = e.keyCode;\r\n    }\r\n    var shifton = false;\r\n    if (e.shiftKey) {\r\n        shifton = e.shiftKey;\r\n    } else if (e.modifiers) {\r\n        shifton = !!(e.modifiers & 4);\r\n    }\r\n    if (charCode >= 97 && charCode <= 122 && shifton) {\r\n        return true;\r\n    }\r\n    if (charCode >= 65 && charCode <= 90 && !shifton) {\r\n        return true;\r\n    }\r\n    return false;\r\n}<\/pre>\n
\n\t\u7248\u6743\u58f0\u660e\uff1a\u672c\u6587\u4e3a\u535a\u4e3b\u539f\u521b\u6587\u7ae0\uff0c\u672a\u7ecf\u535a\u4e3b\u5141\u8bb8\u4e0d\u5f97\u8f6c\u8f7d<\/strong>\u3002<\/p>\n
\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/<\/p>
\u6700\u540e\uff0c\u6b22\u8fce\u5173\u6ce8\u6211\u7684\u4e2a\u4eba\u5fae\u4fe1\u516c\u4f17\u53f7\uff1a\u4e1a\u4f59\u8349\uff08yyucao\uff09\uff01\u53ef\u52a0\u4f5c\u8005\u5fae\u4fe1\u53f7\uff1axttblog2<\/font>\u3002\u5907\u6ce8\uff1a\u201c1\u201d\uff0c\u6dfb\u52a0\u535a\u4e3b\u5fae\u4fe1\u62c9\u4f60\u8fdb\u5fae\u4fe1\u7fa4\u3002\u5907\u6ce8\u9519\u8bef\u4e0d\u4f1a\u540c\u610f\u597d\u53cb\u7533\u8bf7\u3002<\/b>\u518d\u6b21\u611f\u8c22\u60a8\u7684\u5173\u6ce8\uff01\u540e\u7eed\u6709\u7cbe\u5f69\u5185\u5bb9\u4f1a\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u60a8\uff01\u539f\u521b\u6587\u7ae0\u6295\u7a3f\u8bf7\u53d1\u9001\u81f3532009913@qq.com\u90ae\u7bb1\u3002\u5546\u52a1\u5408\u4f5c\u4e5f\u53ef\u6dfb\u52a0\u4f5c\u8005\u5fae\u4fe1\u8fdb\u884c\u8054\u7cfb\uff01<\/p>
\u672c\u6587\u539f\u6587\u51fa\u5904\uff1a\u4e1a\u4f59\u8349<\/a>\uff1a » HTML5\/CSS3\u5b9e\u73b0\u865a\u62df\u952e\u76d8\u529f\u80fd<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u6211\u4eec\u5728\u8bbf\u95ee\u94f6\u884c\u3001\u91d1\u878d\u3001\u652f\u4ed8\u5b9d\u7b49\u7b2c\u4e09\u65b9\u7f51\u7ad9\u65f6\uff0c\u8f93\u5165\u5bc6\u7801\u6216\u8005\u5b89\u5168u\u76fe\u5b89\u5168\u7801\u7b49\uff0c\u90fd\u6709\u865a\u62df\u952e\u76d8\u529f\u80fd\u3002\u8fd9\u4e9b\u865a\u62df\u952e\u76d8\u53ea\u9700\u901a […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[223,224,222,225],"class_list":["post-488","post","type-post","status-publish","format-standard","hentry","category-html5","tag-html5","tag-jquery","tag-web","tag-225"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=488"}],"version-history":[{"count":2,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/488\/revisions"}],"predecessor-version":[{"id":747,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/488\/revisions\/747"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}