<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width: 1400px;
background-color: pink;
}
.container > div {
float: left;
height: 36px;
}
.container1 {
width: 1400px;
background-color: pink;
}
.container1 > div {
float: left;
height: 36px;
}
.left-box {
width: 125px;
height: 34px;
}
.left-box1 {
width: 540px;
height: 34px;
background-color: white;
border: 1px solid #3385ff;
}
.right-box {
width: 100px;
height: 36px;
background-color: blue;
color: white;
text-align: center;
line-height: 36px;
}
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: 36px;
}
#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="CAMERA.jpg" alt="" style="position: absolute">
</div>
<div class="left-box1" style="position:relative;">
<input type="text">
<img src="CAMERA.png" alt="" style="position:absolute; width: 30px; height: 34px">
</div>
<div class="right-box">
百度一下
</div>
<div style="float: right;font-size: 10px ;line-height: 36px">
<a href="" style="color: black">百度首页</a>
<a href="" style="color: black">设置</a>
<a href="" style="color: black">登陆</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="logo.png" 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="baiduyixia.png" 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="baiduditu.jpg" 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="1.png" 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="2.png" alt=""><a href="" style="padding-left: 20px ; font-size: 15px">刘 谋</a><p style="font-size: 13px;color: #cccccc">百度集团首席 财务官</p></div>
<div id="right-box3-1-3"><img src="3.png" alt=""><a href="" style="padding-left: 20px ; font-size: 15px">五五开</a><p style="font-size: 13px;color: #cccccc"> 百度总裁</p></div>
<div id="right-box3-1-4"><img src="4.png" 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>
day04 百度一下,你就知道
最新推荐文章于 2022-05-02 22:39:59 发布