请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站
开启辅助访问 切换到窄版

我爱科技论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

我爱科技论坛»论坛首页 › 『黑科技软件』 › 黑科技 › 使用前端黑科技技术搭建一个酷炫的百度搜索首页面，看看 ...
返回列表 发新帖
查看: 1409|回复: 0

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

[复制链接]
admin

696

主题

743

帖子

7864

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7864

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老
发表于 2018-7-1 14:53:04 | 显示全部楼层 |阅读模式
1.首先我们还是先来看一下这个黑科技实现的类似于百度搜索的页面的最终效果：


0.jpg


2.这个风格相信大家都不陌生吧，基本上布局什么的和百度的完全类似。具体的实现代码如下,当然大家也可以把代码改成自己想要的样子，具体的操作大家自己尝试：

index.html
这个页面应该是实现过程中最麻烦的一个吧，用到了JQuery的几个库文件，大家直接引入即可：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>搜索-我爱科技论坛-52.technology</title>
  7. <link rel="stylesheet" href="css/common.css"/>



  11. <style>#wimoban_p, #wimoban_p a {
  12. color: #fff;
  13. font-family: "微软雅黑";
  14. }

  16. #wimoban_p {
  17. text-align: center;
  18. font-size: 14px;
  19. clear: both;
  20. }
  21. </style>
  22. </head>
  23. <body oncontextmenu='return false' ondragstart='return false'>
  24. <div id="wrapper">
  25. <div class="skinBg" style="background-image: url('images/65.jpg');"></div>
  26. <header id="header">
  27. <nav class="headNavs fr tr">
  28. <a href="http://www.52tech.tech/home.php?mod=space&do=notice"><span class="s-icon s-icon-treasure"></span><span>提醒</span></a>
  29. <a href="http://www.52tech.tech/home.php?mod=space&do=pm"><span class="s-icon s-icon-msg"></span><span>消息</span></a>
  30. <a><span class="s-icon s-icon-line"></span></a>
  31. <a href="http://www.52tech.tech/portal.php"><span>门户网站</span></a>
  32. <a href="javascript:;" class="uname"><span>我自己</span><span class="user-arrow"></span></a>
  33. <div class="topMenus dn">
  34. <span class="arrowTop"></span>
  35. <a href="http://www.52tech.tech/member.php?mod=logging&action=login">用户登录</a>
  36. <a href="http://www.52tech.tech/member.php?mod=logging&action=login">用户注册</a>
  37. </div>
  38. </nav>
  39. </header>
  40. <div class="content tc">
  41. <p class="logo"><img width="270" height="129" src="images/mylogo.png" alt="logo"/></p>
  42. <nav class="mainNavs">
  43. <a href="http://www.52tech.tech/portal.php?mod=topic&topicid=1">VIP视频</a>
  44. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE">考研资料</a>
  45. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=40&extra=">科学上网</a>
  46. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl">WEBGL</a>
  47. <a href="http://www.52tech.tech/forum-41-1.html">编程专区</a>
  48. <a href="http://www.52tech.tech/forum-40-1.html">书籍资料</a>
  49. <a href="http://www.52tech.tech/forum-53-1.html">黑科技</a>
  50. <a href="http://www.52tech.tech/thread-66-1-1.html">更多>></a>
  51. </nav>
  52. <div class="searchBox">
  53. <form action="http://www.52tech.tech/search.php">
  54. <!--http://www.52tech.tech/search.ph ... =yes&kw=webgl-->
  55. <input type="text" class="searchIpt f14" name="mod=forum&searchid=2&orderby=lastpost&ascdesc=desc&searchsubmit=yes&kw" maxlength="100" autocomplete="off"/>
  56. <input type="submit" class="btn cp" value="快搜一下"/>
  57. </form>
  58. </div>
  59. <div class="mainContents oh">
  60. <div class="menusWrapper fl">
  61. <a class="active" href="javascript:;">导航</a>
  62. <a href="javascript:;">分享专区</a>
  63. <a href="http://www.52tech.tech/forum-41-1.html">编程学习</a>
  64. <a href="http://www.52tech.tech/forum-51-1.html">开源软件</a>
  65. <a href="http://www.52tech.tech/forum-54-1.html">站点帮助</a>
  66. </div>
  67. <div class="ctnerWrapper">
  68. <div class="ctnerBox">
  69. <div id="cbox-1" class="cbox tl dn">
  70. <div class="ctnerTab pr tc">
  71. <a href="#" class="on">推荐导航</a>
  72. </div>
  73. <div class="myNavs rtNavs dn pt15">
  74. </div>
  75. <div class="hotNavs rtNavs dn oh pt15">
  76. <div class="navTitle fl">热门话题</div>
  77. <div class="navArea oh">
  78. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=510&highlight=%B9%C8%B8%E8%E4%AF%C0%C0%C6%F7" target="_blank" title="谷歌所有历史版本浏览器下载"><img width="115" height="70"
  79. src="images/101.png" alt="谷歌所有历史版本浏览器下载"/></a>
  80. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=458&highlight=%BF%C6%D1%A7%C9%CF%CD%F8" target="_blank" title="科学上网直达谷歌"><img width="115" height="70"
  81. src="images/102.png" alt="科学上网直达谷歌"/></a>
  82. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl" target="_blank" title="精品WEBGL视频教程"><img width="115" height="70"
  83. src="images/103.png" alt="精品WEBGL视频教程"/></a>
  84. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=460&highlight=webgl" target="_blank" title="OPENGL从入门到精通视频教程"><img width="115" height="70"
  85. src="images/104.png" alt="OPENGL从入门到精通视频教程"/></a>
  86. <a href="http://www.52tech.tech/portal.php?mod=topic&topicid=1" target="_blank" title="VIP视频免费看策略"><img width="115" height="70" src="images/105.png"
  87. alt="VIP视频免费看策略"/></a>
  88. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=629&highlight=java" target="_blank" title="JavaWeb全套视频教程"><img width="115" height="70"
  89. src="images/106.png" alt="JavaWeb全套视频教程"/></a>
  90. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=586&highlight=WEB%C7%B0%B6%CB" target="_blank" title="Web前端视频教程"><img width="115" height="70"
  91. src="images/107.png" alt="Web前端视频教程"/></a>
  92. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE" target="_blank" title="2018/2019全套考研视频教程"><img width="115" height="70"
  93. src="images/108.png" alt="2019全套考研视频教程"/></a>
  94. <a href="http://www.52tech.tech/forum-53-1.html" target="_blank" title="黑科技软件经验分享"><img width="115" height="70"
  95. src="images/109.png" alt="黑科技软件经验分享"/></a>
  96. <a href="http://www.52tech.tech/forum-41-1.html" target="_blank" title="我爱学习编程专区"><img width="115" height="70"
  97. src="images/110.png" alt="我爱学习编程专区"/></a>
  98. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=458&highlight=%BF%C6%D1%A7%C9%CF%CD%F8" target="_blank" title="时空隧道带你一起科学上网/VPN"><img width="115" height="70"
  99. src="images/111.png" alt="时空隧道带你一起科学上网"/></a>
  100. <a href="http://www.52tech.tech/thread-66-1-1.html" target="_blank" title="论坛常见问题解答"><img width="115" height="70"
  101. src="images/112.png" alt="论坛常见问题解答"/></a>
  102. </div>
  103. </div>
  104. </div>
  105. <div id="cbox-2" class="cbox tl dn">
  106. <div class="newsBox oh">
  107. <div class="sliderBox fl">
  108. <div class="slider">
  109. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl" target="_blank" class="picLink active">
  110. <img width="425" height="260" src="images/news1.jpg" alt="WEBGL视频教程" title="目前全网最全面的WEBGL视频教程免费分享"/>
  111. <span href="http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl" target="_blank" class="picTitle">目前全网最全面的WEBGL视频教程免费分享！</span>
  112. </a>
  113. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=458&highlight=%BF%C6%D1%A7%C9%CF%CD%F8" target="_blank" class="picLink">
  114. <img width="425" height="260" src="images/news2.jpg" alt="目前最新最好用的科学上网新突破方法" title="目前最新最好用的科学上网新突破方法"/>
  115. <span href="http://www.52tech.tech/forum.php?mod=viewthread&tid=458&highlight=%BF%C6%D1%A7%C9%CF%CD%F8" target="_blank" class="picTitle">目前最新最好用的科学上网新突破方法【VPN持续更新】</span>
  116. </a>
  117. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE" target="_blank" class="picLink">
  118. <img width="425" height="260" src="images/news3.jpg" alt="全国各高校的历年专业课考研真题复习资料大放送" title="全国各高校的历年专业课考研真题复习资料大放送"/>
  119. <span href="http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE" target="_blank" class="picTitle">全国各高校的历年专业课考研真题复习资料大放送</span>
  120. </a>
  121. <a href="http://www.52tech.tech/forum.php?mod=viewthread&tid=460&highlight=webgl" target="_blank" class="picLink">
  122. <img width="425" height="260" src="images/news4.jpg" alt="OPENGL和WEBGL开发原生三维游戏引擎资料推荐" title="OPENGL和WEBGL开发原生三维游戏引擎资料推荐"/>
  123. <span href="http://www.52tech.tech/forum.php?mod=viewthread&tid=460&highlight=webgl" target="_blank" class="picTitle">OPENGL和WEBGL开发原生三维游戏引擎资料推荐 </span>
  124. </a>
  125. <a href="http://www.52tech.tech/portal.php?mod=topic&topicid=1" target="_blank" class="picLink">
  126. <img width="425" height="260" src="images/news5.jpg" alt="以后再也不用会员就可以看VIP会员视频了" title="以后再也不用会员就可以免费看VIP会员视频了"/>
  127. <span href="http://www.52tech.tech/portal.php?mod=topic&topicid=1" target="_blank" class="picTitle">所有人的福利--以后再也不用会员就可以免费看VIP会员视频了</span>
  128. </a>
  129. </div>
  130. <div class="smallPics">
  131. <a class="active"><img width="68" height="40" src="images/news1.jpg" alt=""/></a>
  132. <a><img width="68" height="40" src="images/news2.jpg" alt=""/></a>
  133. <a><img width="68" height="40" src="images/news3.jpg" alt=""/></a>
  134. <a><img width="68" height="40" src="images/news4.jpg" alt=""/></a>
  135. <a><img width="68" height="40" src="images/news5.jpg" alt=""/></a>
  136. </div>
  137. </div>
  138. <div class="topic">
  139. <div class="topicTop">
  140. <span class="titleWords titleT on"><a href="javascript:;">搜索风云榜</a></span>
  141. <span class="titleTopic titleT"><a href="javascript:;">热门话题</a></span>
  142. <a class="changeWords" href="http://www.52tech.tech/thread-66-1-1.html">查看更多</a>
  143. </div>
  144. <div class="topicList">
  145. <div class="wBox topicB dn">
  146. <ul>
  147. <li><a target="_blank" href="#">Discuz网站SEO优化</a></li>
  148. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=458&highlight=%BF%C6%D1%A7%C9%CF%CD%F8">科学上网工具...</a></li>
  149. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl">WEBGL视频教程</a></li>
  150. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=460&highlight=webgl">OPENGL三维引擎</a></li>
  151. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE">高校专业课资料...</a></li>
  152. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=564&highlight=mysql">MySQL数据库+Oracle</a></li>
  153. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=563&highlight=html">HTML5最新基础到精通</a></li>
  154. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=21&highlight=%B0%B2%D7%BF">传智播客76期安卓视频</a></li>
  155. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=424&highlight=2048">《2048游戏》开发实例</a></li>
  156. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=6&highlight=xml">韩顺平XML教程</a></li>
  157. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=590&highlight=JoinMap">JoinMap4.0破解版软件</a></li>
  158. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=59&highlight=origin">origin8.0破解版软件</a></li>
  159. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=629&highlight=java">传智黑马训练营JAVA</a></li>
  160. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=625&highlight=%D1%EE%C7%BF">杨强主讲Linux环境高级...</a></li>
  161. <li><a target="_blank" href="http://www.52tech.tech/portal.php?mod=topic&topicid=1">VIP视频免费看</a></li>
  162. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE">考研大礼包资料</a></li>
  163. </ul>
  164. </div>
  165. <div class="tBox topicB dn">
  166. <ul>
  167. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=39&highlight=webgl">二十七个WEBGL动态</a></li>
  168. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=405&highlight=%CD%F8%D2%D7">破解版网易云音乐</a></li>
  169. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=82&highlight=%BF%E1%B9%B7">酷狗音乐安卓版豪华VIP</a></li>
  170. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=56&highlight=vs">VS2017旗舰离线下载百度</a></li>
  171. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=198&highlight=vmva">Vmvare12最新版及系列</a></li>
  172. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=563&highlight=html5">一周HOLD住HTML5+CSS</a></li>
  173. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=31&highlight=ssm">动力节点王勇SSM教程</a></li>
  174. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=629&highlight=java">JAVAEE49期培训视频教程</a></li>
  175. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=607&highlight=thinking">ThinkinginC++PDF</a></li>
  176. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=623&highlight=%B0%D9%B6%C8%D4%C6">百度云加速文件清理</a></li>
  177. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=616&highlight=%CD%F2%C4%DC%C3%DC%C2%EB">万能密码查看器看密码</a></li>
  178. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=570&highlight=%B7%C7%B5%E7%C4%D4">非电脑人士管理电脑神器</a></li>
  179. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=2&highlight=%D7%A8%D2%B5%BF%CE">最新考研数学全网资料</a></li>
  180. <li><a target="_blank" href="http://www.52tech.tech/portal.php?mod=topic&topicid=1">优酷/爱奇艺/腾讯VIP视频</a></li>
  181. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=23&highlight=qt">基于QT的开发实战</a></li>
  182. <li><a target="_blank" href="http://www.52tech.tech/forum.php?mod=viewthread&tid=571&highlight=%B4%C5%C5%CC%BF%D5%BC%E4%D0%E1%CC%BD">SpaceSniffer磁盘空间嗅探</a></li>
  183. </ul>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. <footer id="footer" class="tc">&#169;科技论坛 站内搜索 使用前必读</footer>
  194. </div>
  195. <script src="http://www.52tech.tech/template/dean_report_151222/deancss/js/jquery-1.8.3.min.js"></script>
  196. <script src="http://www.52tech.tech/source/plugin/hl467_bdshare/js/jquery-1.11.1.min.js"></script>
  197. <script src="js/jquery.autocomplete.min.js"></script>
  198. <script>
  199. $('.uname,.topMenus').hover(function () {
  200. $('.topMenus').stop(true, true).fadeIn(200);
  201. }, function () {
  202. $('.topMenus').stop(true, true).delay(500).fadeOut(200);
  203. });

  205. //搜索框自动补全;
  206. $('.searchIpt').AutoComplete({
  207. 'data': ['About Me', '审美网', 'abcdefg', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'smwell.com', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
  208. 'itemHeight': 24,
  209. 'width': 529
  210. }).AutoComplete('show');

  212. $('.ctnerTab a').click(function () {
  213. if (!$(this).hasClass('on')) {
  214. $('.ctnerTab a').removeClass('on').eq($(this).index()).addClass('on');
  215. $('.rtNavs').stop(true, true).hide(200).eq($(this).index()).show(300);
  216. }
  217. });

  219. $('.menusWrapper a').click(function () {
  220. if (!$(this).hasClass('active')) {
  221. $('.menusWrapper a').removeClass('active').eq($(this).index()).addClass('active');
  222. $('.cbox').stop(true, true).animate({top: 318}, 100).hide().eq($(this).index()).animate({top: 0}, 400).show();
  223. }
  224. });

  226. $('.smallPics a').click(function () {
  227. if (!$(this).hasClass('active')) {
  228. $('.smallPics a').removeClass('active').eq($(this).index()).addClass('active');
  229. $('.picLink').stop(true, true).removeClass('active').eq($(this).index()).addClass('active');
  230. }
  231. });

  233. $('.titleT').hover(function () {
  234. if (!$(this).hasClass('on')) {
  235. $('.titleT').removeClass('on').eq($(this).index()).addClass('on');
  236. $('.topicB').stop(true, true).hide().eq($(this).index()).show();
  237. }
  238. });
  239. </script>

  241. <!-- 代码结束 -->
  242. <div id="wimoban_p">
  243. <p>我爱科技论坛：<a href="http://www.52tech.tech/portal.php" title="我爱科技论坛" alt="我爱科技论坛">（www.52tech.tech）</a></p>
  244. <p>目前论坛包括考研资料、编程学习、黑科技/科学上网、开源软件等资源模块，竭力服务于正在学习道路上的每一个人。</p>
  245. <p> 我爱科技论坛，爱科技，更爱分享。致力于营造一个资源丰富、内容完善的大型网络学习交流资源共享平台！</p>
  246. <p></p>
  247. </div>
  248. </body>
  249. </html>
复制代码




common.css
这个样式也是极其重要的，页面做的好不好看，全靠这个样式表了：
  1. @CHARSET "UTF-8";
  2. /*
  3. * @Description: common css
  4. * @author:
  5. * @Update: 2018-07-01
  6. */
  7. body {
  8. font: 12px/140% "Microsoft Yahei", "微软雅黑", 'Arial', 'san-serif';
  9. background-color: #666666;
  10. color: #666;
  11. margin: 0;
  12. padding: 0;
  13. }

  15. img {
  16. max-width: 100%;
  17. height: auto;
  18. width: auto;
  19. -ms-interpolation-mode: bicubic;
  20. vertical-align: middle;
  21. -moz-animation: fadein 350ms ease-out;
  22. -webkit-animation: fadein 350ms ease-out;
  23. -o-animation: fadein 350ms ease-out;
  24. animation: fadein 350ms ease-out;
  25. }

  27. a, span, footer {
  28. color: #fff;
  29. }

  31. p {
  32. margin: 0;
  33. }

  35. ul {
  36. margin: 0;
  37. padding: 0;
  38. }

  40. li {
  41. list-style: none;
  42. }

  44. a:focus {
  45. outline: none;
  46. }

  48. /* animation */
  49. @-webkit-keyframes fadein {
  50. from {
  51. opacity: 0;
  52. }
  53. to {
  54. opacity: 1;
  55. }
  56. }

  58. @-moz-keyframes fadein {
  59. from {
  60. opacity: 0;
  61. }
  62. to {
  63. opacity: 1;
  64. }
  65. }

  67. @-o-keyframes fadein {
  68. from {
  69. opacity: 0;
  70. }
  71. to {
  72. opacity: 1;
  73. }
  74. }

  76. @keyframes fadein {
  77. from {
  78. opacity: 0;
  79. }
  80. to {
  81. opacity: 1;
  82. }
  83. }

  85. /* ----------------------------------------------- */

  87. /* 自定义样式 */
  88. .fl {
  89. float: left;
  90. }

  92. .fr {
  93. float: right;
  94. }

  96. .oh {
  97. overflow: hidden;
  98. }

  100. .tc {
  101. text-align: center;
  102. }

  104. .tr {
  105. text-align: right;
  106. }

  108. .tl {
  109. text-align: left;
  110. }

  112. .dn {
  113. display: none;
  114. }

  116. .db {
  117. display: block;
  118. }

  120. .dib {
  121. display: inline-block;
  122. }

  124. .cp {
  125. cursor: pointer;
  126. }

  128. .f14 {
  129. font-size: 14px;
  130. }

  132. .pt15 {
  133. padding-top: 15px;
  134. }

  136. /* ----------------------------------------------- */

  138. .skinBg {
  139. width: 100%;
  140. height: 100%;
  141. position: absolute;
  142. left: 0;
  143. top: 0;
  144. z-index: -10;
  145. background-position: center 0;
  146. background-size: cover;
  147. background-attachment: fixed;
  148. background-repeat: no-repeat;
  149. }

  151. #header {
  152. padding: 14px 14px 0;
  153. overflow: hidden;
  154. }

  156. #header span {
  157. color: #fff;
  158. text-shadow: 0 0 3px #333;
  159. float: left;
  160. line-height: 20px;
  161. }

  163. .weatherIcon {
  164. width: 18px;
  165. height: 18px;
  166. display: inline-block;
  167. vertical-align: middle;
  168. margin-right: 5px;
  169. }

  171. .wI1 {
  172. background: url('../images/a1.png');
  173. }

  175. #header span.polutionLevel {
  176. color: #4CC74C;
  177. font-weight: 700;
  178. margin-left: 2px;
  179. }

  181. .sp {
  182. padding: 0 5px;
  183. }

  185. .headNavs {
  186. width: 800px;
  187. }

  189. .headNavs a {
  190. padding-right: 5px;
  191. text-decoration: none;
  192. display: inline-block;
  193. }

  195. .headNavs a:hover span {
  196. text-decoration: underline;
  197. }

  199. .topMenus {
  200. padding-top: 6px;
  201. position: absolute;
  202. right: 20px;
  203. top: 33px;
  204. width: 90px;
  205. z-index: 999;
  206. }

  208. .topMenus a {
  209. background-color: #FFFFFF;
  210. color: #0079F5;
  211. display: block;
  212. height: 25px;
  213. line-height: 25px;
  214. padding-left: 6px;
  215. text-align: center;
  216. text-decoration: none;
  217. }

  219. .topMenus a:hover {
  220. background-color: #f1f8ff;
  221. }

  223. .arrowTop {
  224. position: absolute;
  225. top: -5px;
  226. right: 20px;
  227. width: 0;
  228. height: 0;
  229. border-width: 6px;
  230. border-style: dashed dashed solid dashed;
  231. border-color: transparent transparent #ffffff transparent;
  232. }

  234. .s-icon {
  235. background: url('../images/spis4.png') no-repeat;
  236. cursor: pointer;
  237. width: 20px;
  238. height: 20px;
  239. display: inline-block;
  240. margin-right: 3px;
  241. }

  243. .s-icon-treasure {
  244. background-position: -12px -577px;
  245. }

  247. .s-icon-skin {
  248. background-position: -42px -577px;
  249. }

  251. .s-icon-msg {
  252. background-position: -228px -574px;
  253. }

  255. .s-icon-line {
  256. background-position: -104px -577px;
  257. width: 4px;
  258. }

  260. .user-arrow {
  261. background: url('../images/spis4.png') no-repeat -707px -588px;
  262. width: 10px;
  263. height: 10px;
  264. margin: 7px 0 0 4px;
  265. display: inline-block;
  266. }

  268. .content {
  269. padding: 0 0 30px;
  270. width: 910px;
  271. margin: -10px auto auto;
  272. }

  274. .mainNavs {
  275. margin: 30px auto;
  276. width: 620px;
  277. text-align: left;
  278. }

  280. .mainNavs a {
  281. font-size: 14px;
  282. margin-left: 12px;
  283. }

  285. .logo img {
  286. margin: 0 0 -15px;
  287. }

  289. .searchIpt {
  290. width: 515px;
  291. font-family: "微软雅黑";
  292. border: 0 none;
  293. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  294. -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  295. height: 20px;
  296. line-height: 20px;
  297. padding: 10px 9px 10px 7px;
  298. margin-right: 3px;
  299. }

  301. .btn {
  302. background: #DDDDDD;
  303. background: -moz-linear-gradient(top, #ffffff, #dddddd);
  304. background: -webkit-linear-gradient(top, #ffffff, #dddddd);
  305. background: linear-gradient(top, #ffffff, #dddddd);
  306. border: 0 none;
  307. font-size: 16px;
  308. font-family: "微软雅黑";
  309. height: 40px;
  310. line-height: 40px;
  311. padding: 0;
  312. width: 105px;
  313. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
  314. -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
  315. }

  317. .mainContents {
  318. width: 910px;
  319. margin: 80px auto auto;
  320. }

  322. .menusWrapper {
  323. width: 80px;
  324. height: 318px;
  325. position: relative;
  326. background-color: rgba(0, 0, 0, 0.2);
  327. }

  329. .menusWrapper a {
  330. width: 80px;
  331. height: 35px;
  332. line-height: 35px;
  333. display: block;
  334. text-shadow: 0 0 5px #000000;
  335. text-decoration: none;
  336. font-size: 14px;
  337. }

  339. .menusWrapper a.active {
  340. background: url(../images/menuBg.png) no-repeat;
  341. }

  343. .menusWrapper a:hover {
  344. background-color: #000000;
  345. opacity: 0.8;
  346. filter: alpha(opacity=80);
  347. }

  349. .ctnerWrapper {
  350. margin-left: 100px;
  351. min-height: 318px;
  352. height: auto !important;
  353. height: 318px;
  354. background: linear-gradient(rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 100%) repeat;
  355. background: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 100%) repeat;
  356. background: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 100%) repeat;
  357. background: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 100%) repeat;
  358. }

  360. .ctnerTab {
  361. border-bottom: 1px solid #E8E8E8;
  362. height: 44px;
  363. line-height: 44px;
  364. }

  366. .ctnerTab a {
  367. text-decoration: none;
  368. font-size: 14px;
  369. color: #222;
  370. width: 86px;
  371. height: 44px;
  372. line-height: 44px;
  373. display: inline-block;
  374. }

  376. .ctnerTab a.on {
  377. border-bottom: 2px solid #42A0FE;
  378. font-weight: 700;
  379. }

  381. .ctnerBox {
  382. height: 258px;
  383. }

  385. .cbox {
  386. position: relative;
  387. top: 0;
  388. width: 811px;
  389. }

  391. #cbox-1 {
  392. display: block;
  393. }

  395. .hotNavs {
  396. width: 100%;
  397. display: block;
  398. }

  400. .navTitle {
  401. color: #999999;
  402. height: 81px;
  403. line-height: 16px;
  404. padding: 4px 7px 0 20px;
  405. text-align: left;
  406. width: 20px;
  407. }

  409. .navArea {
  410. margin-left: 50px;
  411. }

  413. .navArea a {
  414. width: 150px;
  415. height: 70px;
  416. float: left;
  417. display: inline-block;
  418. border: 2px solid rgba(248, 248, 248, 0.7);
  419. margin: 0 8px 12px 0;
  420. background: #f8f8f8;
  421. background: linear-gradient(rgba(248, 248, 248, 0.7) 0px, rgba(248, 248, 248, 0.7) 100%) repeat;
  422. background: -moz-linear-gradient(rgba(248, 248, 248, 0.7) 0px, rgba(248, 248, 248, 0.7) 100%) repeat;
  423. background: -webkit-linear-gradient(rgba(248, 248, 248, 0.7) 0px, rgba(248, 248, 248, 0.7) 100%) repeat;
  424. background: -o-linear-gradient(rgba(248, 248, 248, 0.7) 0px, rgba(248, 248, 248, 0.7) 100%) repeat;
  425. }

  427. .navArea a:hover {
  428. border: 2px solid #42A0FE;
  429. }

  431. .sliderBox {
  432. width: 425px;
  433. }

  435. .picLink {
  436. display: none;
  437. width: 425px;
  438. height: 260px;
  439. position: relative;
  440. }

  442. .picLink.active {
  443. display: block;
  444. }

  446. .picTitle {
  447. width: 100%;
  448. padding: 4px 0;
  449. height: 18px;
  450. line-height: 18px;
  451. white-space: nowrap;
  452. text-overflow: ellipsis;
  453. overflow: hidden;
  454. font-size: 14px;
  455. text-indent: 14px;
  456. position: absolute;
  457. bottom: 0;
  458. left: 0;
  459. background-color: #000000;
  460. opacity: 0.4;
  461. filter: alpha(opacity=40);
  462. }

  464. .smallPics {
  465. background-color: #191919;
  466. padding: 8px 0 0 15px;
  467. height: 50px;
  468. overflow: hidden;
  469. position: relative;
  470. white-space: nowrap;
  471. }

  473. .smallPics a {
  474. width: 78px;
  475. cursor: pointer;
  476. transition: opacity 500ms ease 0s;
  477. -webkit-transition: opacity 500ms ease 0s;
  478. -moz-transition: opacity 500ms ease 0s;
  479. opacity: 0.5;
  480. filter: alpha(opacity=50);
  481. text-align: left;
  482. position: relative;
  483. display: inline-block;
  484. }

  486. .smallPics a:hover, .smallPics a.active {
  487. opacity: 1;
  488. filter: alpha(opacity=100);
  489. }

  491. .smallPics a.active img {
  492. border: 1px solid #389CFF;
  493. }

  495. .topic {
  496. margin-left: 445px;
  497. padding-top: 20px;
  498. }

  500. .topicTop {
  501. border-bottom: 1px solid #389CFF;
  502. height: 28px;
  503. line-height: 28px;
  504. position: relative;
  505. }

  507. .titleT {
  508. background-color: rgba(0, 0, 0, 0);
  509. color: #222;
  510. width: 100px;
  511. text-align: center;
  512. height: 28px;
  513. cursor: pointer;
  514. font-size: 14px;
  515. display: inline-block;
  516. }

  518. .titleT a {
  519. color: #222;
  520. }

  522. .titleT.on {
  523. background-color: #389CFF;
  524. }

  526. .titleT.on a {
  527. color: #fff;
  528. }

  530. .titleWords a, .titleTopic a {
  531. text-decoration: none;
  532. }

  534. .changeWords {
  535. color: #222;
  536. position: absolute;
  537. right: 22px;
  538. text-decoration: none;
  539. }

  541. .topicList {
  542. height: 240px;
  543. padding-top: 10px;
  544. width: 349px;
  545. }

  547. .topicList li {
  548. list-style: square inside;
  549. font-size: 6px;
  550. float: left;
  551. height: 30px;
  552. line-height: 30px;
  553. margin-right: 4px;
  554. text-overflow: ellipsis;
  555. white-space: nowrap;
  556. width: 170px;
  557. }

  559. .topicList li a {
  560. font-size: 14px;
  561. color: #222;
  562. text-decoration: none;
  563. }

  565. .topicList li a:hover {
  566. color: #389CFF;
  567. text-decoration: underline;
  568. }

  570. .wBox {
  571. display: block;
  572. }

  574. /* autocomplete */
  575. div.ac {
  576. border: 1px solid #ccc;
  577. position: absolute;
  578. display: none;
  579. overflow: auto;
  580. background-color: #ffffff;
  581. }

  583. div.ac > ul > li {
  584. word-break: break-all;
  585. }

  587. div.ac > ul > li > div {
  588. display: table-row;
  589. width: 100%;
  590. }

  592. div.ac > ul > li > div em {
  593. color: #333;
  594. font-style: normal;
  595. }

  597. div.ac > ul > li.normal {
  598. padding: 2px 0px 2px 5px;
  599. }

  601. div.ac > ul > li.normal > div > span, div.ac > ul > li.iconList > div > span {
  602. display: table-cell;
  603. vertical-align: middle;
  604. color: #333;
  605. }

  607. div.ac > ul > li.iconList {
  608. padding: 0px 0px 0px 2px;
  609. }

  611. div.ac > ul > li.iconList > div > div {
  612. display: table-cell;
  613. vertical-align: middle;
  614. padding-right: 5px;
  615. }

  617. div.ac > ul > li.iconList > div > div > img {
  618. display: table;
  619. display: table-cell \9;
  620. }

  622. div.ac > ul > li.selected {
  623. background-color: #eeeeee;
  624. }
复制代码




这个项目的测试已经在本站开放了，大家可以去测试查看，
测试地址：http://www.52tech.tech/res/52search/

黑科技, 开源代码




上一篇：2018年传智播客黑马训练营JAVAEE49期培训视频教程百度云盘分享下载
下一篇：最新传智Hadoop大数据分析与挖掘视频教程百度云盘下载

相关帖子

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案； 如果你在论坛求助问题，并且已经从坛友或者管理的回复中解决了问题，请把帖子分类或者标题加上【已解决】。
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

微信扫一扫

快速回复 返回顶部 返回列表