<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
<style>
.top{
margin-top: 10px;
height: 30px;
}
.top .left{
float: left;
height: 30px;
}
.top .left div{
float: left;
margin-top: 8px;
margin-left: 30px;
font-size: 13px;
font-family: Arial;
color: #222222;
}
.top .left div:hover{
color: #4e6ef2;
}
.top .right{
float: right;
}
.top .right div{
float: left;
margin-top: 8px;
margin-left: 30px;
font-size: 13px;
font-family: Arial;
color: #222222;
}
.top .right div:hover{
color: #4e6ef2;
}
.top .right .right_img{
height: 30px;
width: 30px;
margin-top: 0px;
border-radius: 15px;
}
.middle{
margin-top: 30px;
border: 0px dashed blue;
height: 200px;
}
.middle .logo{
border: 0px solid red;
text-align: center;
}
.middle .search{
margin:0 auto;
border: 2px solid #4e6ef2;
width: 600px;
height: 40px;
margin-top: 20px;
position: absolute;/*相对位置*/
left: 50%;
margin-left: -300px;
border-radius: 10px;
}
.middle .search .input{
width: 450px;
margin-left: 10px;
border-width: 0px;
outline: none;
line-height: 38px;
}
.middle .search .camera{
background-image: url(camera.png);
width: 38px;
height: 38px;
background-repeat: no-repeat;/*图片是否叠加*/
background-position: center;/*背景图片居中*/
}
.middle .search .camera:hover{
background-image: url(camera2.png);
}
.middle .search .button{
background-color: #4e6ef2;
color: white;
height: 40px;
line-height: 40px;
width: 98px;
text-align: center;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.middle .search .button:hover{
background-color: blue;
}
.middle .search div{
float: left;
}
.bottom{
border: 0px solid green;
position: fixed;
bottom: 0px;
width: 100%;
}
.bottom .left{
height: 40px;
float: left;
line-height: 36px;
}
.bottom .left a{
color: #9195a3;
font-size: 12px;
margin-left: 15px;
text-decoration: none;
}
.bottom .left a:hover{
color: black;
}
.bottom .right{
float: right;
margin-right: 30px;
line-height: 36px;
}
.bottom .right a{
color: #9195a3;
font-size: 12px;
margin-left: 15px;
text-decoration: none;
}
.bottom .right a:hover{
color: black;
}
.bottom .right span{
color: #9195a3;
font-size: 12px;
margin-left: 15px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="top">
<div class="left">
<div>新闻</div>
<div>hao123</div>
<div>地图</div>
<div>视频</div>
<div>贴吧</div>
<div>学术</div>
<div>更多</div>
</div>
<div class="right">
<div>石家庄</div>
<div>
15℃
</div>
<div style="background-color: blue;color: white;border-radius: 3px;padding: 3px;margin-top: 4px">良</div>
<div>设置</div>
<div style="margin-top: 0px"></div>
<div>caoxiaopan1010</div>
</div>
</div>
<div class="middle">
<div class="logo">
</div>
<div class="search">
<div>
<input class="input" type="text">
</div>
<div class="camera"></div>
<div class="button">百度一下</div>
</div>
</div>
<div class="bottom">
<div class="left">
<a href="#" rel='nofollow' onclick='return false;'>设为首页</a>
<a href="#" rel='nofollow' onclick='return false;'>关于百度</a>
<a href="#" rel='nofollow' onclick='return false;'>About Baidu</a>
<a href="#" rel='nofollow' onclick='return false;'>百度营销</a>
<a href="#" rel='nofollow' onclick='return false;'>使用百度前必读</a>
<a href="#" rel='nofollow' onclick='return false;'>意见反馈</a>
<a href="#" rel='nofollow' onclick='return false;'>帮助中心</a>
</div>
<div class="right">
<span>©2020 Baidu</span>
<span>(京)-经营性-2017-0020</span>
<a href="#" rel='nofollow' onclick='return false;'>京公网安备11000002000001号</a>
<span>京ICP证030173号</span>
</div>
</div>
</body>
</html>
百度.rar
- 易水寒1010了解作者
- HTML开发工具
- 1KB文件大小
- rar文件格式
- 0收藏次数
- 1 积分下载积分
- 0下载次数
- 2020-10-29 17:33上传日期
html实现的一个百度搜索页面，只有页面功能，无实际搜索功能
百度.rar
- 百度.html5.2KB
内容介绍
评论
相关推荐
- htmlhtml 佩拉蒂罕（Pelatihan）传播HTML和CSS
- html相关html相关html相关html相关
- htmlbasichtml基本
- Html教程Html教程 Html教程 Html教程 Html教程
- HTML RefrenceHTML参考手册，非常不错的做html的工具啊
- html教程HTML教程关于基本语法的使用
- html指南html查询指南，html格式
- htmlhtml html 2021.03.22 HTML在Codecademy（chapter1）中的课程身体，头部，h，p，img，视频，标题，跨度，强壮，em 2021.03.23 HTML在Codecademy中学习课程（第2章）！DOCTYPE html，html，table，thead，tbody ...
- html elementhtml element. 网页设计，标准html element，
- html学习html入门学习,适合初学者