{"id":2085,"date":"2018-11-24T20:15:31","date_gmt":"2018-11-24T12:15:31","guid":{"rendered":"https:\/\/www.baishitou.cn\/?p=2085"},"modified":"2018-11-24T20:20:23","modified_gmt":"2018-11-24T12:20:23","slug":"%e7%ba%afcss%e6%90%9c%e7%b4%a2%e6%a1%86hmtl%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.baishitou.cn\/2085.html","title":{"rendered":"\u7eafCSS\u641c\u7d22\u6846HMTL\u4ee3\u7801"},"content":{"rendered":"

8\u6b3e\u7eafCSS\u641c\u7d22\u6846HMTL\u4ee3\u7801<\/p>\n

\u6f14\u793a\u6548\u679c\u56fe\u5982\u4e0b\uff1a<\/h2>\n

\"\"<\/a><\/p>\n

HTML\u4ee3\u7801\uff1a\u6839\u636e\u4f60\u7684\u9700\u8981\u4fee\u6539<\/h2>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>8\u6b3e\u7eafCSS3\u641c\u7d22\u6846<\/title>\r\n\r\n    <link href=\"http:\/\/cdn.bootcss.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n    <style>\r\n        * {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            margin: 0;\r\n            padding: 0;\r\n            background: #494A5F;\r\n            font-weight: 500;\r\n            font-family: \"Microsoft YaHei\",\"\u5b8b\u4f53\",\"Segoe UI\", \"Lucida Grande\", Helvetica, Arial,sans-serif, FreeSans, Arimo;\r\n        }\r\n\r\n        #container {\r\n            width: 500px;\r\n            height: 820px;\r\n            margin: 0 auto;\r\n        }\r\n        div.search {padding: 30px 0;}\r\n\r\n        form {\r\n            position: relative;\r\n            width: 300px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        input, button {\r\n            border: none;\r\n            outline: none;\r\n        }\r\n\r\n        input {\r\n            width: 100%;\r\n            height: 42px;\r\n            padding-left: 13px;\r\n        }\r\n\r\n        button {\r\n            height: 42px;\r\n            width: 42px;\r\n            cursor: pointer;\r\n            position: absolute;\r\n        }\r\n\r\n        \/*\u641c\u7d22\u68461*\/\r\n        .bar1 {background: #A3D0C3;}\r\n        .bar1 input {\r\n            border: 2px solid #7BA7AB;\r\n            border-radius: 5px;\r\n            background: #F9F0DA;\r\n            color: #9E9C9C;\r\n        }\r\n        .bar1 button {\r\n            top: 0;\r\n            right: 0;\r\n            background: #7BA7AB;\r\n            border-radius: 0 5px 5px 0;\r\n        }\r\n        .bar1 button:before {\r\n            content: \"\\f002\";\r\n            font-family: FontAwesome;\r\n            font-size: 16px;\r\n            color: #F9F0DA;\r\n        }\r\n\r\n        \/*\u641c\u7d22\u68462*\/\r\n        .bar2 {background: #DABB52;}\r\n        .bar2 input, .bar2 button {\r\n            border-radius: 3px;\r\n        }\r\n        .bar2 input {\r\n            background: #F9F0DA;\r\n        }\r\n        .bar2 button {\r\n            height: 26px;\r\n            width: 26px;\r\n            top: 8px;\r\n            right: 8px;\r\n            background: #F15B42;\r\n        }\r\n        .bar2 button:before {\r\n            content: \"\\f105\";\r\n            font-family: FontAwesome;\r\n            color: #F9F0DA;\r\n            font-size: 20px;\r\n            font-weight: bold;\r\n        }\r\n\r\n        \/*\u641c\u7d22\u68463*\/\r\n        .bar3 {background: #F9F0DA;}\r\n        .bar3 form {background: #A3D0C3;}\r\n        .bar3 input, .bar3 button {\r\n            background: transparent;\r\n        }\r\n        .bar3 button {\r\n            top: 0;\r\n            right: 0;\r\n        }\r\n        .bar3 button:before {\r\n            content: \"\\f002\";\r\n            font-family: FontAwesome;\r\n            font-size: 16px;\r\n            color: #F9F0DA;\r\n        }\r\n\r\n        \/*\u641c\u7d22\u68464*\/\r\n        .bar4 {background: #F15B42;}\r\n        .bar4 form {\r\n            background: #F9F0DA;\r\n            border-bottom: 2px solid #BE290E;\r\n        }\r\n        .bar4 input, .bar4 button {\r\n            background: transparent;\r\n        }\r\n        .bar4 button {\r\n            top: 0;\r\n            right: 0;\r\n        }\r\n        .bar4 button:before {\r\n            content: \"\\f178\";\r\n            font-family: FontAwesome;\r\n            font-size: 20px;\r\n            color: #be290e;\r\n        }\r\n\r\n        \/*\u641c\u7d22\u68465*\/\r\n        .bar5 {background: #683B4D;}\r\n        .bar5 input, .bar5 button {\r\n            background: transparent;\r\n        }\r\n        .bar5 input {\r\n            border: 2px solid #F9F0DA;\r\n        }\r\n        .bar5 button {\r\n            top: 0;\r\n            right: 0;\r\n        }\r\n        .bar5 button:before {\r\n            content: \"\\f002\";\r\n            font-family: FontAwesome;\r\n            font-size: 16px;\r\n            color: #F9F0DA;\r\n        }\r\n        .bar5 input:focus {\r\n            border-color: #311c24\r\n        }\r\n\r\n        \/*\u641c\u7d22\u68466*\/\r\n        .bar6 {background: #F9F0DA;}\r\n        .bar6 input {\r\n            border: 2px solid #c5464a;\r\n            border-radius: 5px;\r\n            background: transparent;\r\n            top: 0;\r\n            right: 0;\r\n        }\r\n        .bar6 button {\r\n            background: #c5464a;\r\n            border-radius: 0 5px 5px 0;\r\n            width: 60px;\r\n            top: 0;\r\n            right: 0;\r\n        }\r\n        .bar6 button:before {\r\n            content: \"\u641c\u7d22\";\r\n            font-size: 13px;\r\n            color: #F9F0DA;\r\n        }\r\n\r\n\r\n        \/*\u641c\u7d22\u68467*\/\r\n        .bar7 {background: #7BA7AB;}\r\n        .bar7 form {\r\n            height: 42px;\r\n        }\r\n        .bar7 input {\r\n            width: 250px;\r\n            border-radius: 42px;\r\n            border: 2px solid #324B4E;\r\n            background: #F9F0DA;\r\n            transition: .3s linear;\r\n            float: right;\r\n        }\r\n        .bar7 input:focus {\r\n            width: 300px;\r\n        }\r\n        .bar7 button {\r\n            background: none;\r\n            top: -2px;\r\n            right: 0;\r\n        }\r\n        .bar7 button:before{\r\n          content: \"\\f002\";\r\n          font-family: FontAwesome;\r\n          color: #324b4e;\r\n        }\r\n\r\n        \/*\u641c\u7d22\u68468*\/\r\n        .bar8 {background: #B46381;}\r\n        .bar8 form {\r\n            height: 42px;\r\n        }\r\n        .bar8 input {\r\n            width: 0;\r\n            padding: 0 42px 0 15px;\r\n            border-bottom: 2px solid transparent;\r\n            background: transparent;\r\n            transition: .3s linear;\r\n            position: absolute;\r\n            top: 0;\r\n            right: 0;\r\n            z-index: 2;\r\n        }\r\n        .bar8 input:focus {\r\n            width: 300px;\r\n            z-index: 1;\r\n            border-bottom: 2px solid #F9F0DA;\r\n        }\r\n        .bar8 button {\r\n            background: #683B4D;\r\n            top: 0;\r\n            right: 0;\r\n        }\r\n        .bar8 button:before {\r\n            content: \"\\f002\";\r\n            font-family: FontAwesome;\r\n            font-size: 16px;\r\n            color: #F9F0DA;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"container\">\r\n    <div class=\"search bar1\">\r\n        <form>\r\n            <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n            <button type=\"submit\"><\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <div class=\"search bar2\">\r\n        <form>\r\n            <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n            <button type=\"submit\"><\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <div class=\"search bar3\">\r\n        <form>\r\n            <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n            <button type=\"submit\"><\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <div class=\"search bar4\">\r\n        <form>\r\n            <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n            <button type=\"submit\"><\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <div class=\"search bar5\">\r\n        <form>\r\n            <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n            <button type=\"submit\"><\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <div class=\"search bar6\">\r\n        <form>\r\n            <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n            <button type=\"submit\"><\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <div class=\"search bar7\">\r\n        <form>\r\n            <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n            <button type=\"submit\"><\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <div class=\"search bar8\">\r\n        <form>\r\n            <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n            <button type=\"submit\"><\/button>\r\n        <\/form>\r\n    <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
8\u6b3e\u7eafCSS\u641c\u7d22\u6846HMTL\u4ee3\u7801 \u6f14\u793a\u6548\u679c\u56fe\u5982\u4e0b\uff1a HTML\u4ee3\u7801\uff1a\u6839\u636e\u4f60\u7684\u9700\u8981\u4fee\u6539 <!DOCTYPE h […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[694,116,693],"class_list":["post-2085","post","type-post","status-publish","format-standard","hentry","category-web","tag-hmtl","tag-116","tag-css"],"_links":{"self":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts\/2085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/comments?post=2085"}],"version-history":[{"count":0,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts\/2085\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/media?parent=2085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/categories?post=2085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/tags?post=2085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}