1.首先我们还是先来看一下这个黑科技实现的类似于百度搜索的页面的最终效果： http://www.52tech.tech/forum.php?mod=image&aid=656&size=300x300&key=6abe3f5f77f6bcfd&nocache=yes&type=fixnone 657 2.这个风格相信大家都不陌生吧，基本上布局什么的和百度的完全类似。具体的实现代码如下,当然大家也可以把代码改成自己想要的样子，具体的操作大家自己尝试： index.html 这个页面应该是实现过程中最麻烦的一个吧，用到了JQuery的几个库文件，大家直接引入即可：  搜索-我爱科技论坛-52.technology  #wimoban\_p, #wimoban\_p a { color: #fff; font-family: "微软雅黑"; } #wimoban\_p { text-align: center; font-size: 14px; clear: both; }

[提醒](http://www.52tech.tech/home.php?mod=space&do=notice) [消息](http://www.52tech.tech/home.php?mod=space&do=pm) [门户网站](http://www.52tech.tech/portal.php) [我自己](javascript:;)

[用户登录](http://www.52tech.tech/member.php?mod=logging&action=login) [用户注册](http://www.52tech.tech/member.php?mod=logging&action=login)

![logo](images/mylogo.png)

[VIP视频](http://www.52tech.tech/portal.php?mod=topic&topicid=1) [考研资料](http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE) [科学上网](http://www.52tech.tech/forum.php?mod=viewthread&tid=40&extra=) [WEBGL](http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl) [编程专区](http://www.52tech.tech/forum-41-1.html) [书籍资料](http://www.52tech.tech/forum-40-1.html) [黑科技](http://www.52tech.tech/forum-53-1.html) [更多>>](http://www.52tech.tech/thread-66-1-1.html)

 

[导航](javascript:;) [分享专区](javascript:;) [编程学习](http://www.52tech.tech/forum-41-1.html) [开源软件](http://www.52tech.tech/forum-51-1.html) [站点帮助](http://www.52tech.tech/forum-54-1.html)

[推荐导航](#)

热门话题

[![谷歌所有历史版本浏览器下载](images/101.png)](http://www.52tech.tech/forum.php?mod=viewthread&tid=510&highlight=%B9%C8%B8%E8%E4%AF%C0%C0%C6%F7 "谷歌所有历史版本浏览器下载") [![科学上网直达谷歌](images/102.png)](http://www.52tech.tech/forum.php?mod=viewthread&tid=458&highlight=%BF%C6%D1%A7%C9%CF%CD%F8 "科学上网直达谷歌") [![精品WEBGL视频教程](images/103.png)](http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl "精品WEBGL视频教程") [![OPENGL从入门到精通视频教程](images/104.png)](http://www.52tech.tech/forum.php?mod=viewthread&tid=460&highlight=webgl "OPENGL从入门到精通视频教程") [![VIP视频免费看策略](images/105.png)](http://www.52tech.tech/portal.php?mod=topic&topicid=1 "VIP视频免费看策略") [![JavaWeb全套视频教程](images/106.png)](http://www.52tech.tech/forum.php?mod=viewthread&tid=629&highlight=java "JavaWeb全套视频教程") [![Web前端视频教程](images/107.png)](http://www.52tech.tech/forum.php?mod=viewthread&tid=586&highlight=WEB%C7%B0%B6%CB "Web前端视频教程") [![2019全套考研视频教程](images/108.png)](http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE "2018/2019全套考研视频教程") [![黑科技软件经验分享](images/109.png)](http://www.52tech.tech/forum-53-1.html "黑科技软件经验分享") [![我爱学习编程专区](images/110.png)](http://www.52tech.tech/forum-41-1.html "我爱学习编程专区") [![时空隧道带你一起科学上网](images/111.png)](http://www.52tech.tech/forum.php?mod=viewthread&tid=458&highlight=%BF%C6%D1%A7%C9%CF%CD%F8 "时空隧道带你一起科学上网/VPN") [![论坛常见问题解答](images/112.png)](http://www.52tech.tech/thread-66-1-1.html "论坛常见问题解答")

 [![WEBGL视频教程](images/news1.jpg "目前全网最全面的WEBGL视频教程免费分享") 目前全网最全面的WEBGL视频教程免费分享！](http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl)[![目前最新最好用的科学上网新突破方法](images/news2.jpg "目前最新最好用的科学上网新突破方法") 目前最新最好用的科学上网新突破方法【VPN持续更新】 ](http://www.52tech.tech/forum.php?mod=viewthread&tid=458&highlight=%BF%C6%D1%A7%C9%CF%CD%F8)[![全国各高校的历年专业课考研真题复习资料大放送](images/news3.jpg "全国各高校的历年专业课考研真题复习资料大放送") 全国各高校的历年专业课考研真题复习资料大放送 ](http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE)[![OPENGL和WEBGL开发原生三维游戏引擎资料推荐](images/news4.jpg "OPENGL和WEBGL开发原生三维游戏引擎资料推荐") OPENGL和WEBGL开发原生三维游戏引擎资料推荐 ](http://www.52tech.tech/forum.php?mod=viewthread&tid=460&highlight=webgl)[![以后再也不用会员就可以看VIP会员视频了](images/news5.jpg "以后再也不用会员就可以免费看VIP会员视频了") 所有人的福利--以后再也不用会员就可以免费看VIP会员视频了](http://www.52tech.tech/portal.php?mod=topic&topicid=1)

![](images/news1.jpg) ![](images/news2.jpg) ![](images/news3.jpg) ![](images/news4.jpg) ![](images/news5.jpg)

[搜索风云榜](javascript:;) [热门话题](javascript:;) [查看更多](http://www.52tech.tech/thread-66-1-1.html)

*   [Discuz网站SEO优化](#)
*   [科学上网工具...](http://www.52tech.tech/forum.php?mod=viewthread&tid=458&highlight=%BF%C6%D1%A7%C9%CF%CD%F8)
*   [WEBGL视频教程](http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl)
*   [OPENGL三维引擎](http://www.52tech.tech/forum.php?mod=viewthread&tid=460&highlight=webgl)
*   [高校专业课资料...](http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE)
*   [MySQL数据库+Oracle](http://www.52tech.tech/forum.php?mod=viewthread&tid=564&highlight=mysql)
*   [HTML5最新基础到精通](http://www.52tech.tech/forum.php?mod=viewthread&tid=563&highlight=html)
*   [传智播客76期安卓视频](http://www.52tech.tech/forum.php?mod=viewthread&tid=21&highlight=%B0%B2%D7%BF)
*   [《2048游戏》开发实例](http://www.52tech.tech/forum.php?mod=viewthread&tid=424&highlight=2048)
*   [韩顺平XML教程](http://www.52tech.tech/forum.php?mod=viewthread&tid=6&highlight=xml)
*   [JoinMap4.0破解版软件](http://www.52tech.tech/forum.php?mod=viewthread&tid=590&highlight=JoinMap)
*   [origin8.0破解版软件](http://www.52tech.tech/forum.php?mod=viewthread&tid=59&highlight=origin)
*   [传智黑马训练营JAVA](http://www.52tech.tech/forum.php?mod=viewthread&tid=629&highlight=java)
*   [杨强主讲Linux环境高级...](http://www.52tech.tech/forum.php?mod=viewthread&tid=625&highlight=%D1%EE%C7%BF)
*   [VIP视频免费看](http://www.52tech.tech/portal.php?mod=topic&topicid=1)
*   [考研大礼包资料](http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE)

*   [二十七个WEBGL动态](http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl)
*   [破解版网易云音乐](http://www.52tech.tech/forum.php?mod=viewthread&tid=405&highlight=%CD%F8%D2%D7)
*   [酷狗音乐安卓版豪华VIP](http://www.52tech.tech/forum.php?mod=viewthread&tid=82&highlight=%BF%E1%B9%B7)
*   [VS2017旗舰离线下载百度](http://www.52tech.tech/forum.php?mod=viewthread&tid=56&highlight=vs)
*   [Vmvare12最新版及系列](http://www.52tech.tech/forum.php?mod=viewthread&tid=198&highlight=vmva)
*   [一周HOLD住HTML5+CSS](http://www.52tech.tech/forum.php?mod=viewthread&tid=563&highlight=html5)
*   [动力节点王勇SSM教程](http://www.52tech.tech/forum.php?mod=viewthread&tid=31&highlight=ssm)
*   [JAVAEE49期培训视频教程](http://www.52tech.tech/forum.php?mod=viewthread&tid=629&highlight=java)
*   [ThinkinginC++PDF](http://www.52tech.tech/forum.php?mod=viewthread&tid=607&highlight=thinking)
*   [百度云加速文件清理](http://www.52tech.tech/forum.php?mod=viewthread&tid=623&highlight=%B0%D9%B6%C8%D4%C6)
*   [万能密码查看器看密码](http://www.52tech.tech/forum.php?mod=viewthread&tid=616&highlight=%CD%F2%C4%DC%C3%DC%C2%EB)
*   [非电脑人士管理电脑神器](http://www.52tech.tech/forum.php?mod=viewthread&tid=570&highlight=%B7%C7%B5%E7%C4%D4)
*   [最新考研数学全网资料](http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE)
*   [优酷/爱奇艺/腾讯VIP视频](http://www.52tech.tech/portal.php?mod=topic&topicid=1)
*   [基于QT的开发实战](http://www.52tech.tech/forum.php?mod=viewthread&tid=23&highlight=qt)
*   [SpaceSniffer磁盘空间嗅探](http://www.52tech.tech/forum.php?mod=viewthread&tid=571&highlight=%B4%C5%C5%CC%BF%D5%BC%E4%D0%E1%CC%BD)

©科技论坛 站内搜索 使用前必读

$('.uname,.topMenus').hover(function () { $('.topMenus').stop(true, true).fadeIn(200); }, function () { $('.topMenus').stop(true, true).delay(500).fadeOut(200); }); //搜索框自动补全; $('.searchIpt').AutoComplete({ 'data': , 'itemHeight': 24, 'width': 529 }).AutoComplete('show'); $('.ctnerTab a').click(function () { if (!$(this).hasClass('on')) { $('.ctnerTab a').removeClass('on').eq($(this).index()).addClass('on'); $('.rtNavs').stop(true, true).hide(200).eq($(this).index()).show(300); } }); $('.menusWrapper a').click(function () { if (!$(this).hasClass('active')) { $('.menusWrapper a').removeClass('active').eq($(this).index()).addClass('active'); $('.cbox').stop(true, true).animate({top: 318}, 100).hide().eq($(this).index()).animate({top: 0}, 400).show(); } }); $('.smallPics a').click(function () { if (!$(this).hasClass('active')) { $('.smallPics a').removeClass('active').eq($(this).index()).addClass('active'); $('.picLink').stop(true, true).removeClass('active').eq($(this).index()).addClass('active'); } }); $('.titleT').hover(function () { if (!$(this).hasClass('on')) { $('.titleT').removeClass('on').eq($(this).index()).addClass('on'); $('.topicB').stop(true, true).hide().eq($(this).index()).show(); } });

我爱科技论坛：[（www.52tech.tech）](http://www.52tech.tech/portal.php "我爱科技论坛")

目前论坛包括考研资料、编程学习、黑科技/科学上网、开源软件等资源模块，竭力服务于正在学习道路上的每一个人。

我爱科技论坛，爱科技，更爱分享。致力于营造一个资源丰富、内容完善的大型网络学习交流资源共享平台！

common.css 这个样式也是极其重要的，页面做的好不好看，全靠这个样式表了： @CHARSET "UTF-8"; /\* \* @Description: common css \* @author: \* @Update: 2018-07-01 \*/ body { font: 12px/140% "Microsoft Yahei", "微软雅黑", 'Arial', 'san-serif'; background-color: #666666; color: #666; margin: 0; padding: 0; } img { max-width: 100%; height: auto; width: auto; -ms-interpolation-mode: bicubic; vertical-align: middle; -moz-animation: fadein 350ms ease-out; -webkit-animation: fadein 350ms ease-out; -o-animation: fadein 350ms ease-out; animation: fadein 350ms ease-out; } a, span, footer { color: #fff; } p { margin: 0; } ul { margin: 0; padding: 0; } li { list-style: none; } a:focus { outline: none; } /\* animation \*/ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /\* ----------------------------------------------- \*/ /\* 自定义样式 \*/ .fl { float: left; } .fr { float: right; } .oh { overflow: hidden; } .tc { text-align: center; } .tr { text-align: right; } .tl { text-align: left; } .dn { display: none; } .db { display: block; } .dib { display: inline-block; } .cp { cursor: pointer; } .f14 { font-size: 14px; } .pt15 { padding-top: 15px; } /\* ----------------------------------------------- \*/ .skinBg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -10; background-position: center 0; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } #header { padding: 14px 14px 0; overflow: hidden; } #header span { color: #fff; text-shadow: 0 0 3px #333; float: left; line-height: 20px; } .weatherIcon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 5px; } .wI1 { background: url('../images/a1.png'); } #header span.polutionLevel { color: #4CC74C; font-weight: 700; margin-left: 2px; } .sp { padding: 0 5px; } .headNavs { width: 800px; } .headNavs a { padding-right: 5px; text-decoration: none; display: inline-block; } .headNavs a:hover span { text-decoration: underline; } .topMenus { padding-top: 6px; position: absolute; right: 20px; top: 33px; width: 90px; z-index: 999; } .topMenus a { background-color: #FFFFFF; color: #0079F5; display: block; height: 25px; line-height: 25px; padding-left: 6px; text-align: center; text-decoration: none; } .topMenus a:hover { background-color: #f1f8ff; } .arrowTop { position: absolute; top: -5px; right: 20px; width: 0; height: 0; border-width: 6px; border-style: dashed dashed solid dashed; border-color: transparent transparent #ffffff transparent; } .s-icon { background: url('../images/spis4.png') no-repeat; cursor: pointer; width: 20px; height: 20px; display: inline-block; margin-right: 3px; } .s-icon-treasure { background-position: -12px -577px; } .s-icon-skin { background-position: -42px -577px; } .s-icon-msg { background-position: -228px -574px; } .s-icon-line { background-position: -104px -577px; width: 4px; } .user-arrow { background: url('../images/spis4.png') no-repeat -707px -588px; width: 10px; height: 10px; margin: 7px 0 0 4px; display: inline-block; } .content { padding: 0 0 30px; width: 910px; margin: -10px auto auto; } .mainNavs { margin: 30px auto; width: 620px; text-align: left; } .mainNavs a { font-size: 14px; margin-left: 12px; } .logo img { margin: 0 0 -15px; } .searchIpt { width: 515px; font-family: "微软雅黑"; border: 0 none; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); height: 20px; line-height: 20px; padding: 10px 9px 10px 7px; margin-right: 3px; } .btn { background: #DDDDDD; background: -moz-linear-gradient(top, #ffffff, #dddddd); background: -webkit-linear-gradient(top, #ffffff, #dddddd); background: linear-gradient(top, #ffffff, #dddddd); border: 0 none; font-size: 16px; font-family: "微软雅黑"; height: 40px; line-height: 40px; padding: 0; width: 105px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); } .mainContents { width: 910px; margin: 80px auto auto; } .menusWrapper { width: 80px; height: 318px; position: relative; background-color: rgba(0, 0, 0, 0.2); } .menusWrapper a { width: 80px; height: 35px; line-height: 35px; display: block; text-shadow: 0 0 5px #000000; text-decoration: none; font-size: 14px; } .menusWrapper a.active { background: url(../images/menuBg.png) no-repeat; } .menusWrapper a:hover { background-color: #000000; opacity: 0.8; filter: alpha(opacity=80); } .ctnerWrapper { margin-left: 100px; min-height: 318px; height: auto !important; height: 318px; background: linear-gradient(rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 100%) repeat; background: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 100%) repeat; background: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 100%) repeat; background: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 100%) repeat; } .ctnerTab { border-bottom: 1px solid #E8E8E8; height: 44px; line-height: 44px; } .ctnerTab a { text-decoration: none; font-size: 14px; color: #222; width: 86px; height: 44px; line-height: 44px; display: inline-block; } .ctnerTab a.on { border-bottom: 2px solid #42A0FE; font-weight: 700; } .ctnerBox { height: 258px; } .cbox { position: relative; top: 0; width: 811px; } #cbox-1 { display: block; } .hotNavs { width: 100%; display: block; } .navTitle { color: #999999; height: 81px; line-height: 16px; padding: 4px 7px 0 20px; text-align: left; width: 20px; } .navArea { margin-left: 50px; } .navArea a { width: 150px; height: 70px; float: left; display: inline-block; border: 2px solid rgba(248, 248, 248, 0.7); margin: 0 8px 12px 0; background: #f8f8f8; background: linear-gradient(rgba(248, 248, 248, 0.7) 0px, rgba(248, 248, 248, 0.7) 100%) repeat; background: -moz-linear-gradient(rgba(248, 248, 248, 0.7) 0px, rgba(248, 248, 248, 0.7) 100%) repeat; background: -webkit-linear-gradient(rgba(248, 248, 248, 0.7) 0px, rgba(248, 248, 248, 0.7) 100%) repeat; background: -o-linear-gradient(rgba(248, 248, 248, 0.7) 0px, rgba(248, 248, 248, 0.7) 100%) repeat; } .navArea a:hover { border: 2px solid #42A0FE; } .sliderBox { width: 425px; } .picLink { display: none; width: 425px; height: 260px; position: relative; } .picLink.active { display: block; } .picTitle { width: 100%; padding: 4px 0; height: 18px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px; text-indent: 14px; position: absolute; bottom: 0; left: 0; background-color: #000000; opacity: 0.4; filter: alpha(opacity=40); } .smallPics { background-color: #191919; padding: 8px 0 0 15px; height: 50px; overflow: hidden; position: relative; white-space: nowrap; } .smallPics a { width: 78px; cursor: pointer; transition: opacity 500ms ease 0s; -webkit-transition: opacity 500ms ease 0s; -moz-transition: opacity 500ms ease 0s; opacity: 0.5; filter: alpha(opacity=50); text-align: left; position: relative; display: inline-block; } .smallPics a:hover, .smallPics a.active { opacity: 1; filter: alpha(opacity=100); } .smallPics a.active img { border: 1px solid #389CFF; } .topic { margin-left: 445px; padding-top: 20px; } .topicTop { border-bottom: 1px solid #389CFF; height: 28px; line-height: 28px; position: relative; } .titleT { background-color: rgba(0, 0, 0, 0); color: #222; width: 100px; text-align: center; height: 28px; cursor: pointer; font-size: 14px; display: inline-block; } .titleT a { color: #222; } .titleT.on { background-color: #389CFF; } .titleT.on a { color: #fff; } .titleWords a, .titleTopic a { text-decoration: none; } .changeWords { color: #222; position: absolute; right: 22px; text-decoration: none; } .topicList { height: 240px; padding-top: 10px; width: 349px; } .topicList li { list-style: square inside; font-size: 6px; float: left; height: 30px; line-height: 30px; margin-right: 4px; text-overflow: ellipsis; white-space: nowrap; width: 170px; } .topicList li a { font-size: 14px; color: #222; text-decoration: none; } .topicList li a:hover { color: #389CFF; text-decoration: underline; } .wBox { display: block; } /\* autocomplete \*/ div.ac { border: 1px solid #ccc; position: absolute; display: none; overflow: auto; background-color: #ffffff; } div.ac > ul > li { word-break: break-all; } div.ac > ul > li > div { display: table-row; width: 100%; } div.ac > ul > li > div em { color: #333; font-style: normal; } div.ac > ul > li.normal { padding: 2px 0px 2px 5px; } div.ac > ul > li.normal > div > span, div.ac > ul > li.iconList > div > span { display: table-cell; vertical-align: middle; color: #333; } div.ac > ul > li.iconList { padding: 0px 0px 0px 2px; } div.ac > ul > li.iconList > div > div { display: table-cell; vertical-align: middle; padding-right: 5px; } div.ac > ul > li.iconList > div > div > img { display: table; display: table-cell \\9; } div.ac > ul > li.selected { background-color: #eeeeee; } 这个项目的测试已经在本站开放了，大家可以去测试查看， 测试地址：http://www.52tech.tech/res/52search/

使用前端黑科技技术搭建一个酷炫的百度搜索首页面，看看有多像？