<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width: 1400px;
background-color: pink;
}
.container > div {
float: left;
}
.container1 {
width: 1400px;
background-color: pink;
}
.container1 > div {
float: left;
height: 36px;
}
.left-box {
width: 125px;
height: 38px;
}
.left-box1 {
width: 540px;
height: 36px;
background-color: white;
border: 1px solid #3385ff;
}
.right-box {
width: 100px;
height: 38px;
background-color: #3388FF;
color: white;
text-align: center;
line-height: 38px;
}
input {
outline: none;
border: 0;
height: 34px;
width: 500px;
margin-left: 5px;
}
#left-box2 {
width: 1400px;
height: 36px;
background-color: #f8f8f8;
margin-top: 10px;
padding-left: 125px;
line-height: 36px;;
}
#left-box2 > a {
text-decoration: none;
color: #666;
}
#left-box3 {
width: 1400px;
height: 1000px;
background-color: white;
padding-left: 125px;
}
.container3 {
width: 1400px;
height: 100%;
padding-top: 80px;
}
#left-box3-1 {
width: 713px;
height: 100%;
background-color: white;
float: left;
}
#left-box3-2 {
width: 538px;
height: 36px;
background-color: white;
}
#left-box3-2 > a {
text-decoration: none;
color: #666;
}
#left-box3-3 {
width: 661px;
height: 24px;
background-color: white;
margin-top: 10px;
}
#left-box3-4 {
width: 661px;
height: 75px;
background-color: white;
margin-top: 10px;
}
#left-box3-5 {
width: 661px;
height: 24px;
background-color: white;
margin-top: 10px;
}
#left-box3-6 {
width: 661px;
height: 121px;
background-color: white;
margin-top: 10px;
}
#left-box3-7 {
width: 661px;
height: 24px;
float: left;
background-color: white;
margin-top: 10px;
}
#left-box3-8 {
width: 661px;
height: 140px;
background-color: white;
margin-top: 10px;
}
#right-box1 {
width: 2px;
height: 50%;
background-color: #cccccc;
float: left;
margin-top: 32px;
}
.bg {
display: block;
position:absolute;
top:11px;
right:20px;
background:url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/img/camera_new_679c15cc.png");
width:18px;
height:16px;
cursor:pointer;
}
#right-box2 {
width: 400px;
height: 100%;
background-color: white;
float: left;
margin-top: 36px;
}
#right-box2-1 {
width: 400px;
height: 36px;
background-color: white;
padding-left: 10px;
}
#right-box3-1 {
width: 400px;
height: 140px;
background-color: white;
padding-left: 10px;
float: left;
}
#right-box3-1-1 {
width: 90px;
height: 140px;
background-color: white;
padding-left: 10px;
float: left;
}
#right-box3-1-2 {
width: 90px;
height: 140px;
background-color: white;
padding-left: 10px;
float: left;
}
#right-box3-1-3 {
width: 90px;
height: 140px;
background-color: white;
padding-left: 10px;
float: left;
}
#right-box3-1-4 {
width: 90px;
height: 140px;
background-color: white;
padding-left: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="left-box" style="position:relative;">
<img src="//www.baidu.com/img/baidu_jgylogo3.gif" alt="" style="position: absolute">
</div>
<div class="left-box1" style="position:relative;">
<input type="text">
<i class="bg"></i>
</div>
<div class="right-box">
百度一下
</div>
<div style="float: right;font-size: 10px ;line-height: 36px">
<a href="" style="color: #3388FF">百度首页</a>
<a href="" style="color: #3388FF">设置</a>
<a href="" style="color: #3388FF">登陆</a>
</div>
</div>
<div class="container1">
<div id="left-box2">
<a href="">网页</a>
<a href="">咨询</a>
<a href="">视频</a>
<a href="">图片</a>
<a href="">知道</a>
<a href="">文库</a>
<a href="">贴吧</a>
<a href="">采购</a>
<a href="">地图</a>
<a href="">更多></a>
</div>
</div>
<div class="container3">
<div id="left-box3">
<div id="left-box3-1">
<div id="left-box3-2" style="font-size: 8px ;line-height: 36px ;color: #999"><h2>百度为您找到相关结果约100,000,000个 <a
href="" style="float: right;">搜索工具</a></h2>
</div>
<div id="left-box3-3">
<a href="">百度一下,你就知道</a>
</div>
<div id="left-box3-4">
<div style="float: left"><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" alt=""></div>
<div style="font-size: 16px;padding-left: 150px">
全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。百度超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。
<a href="">https://www.baidu.com/</a><a href=""style="font-size: 10px ;padding-left: 200px;color: #666666">
百度快照 - 7616条评价</a></div>
</div>
<div id="left-box3-5">
<a href="" style="float: left">百度-百度百科</a>
</div>
<div id="left-box3-6">
<div style="float: left"><img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2374368971,2673236697&fm=58&bpow=894&bpoh=600" alt=""></div>
<div style="font-size: 16px;padding-left: 150px">
百度(纳斯达克:BIDU),全球最大的中文搜索引擎、最大的中文网站。百度愿景是:成为最懂用户,并能帮助人们成长的全球顶级高科技公司。“百度”二字,来自于八百年前南宋词人...
</div>
<a href="" style="padding-left: 30px; font-size: 13px">发展简史 公司理念 财报数据 产品手册 多语言化 更多>></a>
<br><a href="" style="padding-left: 30px">baike.baidu.com/ </a>
</div>
<div id="left-box3-7">
<a href="">百度地图</a>
</div>
<div id="left-box3-8">
<div style="float: left"><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=248004630,3735300586&fm=58&s=B6D0E8329690B58AFCB89DE60300A0B1&bpow=121&bpoh=75" alt=""></div>
<div style="font-size: 16px;padding-left: 150px;margin-right: 120px">
浏览地图、搜索地点、查询公交驾车线路、查看实时路况,您的出行指南、生活助手。提供地铁线路图浏览,乘车方案查询,以及准确的票价和时间信息。
</div>
<a href="" style="padding-left: 30px">https://map.baidu.com/</a><a href=""style="font-size: 10px ;padding-left: 220px;color: #666666">
百度快照 - 3417条评价</a></div>
</div>
<div id="right-box1">
</div>
<div id="right-box2">
<div id="right-box2-1">百度高管 <a href="" style="float: right">展开</a></div>
<div id="right-box3-1">
<div id="right-box3-1-1"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2274909088,1858101302&fm=58&bpow=800&bpoh=933" alt=""><a href=""
style="padding-left: 20px ; font-size: 15px">李彦宏</a>
<p style="font-size: 13px;color: #cccccc">百度创始人董 事长CEO</p></div>
<div id="right-box3-1-2"><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=103270980,2021432810&fm=58&bpow=550&bpoh=595" alt=""><a href=""
style="padding-left: 20px ; font-size: 15px">The Cong</a>
<p style="font-size: 13px;color: #cccccc">百度集团首席 财务官</p></div>
<div id="right-box3-1-3"><img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=354071159,237140406&fm=179&app=42&f=JPEG?w=121&h=140" alt=""><a href=""
style="padding-left: 20px ; font-size: 15px">PDD</a>
<p style="font-size: 13px;color: #cccccc"> 百度总裁</p></div>
<div id="right-box3-1-4"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3545454556,120284015&fm=58&bpow=600&bpoh=900" alt=""><a href=""
style="padding-left: 20px ; font-size: 15px">简自豪</a>
<p style="font-size: 13px;color: #cccccc">百度集团首席 技术官</p></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
百度一下搜索成功界面
最新推荐文章于 2021-06-21 23:06:21 发布