<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head {
width: 100%;
height: 50px;
}
.head a {
margin-top: 15px;
}
.nav {
width: 100%;
height: 50px;
background-color: #eeeeee;
}
.content {
width: 100%;
}
.content .left-box{
width: 36%;
margin-left: 6%;
margin-right: 6%;
float: left;
}
.leftrow {
width: 100%;
height: 200px;
}
.content .right-box{
width: 50%;
border-left: 1px solid gray;
margin-top: 50px;
float: right;
padding-left: 20px;
}
.rightrow {
width: 60%;
margin-bottom: 30px;
/*height: 250px;*/
}
.rightrow .item {
width: 20%;
margin-right: 5%;
text-align: center;
float: left;
}
.rightrow .item a{
text-decoration: none;
}
.arow {
height: 40px;
border-bottom: 1px solid gray;
}
.arow a {
text-decoration: none;
line-height: 40px;
}
.arow span {
background-color: red;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
}
.arow * {
line-height: 40px;
}
#left-box {
width: 538px;
height: 35px;
border: 1px solid blue;
float: left;
position: relative;
}
#right-box {
width: 100px;
height: 37px;
background-color: blue;
color: white;
float: left;
text-align: center;
line-height: 37px;
}
input {
height: 35px;
padding: 0;
border: 0;
width: 501px;
outline: none;
margin-left: 5px;
}
#img {
position: absolute;
width:30px;
height:30px;
margin-left: 0px;
right: 0px;
top: 0px;
}
.nav a {
line-height: 50px;
margin-left: 20px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="head">
<img src=".idea/baidu.jpg" width="100px"height="30px" style="float: left">
<div id="left-box">
<input type="text" style="float: left;display: inline-block">
<img src="image/input.png" id="img">
</div>
<div id="right-box">百度一下</div>
<div style="float: right;">
<a href="">百度首页</a>
<a href="">消息</a>
<a href="">设置</a>
<a href="">安澜宇</a>
</div>
</div>
<div class="nav">
<a href="" style="margin-left: 120px">网页</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 class="content">
<div class="left-box">
<div style="height: 50px;width: 100%">
<div style="float: left">百度为您找到相关结果约100,000,000个</div>
<div style="float: right">搜索工具</div>
<div style="clear: both"></div>
</div>
<div class="leftrow">
<a href="#">百度一下,你就知道</a>
<br>
<div style="float: left;width:25%">
<img src=".idea/baidu.jpg" width="120px" height="80px">
</div>
<div style="float: right;width: 75%">
<p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。百度超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。</p>
<a href="">https://www.baidu.com/</a>-
<a href="">百度快照</a>-
<a href="">7616条评价</a>
</div>
</div>
<div class="leftrow">
<a href="#">百度_百度百科</a>
<br>
<div style="float: left;width:25%">
<img src=".idea/baidu.jpg" width="120px" height="80px">
</div>
<div style="float: right;width: 75%">
<p>百度(纳斯达克:BIDU),全球最大的中文搜索引擎、最大的中文网站。百度愿景是:成为最懂用户,并能帮助人们成长的全球顶级高科技公司。“百度”二字,来自于八百年前南宋词人...</p>
<a href="">发展简史</a>
<a href="">公司理念</a>
<a href="">财报数据</a>
<a href="">产品手册</a>
<a href="">多语言化</a>
<a href="">更多>></a>
<div style="border: 1px solid gray;width: 250px;height: 30px;border-left: 2px solid blue">
关注点:2019百度AI开发者大会
</div>
<a href="">
baike.baidu.com/
</a>
</div>
</div>
<div class="leftrow" style="margin-top: 30px">
<a href="#">百度网盘,让美好永远陪伴</a>
<div>
<p>便捷分享 把文件轻松安全的分享给他人 海量存储 您可以把照片、视频、音频等上传到网盘 随时随地查看 轻松查看文档、照片、视频等文件 注册 登录 使用第三方登录 >...</p>
<a href="">https://pan.baidu.com/</a>-
<a href="">百度快照</a>-
<a href="">2019条评价</a>
<a href="">
baike.baidu.com/
</a>
</div>
</div>
<div class="leftrow">
<a href="#">百度地图</a>
<br>
<div style="float: left;width:25%">
<img src=".idea/baidu.jpg" width="120px" height="80px">
</div>
<div style="float: right;width: 75%">
<p>浏览地图、搜索地点、查询公交驾车线路、查看实时路况,您的出行指南、生活助手。提供地铁线路图浏览,乘车方案查询,以及准确的票价和时间信息。</p>
<a href="">https://www.baidu.com/</a>-
<a href="">百度快照</a>-
<a href="">7616条评价</a>
</div>
</div>
</div>
<div class="right-box">
<div class="rightrow">
<div style="height: 30px">
<div style="float: left">百度高管</div>
<div style="float: right">展开</div>
</div>
<div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
<div class="rightrow">
<div style="height: 30px">
<div style="float: left">百度高管</div>
<div style="float: right">展开</div>
</div>
<div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
<div class="rightrow">
<div style="height: 30px">
<div style="float: left">百度高管</div>
<div style="float: right">展开</div>
</div>
<div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div class="item">
<img src=".idea/baidu.jpg" width="100px" height="100px">
<a href="">马化腾</a>
<p>是我儿</p>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
<div style="width: 60%">
<div style="height: 30px">
<div style="float: left">搜索热度</div>
<div style="float: right">换一换</div>
<div style="clear: both"></div>
<div class="arow">
<div style="float: left">
<a href="#"><span>1</span>
马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
<div class="arow">
<div style="float: left">
<a href="#"><span>2</span>马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
<div class="arow">
<div style="float: left">
<a href="#"><span>3</span>马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
<div class="arow">
<div style="float: left">
<a href="#"><span>4</span>马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
<div class="arow">
<div style="float: left">
<a href="#"><span>5</span>马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
<div class="arow">
<div style="float: left">
<a href="#"><span>6</span>马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
<div class="arow">
<div style="float: left">
<a href="#"><span>7</span>马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
<div class="arow">
<div style="float: left">
<a href="#"><span>8</span>马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
<div class="arow">
<div style="float: left">
<a href="#"><span>9</span>马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
<div class="arow">
<div style="float: left">
<a href="#"><span>10</span>马哥永远是你马哥</a>
</div>
<div style="float: right">1280万</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
周末作业
最新推荐文章于 2024-05-27 00:25:59 发布