{"id":265,"date":"2016-03-10T15:12:15","date_gmt":"2016-03-10T07:12:15","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=265"},"modified":"2016-03-10T15:12:15","modified_gmt":"2016-03-10T07:12:15","slug":"html5%e4%bb%bf%e6%89%8b%e6%9c%ba%e5%be%ae%e4%bf%a1%e8%81%8a%e5%a4%a9%e7%95%8c%e9%9d%a2","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=265","title":{"rendered":"HTML5\u4eff\u624b\u673a\u5fae\u4fe1\u804a\u5929\u754c\u9762"},"content":{"rendered":"

\n\tHTML5\u8d8a\u6765\u8d8a\u91cd\u8981\u4e86\uff0c\u6700\u8fd1\u5404\u7f51\u53cb\u900f\u9732\uff0c\u9762\u8bd5\u4e86\u51e0\u5bb6\u516c\u53f8\u90fd\u662fHTML5\u76f8\u5173\u7684\u95ee\u9898\uff01\u6211\u7acb\u523b\u63a8\u8350\u4ed6\u4eec\u6765\u4e1a\u4f59\u8349\u8fdb\u884c\u76f8\u5173\u5b66\u4e60\uff01
\n\t\u4eca\u5929\u6211\u7ed9\u5927\u5bb6\u5e26\u6765\u7684\u662fHTML5\u4eff\u624b\u673a\u5fae\u4fe1\u804a\u5929\u754c\u9762\uff0c\u622a\u56fe\u6548\u679c\u5982\u4e0b\uff1a\n<\/p>\n

\n\t\"HTML5\u4eff\u624b\u673a\u5fae\u4fe1\u804a\u5929\u754c\u9762\"\n<\/p>\n

\n\t\u6e90\u4ee3\u7801\u5982\u4e0b\uff1a\n<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>HTML5\u6a21\u62df\u5fae\u4fe1\u804a\u5929\u754c\u9762<\/title>\r\n    <style>\r\n\t\t\/**\u91cd\u7f6e\u6807\u7b7e\u9ed8\u8ba4\u6837\u5f0f*\/\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            list-style: none;\r\n            font-family: '\u5fae\u8f6f\u96c5\u9ed1'\r\n        }\r\n        #container {\r\n            width: 450px;\r\n            height: 780px;\r\n            background: #eee;\r\n            margin: 80px auto 0;\r\n            position: relative;\r\n            box-shadow: 20px 20px 55px #777;\r\n        }\r\n        .header {\r\n            background: #000;\r\n            height: 40px;\r\n            color: #fff;\r\n            line-height: 34px;\r\n            font-size: 20px;\r\n            padding: 0 10px;\r\n        }\r\n        .footer {\r\n            width: 430px;\r\n            height: 50px;\r\n            background: #666;\r\n            position: absolute;\r\n            bottom: 0;\r\n            padding: 10px;\r\n        }\r\n        .footer input {\r\n            width: 275px;\r\n            height: 45px;\r\n            outline: none;\r\n            font-size: 20px;\r\n            text-indent: 10px;\r\n            position: absolute;\r\n            border-radius: 6px;\r\n            right: 80px;\r\n        }\r\n        .footer span {\r\n            display: inline-block;\r\n            width: 62px;\r\n            height: 48px;\r\n            background: #ccc;\r\n            font-weight: 900;\r\n            line-height: 45px;\r\n            cursor: pointer;\r\n            text-align: center;\r\n            position: absolute;\r\n            right: 10px;\r\n            border-radius: 6px;\r\n        }\r\n        .footer span:hover {\r\n            color: #fff;\r\n            background: #999;\r\n        }\r\n        #user_face_icon {\r\n            display: inline-block;\r\n            background: red;\r\n            width: 60px;\r\n            height: 60px;\r\n            border-radius: 30px;\r\n            position: absolute;\r\n            bottom: 6px;\r\n            left: 14px;\r\n            cursor: pointer;\r\n            overflow: hidden;\r\n        }\r\n        img {\r\n            width: 60px;\r\n            height: 60px;\r\n        }\r\n        .content {\r\n            font-size: 20px;\r\n            width: 435px;\r\n            height: 662px;\r\n            overflow: auto;\r\n            padding: 5px;\r\n        }\r\n        .content li {\r\n            margin-top: 10px;\r\n            padding-left: 10px;\r\n            width: 412px;\r\n            display: block;\r\n            clear: both;\r\n            overflow: hidden;\r\n        }\r\n        .content li img {\r\n            float: left;\r\n        }\r\n        .content li span{\r\n            background: #7cfc00;\r\n            padding: 10px;\r\n            border-radius: 10px;\r\n            float: left;\r\n            margin: 6px 10px 0 10px;\r\n            max-width: 310px;\r\n            border: 1px solid #ccc;\r\n            box-shadow: 0 0 3px #ccc;\r\n        }\r\n        .content li img.imgleft { \r\n            float: left; \r\n        }\r\n        .content li img.imgright { \r\n            float: right; \r\n        }\r\n        .content li span.spanleft { \r\n            float: left;\r\n            background: #fff;\r\n        }\r\n        .content li span.spanright { \r\n            float: right;\r\n            background: #7cfc00;\r\n        }\r\n    <\/style>\r\n    <script>\r\n        window.onload = function(){\r\n            var arrIcon = ['http:\/\/www.xttblog.com\/icons\/favicon.ico','http:\/\/www.xttblog.com\/wp-content\/uploads\/2016\/03\/123.png'];\r\n            var num = 0;     \/\/\u63a7\u5236\u5934\u50cf\u6539\u53d8\r\n            var iNow = -1;    \/\/\u7528\u6765\u7d2f\u52a0\u6539\u53d8\u5de6\u53f3\u6d6e\u52a8\r\n            var icon = document.getElementById('user_face_icon').getElementsByTagName('img');\r\n            var btn = document.getElementById('btn');\r\n            var text = document.getElementById('text');\r\n            var content = document.getElementsByTagName('ul')[0];\r\n            var img = content.getElementsByTagName('img');\r\n            var span = content.getElementsByTagName('span');\r\n\r\n            icon[0].onclick = function(){\r\n                if(num==0){\r\n                    this.src = arrIcon[1];\r\n                    num = 1;\r\n                }else if(num==1){\r\n                    this.src = arrIcon[0];\r\n                    num = 0;\r\n                }                \r\n            }\r\n            btn.onclick = function(){\r\n                if(text.value ==''){\r\n                    alert('\u4e0d\u80fd\u53d1\u9001\u7a7a\u6d88\u606f');\r\n                }else {\r\n                    content.innerHTML += '<li><img src=\"'+arrIcon[num]+'\"><span>'+text.value+'<\/span><\/li>';\r\n                    iNow++;\r\n                    if(num==0){\r\n                        img[iNow].className += 'imgright';\r\n                        span[iNow].className += 'spanright';\r\n                    }else {\r\n                        img[iNow].className += 'imgleft';\r\n                        span[iNow].className += 'spanleft';\r\n                    }\r\n                    text.value = '';\r\n\t\t\t\t\t\/\/ \u5185\u5bb9\u8fc7\u591a\u65f6,\u5c06\u6eda\u52a8\u6761\u653e\u7f6e\u5230\u6700\u5e95\u7aef\r\n\t\t\t\t\tcontent.scrollTop=content.scrollHeight;  \r\n                }\r\n            }\r\n        }\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n    <div id=\"container\">\r\n        <div class=\"header\">\r\n            <span style=\"float: left;\">\u4e1a\u4f59\u8349:\u6a21\u62df\u5fae\u4fe1\u804a\u5929\u754c\u9762<\/span>\r\n            <span style=\"float: right;\">14:21<\/span>\r\n        <\/div>\r\n        <ul class=\"content\">\r\n\t\t\t<!-- \u6b22\u8fce\u52a0\u5165qq\u7fa4\uff1a454796847\u3001135430763 -->\r\n\t\t<\/ul>\r\n        <div class=\"footer\">\r\n            <div id=\"user_face_icon\">\r\n                <img src=\"http:\/\/www.xttblog.com\/icons\/favicon.ico\" alt=\"\">\r\n            <\/div>\r\n            <input id=\"text\" type=\"text\" placeholder=\"\u8bf4\u70b9\u4ec0\u4e48\u5427...\">\r\n            <span id=\"btn\">\u53d1\u9001<\/span>\r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\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\u4eff\u624b\u673a\u5fae\u4fe1\u804a\u5929\u754c\u9762<\/a><\/p>","protected":false},"excerpt":{"rendered":"
HTML5\u8d8a\u6765\u8d8a\u91cd\u8981\u4e86\uff0c\u6700\u8fd1\u5404\u7f51\u53cb\u900f\u9732\uff0c\u9762\u8bd5\u4e86\u51e0\u5bb6\u516c\u53f8\u90fd\u662fHTML5\u76f8\u5173\u7684\u95ee\u9898\uff01\u6211\u7acb\u523b\u63a8\u8350\u4ed6\u4eec\u6765\u4e1a\u4f59\u8349\u8fdb\u884c\u76f8\u5173 […]<\/p>\n","protected":false},"author":2,"featured_media":266,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[119,73,72],"class_list":["post-265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","tag-html5","tag-73","tag-72"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/265","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=265"}],"version-history":[{"count":3,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/265\/revisions"}],"predecessor-version":[{"id":269,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/265\/revisions\/269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/media\/266"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}