<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.logo {
width: 117px;
float: left;
margin-right: 10px;
}
.container {
margin-top: 4px;
width: 640px;
float: left;
}
.pic {
position: absolute;
right: 0px;
top:0px;
margin-top:5px;
width: 24px;
height: 21px;
}
.container > div {
float: left;
}
.left-box {
width: 538px;
height: 34px;
border: 1px solid grey;
position: relative;
}
.right-box {
height: 36px;
width: 100px;
background-color: cornflowerblue;
text-align: center;
line-height: 36px;
color: #fff;
}
input {
outline: none;
border: 0;
height: 32px;
width: 500px;
margin-left: 5px;
}
.top {
background-color: #f8f8f8;
width: 2000px;
height: 37px;
}
.top-text {
margin: 0px auto;
width: 540px;
height: 42px;
float: left;
font-size: 12px;
line-height: 42px;
position: relative;
}
.content-right {
width: 500px;
height: 960px;
float: left;
padding: 0px 0px 0px 17px;
border-left: 1px solid #b8b8b8;
}
</style>
</head>
<body>
<div style=" width: 1349px;height: 55px;">
<div class="logo">
<img src="img/baidu_jgylogo3.gif" height="38" width="117"/>
</div>
<div class="container">
<div class="left-box">
<input type="text">
<img src="img/1567932548(1).jpg" class="pic">
</div>
<div class="right-box">
百度一下
</div>
</div>
<div style="float: right;line-height:55px;font-size: 13px">
<a href="">百度首页</a>
<a href="">设置</a>
<a href="">登录</a>
</div>
</div>
<div class="top">
<div style="width:117px;height: 37px;float: left"></div>
<div style="line-height: 33px;font-size: 15px">
<a href="" style="text-decoration: none;"><b>网页</b></a>
<a href="" style="text-decoration: none;">资讯</a>
<a href="" style="text-decoration: none;">视频</a>
<a href="" style="text-decoration: none;">图片</a>
<a href="" style="text-decoration: none;">知道</a>
<a href="" style="text-decoration: none;">文库</a>
<a href="" style="text-decoration: none;">贴吧</a>
<a href="" style="text-decoration: none;">采购</a>
<a href="" style="text-decoration: none;">地图</a>
<a href="" style="text-decoration: none;">更多»</a>
</div>
</div>
<div style=" width: 650px;height: 42px;margin-left: 15px;">
<div style="width:110px;height: 42px;float: left"></div>
<div class="top-text" style="color: #999999">
百度为您找到相关结果约100,000,000个
<span style="position: absolute;right: 0px;top: 0px;color: #666666">搜索工具</span>
</div>
</div>
<div style=" height: 1500px;width: 648px;float: left;margin-left: 123px">
<!-- 1-->
<div style="width: 177px;height: 17px;">
<div style="width: 137px;height: 17px;float: left">
<a href="" style="color: #CC0000;">百度</a>
<a href="" style="color: #0000cc">一下,你就知道</a>
</div>
<div style="width: 33px;height: 15px;background-color: #3385ff;color:white;float: left;
font-size: 5px;line-height: 15px;margin-left:5px;margin-top: 4px;text-align: center">官网
</div>
</div>
<div style="height: 75px;width: 538px;margin-top: 10px">
<div style="width: 141px;height: 75px;float: left;">
<img src="img/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75.jpg"style="width: 121px;height: 75px;"/>
</div>
<div style="width: 397px;height: 75px;float: left; font-size: 13px">
全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。<span style="color: #CC0000">百度</span>超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。<br>
<a href="" style="color: green;text-decoration: none ;font-size: 13px">https://www.baidu.com/</a> -
<a href=""style="font-size: 13px">百度快照</a> - <a href="" style="font-size: 13px">7616条评价</a>
</div>
</div>
<!-- 2 -->
<div style="width: 177px;height: 17px;margin-top: 20px">
<div style="width: 137px;height: 17px;float: left">
<a href="" style="color: #CC0000;">百度 </a><a href="" style="color: #CC0000;"> 百度</a><a href="" style="color: #0000cc">百科</a>
</div>
</div>
<div style="height: 75px;width: 538px;margin-top: 10px">
<div style="width: 141px;height: 121px;float: left;">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1593486624,3032607273&fm=58&bpow=540&bpoh=540"style="width: 121px;height: 121px;">
</div>
<div style="width: 397px;height: 75px;float: left; font-size: 13px">
<span style="color: #CC0000">百度</span>(纳斯达克:BIDU),全球最大的中文搜索引擎、最大的中文网站。<span style="color: #CC0000">百度</span>愿景是:成为最懂用户,并能帮助人们成长的全球顶级高科技公司。"<span style="color: #CC0000">百度</span>"二字,来自于八百年前南宋词人...<br>
<a href=""style="color: #0000cc;font-size: 13px">发展简史</a>
<a href=""style="color: #0000cc;font-size: 13px">公司理念</a>
<a href=""style="color: #0000cc;font-size: 13px">财报数据</a>
<a href=""style="color: #0000cc;font-size: 13px">产品手册</a>
<a href=""style="color: #0000cc;font-size: 13px">多语言化</a>
<a href=""style="color: #0000cc;font-size: 13px">更多>></a>
</div>
</div>
<div style="width: 206px;height: 21px;border: 1px solid #b8b8b8;float: left;border-left: 2px solid #3385ff">
<span style="font-size: 13px;line-height: 20px;color: #666666"> 关注点:</span>
<a href=""style="color: #0000cc;font-size: 13px;line-height: 21px">2019百度AI开发者大会</a>
<br/>
<a href="" style="color: green;text-decoration: none ;font-size: 13px">baike.baidu.com/</a>
</div>
<!-- 3-->
<div style="width: 177px;height: 17px;margin-top: 20px">
<div style="width: 137px;height: 17px;float: left">
<a href="" style="color: #CC0000;">百度</a>
<a href="" style="color: #0000cc">地图</a>
</div>
</div>
<div style="height: 75px;width: 538px;margin-top: 50px">
<div style="width: 141px;height: 75px;float: left;">
<img src="img/u=4087042252,3305680367&fm=58&s=73F6A876C8A47E90237D87C502007024.jpg" height="75"
width="120"/></div>
<div style="width: 397px;height: 75px;float: left; font-size: 13px;margin-top: 5px">
浏览地图、搜索地点、查询公交驾车线路、查看实时路况,您的出行指南、生活助手。提供地铁线路图浏览,乘车方案查询,以及准确的票价和时间信息。<br>
<a href="" style="color: green;text-decoration: none ;font-size: 13px">https://www.map.baidu.com/</a> -
<a href=""style="font-size: 13px">百度快照</a> - <a href="" style="font-size: 13px">3417条评价</a>
</div>
</div>
<!-- 4-->
<div style="width: 480px;height: 17px;margin-top: 20px">
<div style="width: 475px;height: 17px;float: left">
<a href="" style="color: #0000cc">Android </a>
<a href="" style="color: #CC0000;">百度</a>
<a href="" style="color: #0000cc">下载_</a>
<a href="" style="color: #CC0000;">百度</a>
<a href="" style="color: #0000cc">移动应用</a>
</div>
</div>
<a href="" style="color: green;text-decoration: none ;font-size: 13px; margin-top:15px">shouji.baidu.com/ - </a>
</div>
<div class="content-right">
<div style="position: relative;height: 140px;width: 400px;">
<div>
<span style="font-size: 14px;color: #333333"><b>百度高管</b></span>
<a href="" style="position: absolute;top: 5px;right: 0px;font-size: 14px;color: #0000cc">展开</a>
</div>
<div style="width: 70px;height: 130px;text-align: center;float: left">
<img src="img/1567936630(1).jpg" height="75" width="70" style="float: left;margin-top: 15px"/>
<a href="" style="color: #0000cc;font-size: 13px">李彦宏</a><br>
<span style="color: #999999;font-size: 12px">百度创始人董事长CEO</span>
</div>
<div style="width: 70px;height: 130px;text-align: center;float: left;margin-left: 40px;margin-top: 15px">
<img src="img/1567936856(1).jpg" height="75" width="70" style="float: left"/>
<a href="" style="color: #0000cc;font-size: 13px">余正均</a><br>
<span style="color: #999999;font-size: 12px">百度集团首席财务官</span>
</div>
<div style="width: 70px;height: 130px;text-align: center;float: left;margin-left: 40px;margin-top: 15px">
<img src="img/1567938131(1).jpg" height="75" width="70" style="float: left"/>
<a href="" style="color: #0000cc;font-size: 13px">张亚勤</a><br>
<span style="color: #999999;font-size: 12px">百度总裁</span>
</div>
<div style="width: 70px;height: 130px;text-align: center;float: left;margin-left: 40px;margin-top: 15px">
<img src="img/1567938189(1).jpg" height="75" width="70" style="float: left"/>
<a href="" style="color: #0000cc;font-size: 13px">王海峰</a><br>
<span style="color: #999999;font-size: 12px">百度集团首席技术官</span>
</div>
</div>
<div style="position: relative;height: 140px;width: 400px;margin-top: 50px" >
<div>
<span style="font-size: 14px;color: #333333"><b>百度旗下产品</b></span>
<a href="" style="position: absolute;top: 5px;right: 0px;font-size: 14px;color: #0000cc">展开</a>
</div>
<div style="width: 70px;height: 130px;text-align: center;float: left">
<img src="img/1567939463(1).jpg" height="70" width="70" style="float: left;margin-top: 15px"/>
<a href="" style="color: #0000cc;font-size: 13px">百度搜索</a><br>
<span style="color: #999999;font-size: 12px">全球最大中文搜索引擎</span>
</div>
<div style="width: 70px;height: 130px;text-align: center;float: left;margin-left: 40px;margin-top: 15px">
<img src="img/1567939571(1).jpg"height="70" width="70" style="float: left"/>
<a href="" style="color: #0000cc;font-size: 13px">百度APP</a><br>
<span style="color: #999999;font-size: 12px">有事搜一搜没事看一看</span>
</div>
<div style="width: 70px;height: 130px;text-align: center;float: left;margin-left: 40px;margin-top: 15px">
<img src="img/1567939607(1).jpg"height="70" width="70" style="float: left"/>
<a href="" style="color: #0000cc;font-size: 13px">百度糯米</a><br>
<span style="color: #999999;font-size: 12px">本地精品生活指南</span>
</div>
<div style="width: 70px;height: 130px;text-align: center;float: left;margin-left: 40px;margin-top: 15px">
<img src="img/1567939637(1).jpg"height="70" width="70" style="float: left"/>
<a href="" style="color: #0000cc;font-size: 13px">百度地图</a><br>
<span style="color: #999999;font-size: 12px">亿万人在用的专业地图</span>
</div>
</div>
</div>
</body>
</html>
day04 百度搜索栏
最新推荐文章于 2024-05-03 23:34:34 发布