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
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/
我爱科技论坛：（www.52tech.tech）
目前论坛包括考研资料、编程学习、黑科技/科学上网、开源软件等资源模块，竭力服务于正在学习道路上的每一个人。
我爱科技论坛，爱科技，更爱分享。致力于营造一个资源丰富、内容完善的大型网络学习交流资源共享平台！
评论
填写昵称与邮箱即可评论，无需登录。