用html编写仿百度一下,模仿百度一下.html

*{

margin: 0;

padding: 0;

}

/*overflow-y: scroll;解决了页面不会因为滚动条而出现跳动，是通过百度得出的*/

/*模仿百度遇到的问题：

*1，更多产品，1)无法到达最右边，是因为没有和其他导航分开。

* 2)触碰会出现滚动条，影响页面的宽度

*2，百度一下，1)去掉边框边缘的外围outline

* 2)俩个input无缝连接，用绝对定位

* */

body,html{

width: 100%;

height: 100%;

overflow-y: scroll;

}

.entire{

width: 100%;

height: 100%;

}

.container{

width: 100%;

height: 100%;

}

.container .container_top{

position: relative;

}

.container .container_top ul{

position: absolute;

top: 5px;

right: 70px;

}

.container .container_top ul li{

float: left;

list-style: none;

margin-right: 25px;

}

.container .container_top ul>li>a{

color: #000000;

font-size: 15px;

font-weight: 400;

}

.container .container_top ul .list{

position: relative;

}

.container .container_top ul .list>ul{

width: 80px;

height: 126px;

display: none;

border: 1px solid #CCCCCC;

position: absolute;

top: 20px;

left: -25px;

text-align: center;

}

.container .container_top ul .list:hover>ul{

display: block;

}

.container .container_top ul .list>ul>li{

width: 80px;

height: 30px;

border: 1px solid white;

display: block;

line-height: 30px;

}

.container .container_top ul .list>ul>li:hover{

background-color: #008B8B;

}

.container .container_top ul .list>ul>li:hover>a{

color: white;

}

.container .container_top ul .list>ul>li>a{

text-decoration: none;

}

.container .container_top .poPout{

position: absolute;

top: 0px;

right: 0px;

}

.container .container_top .poPout>span{

display: block;

width: 70px;

height: 20px;

background-color: #0086B3;

color: white;

padding: 5px;

text-align: center;

}

.container .container_top .poPout>ul{

width: 80px;

height: 700px;

position: absolute;

top: 30px;

right: 0px;

background-color: #F0F0F0;

display: none;

opacity: 0.5;

text-align: center;

}

.container .container_top .poPout>ul>li{

width: 80px;

height: 70px;

display: block;

margin-top: 10px;

text-align: center;

border-top: 1px solid gainsboro;

}

.container .container_top .poPout>ul>li>img{

margin: auto;

display: block;

padding-top: 10px;

}

.container .container_top .poPout>ul>li>a{

font-size: 10px;

color: black;

}

.container .container_top .poPout:hover>span{

color: black;

background-color: #F0F0F0;

}

.container .container_top .poPout:hover>ul{

display: block;

}

.container .container_center{

position: relative;

}

.container .container_center .logs{

width: 685px;

position: absolute;

top: 120px;

left: 50%;

transform: translate(-50%,-50%);

text-align: center;

}

.container .container_center .logs>img{

width: 270px;

height: 120px;

}

.container .container_center .logs .search{

display: block;

width: 685px;

height: 42px;

position: relative;

}

.container .container_center .logs .search>input[type=text]{

width: 580px;

height: 40px;

padding-left: 5px;

border: 1px solid #D2D2D2;

border-right: none;

outline: none;

transition: all 0.5s;

position: absolute;

top: 0;

left: 0;

}

.container .container_center .logs .search>input[type=button]{

width: 105px;

height: 42px;

background-color: #0086B3;

color: white;

font-size: 15px;

outline: none;

border: none;

position: absolute;

top: 0;

right: 0;

}

.container .container_center .logs .search>input[type=text]:hover{

border: 1px solid #808080;

}

.container .container_center .logs .search>input[type=button]:hover{

background-color: #426DEC;

}

.container .container_center .logs .search>a{

display: block;

width: 18px;

height: 17px;

background-image: url(baiduimg/camera_new_5606e8f.png);

position: absolute;

top: 50%;

right: 113px;

transform: translateY(-50%);

}

.container .container_center .logs .search>a:hover{

background-position-y: -20px;

}

• 新闻
• hao123
• 地图
• 视频
• 贴吧
• 学术
• 登录
• 设置
  • 搜索设置
  • 高级搜索
  • 关闭预测
  • 搜索历史

更多产品

• 

  糯米

• 

  音乐

• 

  图片

• 

  知道

• 

  文库

• 

  风云榜

• 

  百度推广

• 全部产品>>

一键复制

编辑

Web IDE

原始数据

按行查看

历史