让我帮你搜索一下

Signed-off-by: lvshuncai <lvshuncai@gmail.com>

Baidu/.gitignore

@@ -0,0 +1,43 @@
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# =========================
+# Operating System Files
+# =========================
+
+# OSX
+# =========================
+
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

Baidu/css/style.css

@@ -0,0 +1,342 @@
+@charset "utf-8";
+
+html, body, 
+div, section, header, footer,
+button, input, textarea,
+p, ul, li {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
+} 
+
+img {
+    outline: none;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+}
+
+
+/* 搜索框 */
+#search {
+    position: relative;
+    height: 40%;
+    min-height: 314px;
+    max-height: 510px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+#search-form {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+}
+
+.search-form-group {
+    position: relative;
+    max-width: 655px;
+    margin: 0 auto;
+}
+
+.search-form-input {
+    position: absolute;
+    left: 0;
+    right: 108px;
+    vertical-align: top;
+    overflow: hidden;
+}
+
+.search-form-input input {
+    width: 100%;
+    height: 44px;
+    padding: 12px 16px;
+    font-size: 16px;
+    outline: 0;
+    box-shadow: none;
+    border-radius: 10px 0 0 10px;
+    border: 2px solid #c4c7ce;
+    border-right: none;
+    background: #fff;
+    color: #222;
+}
+.search-form-group input:hover {
+    border-color: #9195a3;
+}
+.search-form-group input:focus {
+    border-color: #4e6ef2;
+}
+
+.search-form-group button {
+    cursor: pointer;
+    width: 108px;
+    height: 44px;
+    line-height: 45px;
+    padding: 0;
+    background: #4e6ef2;
+    border-radius: 0 10px 10px 0;
+    font-size: 17px;
+    color: #fff;
+    box-shadow: none;
+    font-weight: 400;
+    border: none;
+    outline: 0;
+    float: right;
+    z-index: 1;
+}
+.search-form-group button:active {
+    background-color: #4662d9;
+}
+.search-form-group button:hover {
+    background-color: #4662d9;
+}
+
+.search-header {
+    position: absolute;
+    bottom: 60px;
+    width: 100%;
+}
+
+.search-header h2 {
+    font-size: 24px;
+    font-weight: 900;
+}
+
+.search-header img {
+    display: inline-block;
+    width: 270px;
+    margin: 0 -12px -16px;
+}
+
+/* 功能区 */
+#function {
+    position: absolute;
+    width: 100%;
+    min-height: 220px;
+    text-align: center;
+    margin-top: 80px;
+}
+
+#tips {
+    color: #9195a3;
+    font-size: 16px;
+}
+
+#stop {
+    display: none;
+    border: none;
+    padding: 8px 15px;
+    border-radius: 100px;
+    color: #bababa;
+    background: #f1f1f1;
+    outline: none;
+    cursor: pointer;
+    margin-top: 50px;
+}
+
+#output {
+    display: none;
+    width: 100%;
+    max-width: 400px;
+    margin: 20px auto;
+}
+
+#output textarea {
+    width: 100%;
+    padding: 5px 8px;
+    border-radius: 3px;
+    border: 1px solid #c8c8c8;
+    outline: none;
+    word-break: break-all;
+}
+#output textarea:focus {
+    border-color: #4285f4;
+    box-shadow: 0 0 2px #4285f4;
+}
+
+#output .tool-btns {
+    text-align: right;
+    margin-top: 8px;
+}
+
+#output button {
+    outline: none;
+    cursor: pointer;
+    color: #fff;
+    background: #3f89ec;
+    border: none;
+    margin-left: 8px;
+    padding: 6px 14px;
+    border-radius: 3px;
+}
+#output button:hover {
+    background: #4490f7;
+}
+#output button:focus {
+    background: #3a84e8;
+}
+
+
+/* 页脚 */
+#footer {
+    width: 100%;
+    position: fixed;
+    z-index: 100;
+    bottom: 0;
+    left: 0;
+    height: 40px;
+    line-height: 40px;
+    font-size: 12px;
+    overflow: hidden;
+    background-color: #fafafa;
+    padding: 0 20px;
+}
+
+#footer li {
+    list-style: none;
+    display: inline-block;
+    float: left;
+    padding: 0 10px;
+}
+
+.footer-left, .footer-left a {
+    color: #9195a3;
+    text-decoration: none;
+}
+
+.footer-right {
+    float: right;
+}
+.footer-right, .footer-right a {
+    color: #bbb;
+}
+
+
+/* 鼠标指示箭头 */
+#arrow {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 50px;
+    height: 50px;
+    z-index: 999;
+    background: url(../img/arrow.png) no-repeat;
+}
+
+#arrow::after {
+    content: '';
+    position: absolute;
+    top: -13px;
+    left: -15px;
+    z-index: -1;
+    border-radius: 9em;
+    box-shadow: 0 0 0 7px rgba(0,0,0,.4);
+    width: 30px;
+    height: 30px;
+    opacity: 0;
+}
+
+#arrow.active::after {
+    -webkit-animation: bubble-scale 1s ease;
+            animation: bubble-scale 1s ease;
+}
+
+@-webkit-keyframes bubble-scale {
+    from {
+        transform: scale(0);
+        opacity: 1
+    }
+    to {
+        transform:scale(2);
+        opacity: 0
+    }
+}
+
+@keyframes bubble-scale {
+    from {
+        transform: scale(0);
+        opacity: 1
+    }
+    to {
+        transform: scale(2);
+        opacity: 0
+    }
+}
+
+
+
+/* 响应式优化 */
+@media screen and (max-width: 650px) {  
+    #search {
+        margin: 0 10px;
+        height: auto;
+        min-height: 200px;
+    }
+
+    .search-header img {
+        width: 180px;
+        margin: 0 -16px -12px;
+    }
+
+    #search-form {
+        bottom: 10px;
+        border: 1px solid #363636;
+    }
+
+    .search-form-input {
+        right: 81px;
+    }
+
+    .search-form-input input {
+        border: none;
+        border-radius: 0;
+        padding: 12px;
+    }
+
+    .search-form-group button {
+        width: 81px;
+        height: 44px;
+        padding: 0 10px;
+        border: none;
+        border-left: 1px solid #e8e8e8;
+        border-radius: 0;
+        font-size: 16px;
+        font-weight: 700;
+        line-height: 46px;
+        white-space: nowrap;
+        letter-spacing: -1px;
+        color: #38f;
+        background: #fff;
+    }
+
+    .search-form-group button:active {
+        background-color: #fdfafa;
+    }
+    .search-form-group button:hover {
+        background-color: #fdfafa;
+    }
+
+    #function {
+        position: relative;
+        top: 0;
+        margin-top: 50px;
+        padding: 0 10px;
+    }
+
+    #stop {
+        margin-top: 30px;
+    }
+
+    #footer {
+        padding: 0;
+    }
+
+    #arrow {
+        background: url(../img/hand.png) no-repeat;
+    }
+}