百度搜索是大家最常用的搜索引擎之一，而它的界面看久了难免生厌，太多繁杂的广告，和很多不需要的信息。本文就对优化百度搜索界面进行介绍，希望能帮到大家。
先分享一下我美化后的截图叭。
需要的工具：
1. Chrome浏览器或火狐浏览器；
2. 安装好Stylish插件。
只要是能支持Stylish插件的其他浏览器也可以，它是我们进行优化的关键。该插件里有许多用户自己分享的各网页样式，也可以自行针对网页编写CSS代码，调整本地网页样式。注意，这调整的只是本地网页的样式，即你再自己电脑上看到的样式。
我的样式基于百度搜索结果css美化编写，这是一份非常优秀的代码，但是可能由于百度近来更新前端代码后，直接使用该博客提供的代码，界面会比较混乱，因此我在此基础上进行了调整，并对细节设计进行了优化。
下面分享我的CSS代码，将其复制进自定义的样式中即可。
第一个部分：百度首页
该部分CSS代码：
#s_main { display: none !important; } #bottom_layer{ display: none !important; } #head_wrapper .soutu-btn{ margin-top: 10px !important; top: 0 !important; } html { overflow: hidden !important; } #head{ backdrop-filter: blur(0px) !important; } /*###############################背景图片################################# */ html body, .result-op, #content_left .result { /* 背景在这里替换*/ background-image:url(https://s1.ax1x.com/2020/07/12/U1bwLt.jpg); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; background-attachment: fixed; } #content_right { display: none; } html body { color: #eee; } /* #######################整个页面毛玻璃########################## */ #container { width: 100%; background-color:#4a4a4ab3; /*backdrop-filter: blur(4px);*/ border-radius: 0px 0px 20px 20px; padding-bottom: 10px; box-shadow: 0px 10px 16px #000000a6; display: flex; flex-flow: column; align-items:center; justify-content: center; } /*######################搜索结果 ########################### */ #content_left { width: 80%; padding: 0; padding-left:0 !important; } /* 搜索结果加背景 */ #content_left .result-op, #content_left .result { width: 95%; margin:30px; margin-bottom: 14px; border-radius: 10px; padding: 10px 20px 10px 20px; backdrop-filter: blur(0px); box-shadow: 6px 6px 6px #0000002e, -6px -6px 6px #ffffff1f, 3px 3px 3px #00000014, -3px -3px 3px #ffffff1f; } #content_left .result-op:before, #content_left .result:before { content:""; position: absolute; bottom: 0; left: 0; right: 0; top:0; background: #45454594; height: 100%; z-index: -1; backdrop-filter: blur(60px); border-radius: 9px; } /* 结果中的文字 */ em { font-style: normal; color: #ff7e7e; } a:-webkit-any-link { color: #3ccac2; cursor: pointer; text-decoration: none; } /* #############*/ a:visited { color: #ff8000 !important; } #content_right, .cr-offset { width:0 !important; } .bdsug { background-image: initial; background-color: rgba(20, 20, 20, .43); border-top-color: rgba(189, 185, 177, 0); border-right-color: rgba(189, 185, 177, 0); border-bottom-color: rgba(189, 185, 177, 0); border-left-color: rgba(189, 185, 177, 0); box-shadow: rgba(213, 209, 203, 0) 1px 1px 3px; border-radius: 15px; } .bdsug .bdsug-feedback-wrap { background-image: initial; background-color: rgba(222, 219, 213, 0); color: rgb(108, 108, 108); } #form { background: #59595900 !important; } .bdsug li { background: #5959594a; width: 522px; color: #e5e5e5; font: 14px arial; line-height: 22px; padding: 0 8px; position: relative; cursor: default; backdrop-filter: blur(15px); } /* ##############################导航栏############################# */ #head { background: #5959594a; backdrop-filter: blur(15px); border-radius: 10px; margin: 0; padding: 0; } /* 删掉百度的logo */ #result_logo img { width: 0; } /* 搜索框加圆角 */ .s_ipt_wr.bg, .s_btn_wr.bg, #su.bg { border-radius: 20px; padding-left: 10px; border-color:#ffffff52; } /* 搜索框文字颜色 */ #kw { color: #fff; } /* 按图搜索的按钮 */ .soutu-btn { background: #54545400; color: #66d8ea; border: 2px solid; height: 10px; width: 10px; border-radius: 10px; } /* 百度一下按钮 */ #form { display: flex; height: 100%; } .s_btn { color: #3ccac2; } /* 百度一下按钮指针放上去 */ .s_btn.btnhover { background: #5e5e5e69; border: 3px solid #95959588; box-shadow: 0px 0px 0px #fff; } /* head bar右边的 百度首页, 设置啥的 */ #u { vertical-align: middle; } #u a { text-decoration: none; color: #3ccac2; margin: 0 7px 0 0; } .wrapper_s #u { margin: 20px 10px 0px 0px; } /* ##################################body ################################*/ /* 网页,资讯,视频...那个条 */ #s_tab { line-height: 36px; height: 45px; padding: 55px 0 0 121px; float: none; zoom: 1; background: #575757aa !important; backdrop-filter: blur(30px); } #s_tab a, #s_tab b { color: #e1e1e1; font-size: 10px; padding: 0; margin: 0; } #s_tab b { border-bottom: 2px solid #3ccac2; border-radius: 2px; } .s_tab_inner { padding-top:7px; } /* 为您找到多少结果 */ .nums { color: #ccc; } /* 搜索工具 */ .search_tool, .search_tool_conter span { cursor: pointer; color: #cacaca; } /* ######################底部########################### */ #page { background-color: #4141418a !important; backdrop-filter: blur(10px); margin:0 !important; } #rs { background-color:#00000000 !important; } #foot { margin: 20px; margin-bottom: 0; background: #4a4a4ac4 !important; backdrop-filter: blur(10px); border-radius: 10px; display: flex; justify-content: space-around; box-shadow: 5px 5px 6px #0000001f, -5px -5px 6px #fff3; } #foot #help { background-color:#00000000 !important; } /* 下面12345678页的按钮 */ /* 搜索结果日期颜色 */ .m, a.m { color: #b5b5b5; } * { color: #ccc; }
第二个部分： 百度搜索界面
.wrapper_new::selection{color:#fff;background:red;} .wrapper_new::-moz-selection{color:#fff;background:red;} .wrapper_new::-webkit-selection{color:#fff;background:red;} #s_main { display: none !important; } #bottom_layer{ display: none !important; } #head_wrapper .soutu-btn{ margin-top: 10px !important; top: 0 !important; } #container.sam_newgrid{ margin-left: 0 !important; } #container.sam_newgrid #content_left{ width: 80% !important; } .new-pmd .c-abstract{ color: #ccc; } .new-pmd .c-color-gray{ color: #ccc; } #container.sam_newgrid .c-showurl{ color: #ccc; } .c-icon { color: #ccc !important; } #foot{ display: none !important; } .wrapper_new #s_tab .cur-tab{ color: #3ccac2; } .wrapper_new #s_tab .cur-tab:before{ color: #3ccac2; } .wrapper_new #s_tab a{ color: #ccc; } .wrapper_new #s_tab .s-tab-item:hover{ color: #3ccac2; } .wrapper_new #s_tab .s-tab-item:hover:before{ color: #3ccac2; } .wrapper_new #s_tab .cur-tab:after{ background: #3ccac2; } .search_tool:hover, .search_tool_conter span:hover{ color: #3ccac2; } .searchTool-spanner:hover{ color: #3ccac2; } .wrapper_new #u>a{ color: #ccc; } .wrapper_new #u>a:hover{ color: #3ccac2; } .new-pmd .c-color-t{ color: #ccc; } .page-inner{ text-align: center; } .wrapper_new .container_new~#page strong{ background: #3ccac2; } #page .pc{ color: #000; } .wrapper_new .container_new~#page a:hover, .wrapper_new .container_new~#page a:hover .pc, .wrapper_new .container_new~#page .n:hover{ background: #3ccac2; color: #000; } .s_tab_inner{ margin-left:5%; } .head_wrapper{ margin-left:10%; } #content_left{ margin-top:20px; } .head_nums_cont_outer{ position: absolute; top:0; left:12%; } .bdsug-overflow{ color: #ccc !important; } .wrapper_new #form .bdsug-new ul li b{ color: #ccc; } .wrapper_new #form .bdsug-new ul li{ color: #fff !important; padding: 0 14px; } .bdsug-s b{ color: #3ccac2 !important; } .bdsug-s{ background: rgba(255, 255, 255, 0.3) !important; } .wrapper_new #form .bdsug-new{ margin-top:8px; } .wrapper_new #form .bdsug-new>div span:hover, .wrapper_new #form .bdsug-new>div a:hover{ color: #ccc !important; } .wrapper_new #form .bdsug-new ul{ margin: 0; padding: 0 0 7px; } div[class$='_rs']{ margin: 25px 0px -10px 35px !important; } .gzauZtop_rs{ margin: 25px 0px -10px 35px; } .ueRkQmop_rs{ margin: 25px 0px -10px 35px !important; } /*###############################背景图片################################# */ html body, .result-op, #content_left .result { /* 背景在这里替换*/ background-image:url(http://yanxuan.nosdn.127.net/ffd206601967811893a3df34773d5908.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; background-attachment: fixed; } #content_right { display: none; } html body { color: #eee; } /* #######################整个页面毛玻璃########################## */ #container { width: 100%; background-color:#4a4a4ab3; /*backdrop-filter: blur(4px);*/ border-radius: 0px 0px 20px 20px; padding-bottom: 10px; box-shadow: 0px 10px 16px #000000a6; display: flex; flex-flow: column; align-items:center; justify-content: center; } /*######################搜索结果 ########################### */ #content_left { width: 80%; padding: 0; padding-left:0 !important; } /* 搜索结果加背景 */ #content_left .result-op, #content_left .result { width: 95%; margin:30px; margin-bottom: 14px; border-radius: 10px; padding: 10px 20px 10px 20px; backdrop-filter: blur(0px); box-shadow: 6px 6px 6px #0000002e, -6px -6px 6px #ffffff1f, 3px 3px 3px #00000014, -3px -3px 3px #ffffff1f; } #content_left .result-op:before, #content_left .result:before { content:""; position: absolute; bottom: 0; left: 0; right: 0; top:0; background: #45454594; height: 100%; z-index: -1; backdrop-filter: blur(60px); border-radius: 9px; } /* 结果中的文字 */ em { font-style: normal; color: #ff7e7e; } a:-webkit-any-link { color: #3ccac2; cursor: pointer; text-decoration: none; } /* #############*/ a:visited { color: #ff8000 !important; } #content_right, .cr-offset { width:0 !important; } .bdsug { background-image: initial; background-color: rgba(20, 20, 20, .43); border-top-color: rgba(189, 185, 177, 0); border-right-color: rgba(189, 185, 177, 0); border-bottom-color: rgba(189, 185, 177, 0); border-left-color: rgba(189, 185, 177, 0); box-shadow: rgba(213, 209, 203, 0) 1px 1px 3px; border-radius: 15px; } .bdsug .bdsug-feedback-wrap { background-image: initial; background-color: rgba(222, 219, 213, 0); color: rgb(108, 108, 108); } #form { background: #59595900 !important; } .bdsug li { background: #5959594a; width: 522px; color: #e5e5e5; font: 14px arial; line-height: 22px; padding: 0 8px; position: relative; cursor: default; backdrop-filter: blur(15px); } /* ##############################导航栏############################# */ #head { background: #5959594a; backdrop-filter: blur(15px); border-radius: 10px; margin: 0; padding: 0; } /* 删掉百度的logo */ #result_logo img { width: 0; } /* 搜索框加圆角 */ .s_ipt_wr.bg, .s_btn_wr.bg, #su.bg { border-radius: 20px; padding-left: 10px; border-color:#ffffff52; } /* 搜索框文字颜色 */ #kw { color: #fff; } /* 按图搜索的按钮 */ .soutu-btn { background: #54545400; color: #66d8ea; border: 2px solid; height: 10px; width: 10px; border-radius: 10px; } /* 百度一下按钮 */ #form { display: flex; height: 100%; } .s_btn { color: #3ccac2; } /* 百度一下按钮指针放上去 */ .s_btn.btnhover { background: #5e5e5e69; border: 3px solid #95959588; box-shadow: 0px 0px 0px #fff; } /* head bar右边的 百度首页, 设置啥的 */ #u { vertical-align: middle; } #u a { text-decoration: none; color: #3ccac2; margin: 0 7px 0 0; } .wrapper_s #u { margin: 20px 10px 0px 0px; } /* ##################################body ################################*/ /* 网页,资讯,视频...那个条 */ #s_tab { line-height: 36px; height: 45px; padding: 55px 0 0 121px; float: none; zoom: 1; background: #575757aa !important; backdrop-filter: blur(30px); } #s_tab a, #s_tab b { color: #e1e1e1; font-size: 10px; padding: 0; margin: 0; } #s_tab b { border-bottom: 2px solid #3ccac2; border-radius: 2px; } .s_tab_inner { padding-top:7px; } /* 为您找到多少结果 */ .nums { color: #ccc; } /* 搜索工具 */ .search_tool, .search_tool_conter span { cursor: pointer; color: #cacaca; } /* ######################底部########################### */ #page { background-color: #4141418a !important; backdrop-filter: blur(10px); margin:0 !important; } #rs { background-color:#00000000 !important; } #foot { margin: 20px; margin-bottom: 0; background: #4a4a4ac4 !important; backdrop-filter: blur(10px); border-radius: 10px; display: flex; justify-content: space-around; box-shadow: 5px 5px 6px #0000001f, -5px -5px 6px #fff3; } #foot #help { background-color:#00000000 !important; } /* 下面12345678页的按钮 */ /* 搜索结果日期颜色 */ .m, a.m { color: #b5b5b5; } /* ###################滚动条样式############################### */ ::-webkit-scrollbar { width: 15px; } /* 这是针对缺省样式 (必须的) */ ::-webkit-scrollbar-track { /* border-radius: 10px; */ background: #626262; } /* 滚动条的滑轨背景颜色 */ ::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(145deg, #7a7e80, #464646); box-shadow: 3px 3px 5px #12272c; } /* 滑块颜色 */ ::-webkit-scrollbar-button { /* height :0 */ } /* 滑轨两头的监听按钮颜色 */ ::-webkit-scrollbar-corner { background-color: #2D343B; } /* 横向滚动条和纵向滚动条相交处尖角的颜色 */ /* #wrapper{ background: #545454aa; backdrop-filter: blur(10px); } */ .c-showurl { color: rgb(126, 221, 109); } * { color: #ccc; } #header_top_bar { /* margin: 100px 100px 100px 100px; */ margin: 0px 0px 0px 0px; width: 100%; /* padding: 10px 100px 10px 10px; */ }