ps:css属性的值来自于百度代码
(某些地方过于简化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度一下,你就知道</title>
<style>
*{
margin: 0;
padding: 0;
}
.one{
position: absolute;
left: 0;
top: 0;
height: 60px;
padding-left: 24px;
}
.wr{
margin-right: 24px;
margin-top: 19px;
display: inline-block;
position: relative;
color: #222;
font: 13px/23px Arial,sans-serif;
text-decoration: none;
}
.two{
position: absolute;
right: 0;
top: 0;
height: 60px;
padding-right: 24px;
}
.tw{
display: inline-block;
position: relative;
margin-left: 24px;
margin-top: 19px;
}
.login-btn{
background-color: #4e6ef2;
color: #fff;
border-radius: 6px;
margin-top: 18px;
margin-left: 32px;
font-size: 13px;
}
.logo{
position: absolute;
left: 50%;
margin-left: -135px;
/* bottom: 15px!important; */
/* text-align: center; */
}
.search{
position: absolute;
/* margin: 240px; */
/* height: 300px; */
top: 20%;
left:30%;
width: 654px;
/* background-color: aqua; */
}
.ipt{
position: relative;
width: 443px;
padding-right: 87px;
height: 16px;
padding: 12px 16px;
font-size: 16px;
margin: 0;
vertical-align: top;
outline: 0;
box-shadow: none;
border-radius: 10px 0 0 10px;
border: 2px solid #c4c7ce;
background: #fff;
color: #222;
overflow: hidden;
/* box-sizing: content-box; */
}
.btn{
cursor: pointer;
width: 108px;
height: 44px;
/* line-height: 45px;
line-height: 44px\9; */
padding: 0;
/* background: 0 0; */
background-color: #4e6ef2;
border-radius: 0 10px 10px 0;
font-size: 17px;
color: #fff;
box-shadow: none;
font-weight: 400;
border: none;
outline: 0;
}
.bottom{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
height: 39px;
padding-top: 1px;
overflow: hidden;
margin: 0;
line-height: 39px;
background: #fff;
text-align: center;
}
.text{
color: #bbb;
font-size: 12px;
text-align: center;
display: inline;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">
<a href="http://news.baidu.com" class="wr">新闻</a>
<a href="https://www.hao123.com" class="wr">hao123</a>
<a href="http://map.baidu.com" class="wr">地图</a>
<a href="http://tieba.baidu.com/" class="wr">贴吧</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top" class="wr">视频</a>
<a href="http://image.baidu.com/" class="wr"> 图片</a>
<a href="https://pan.baidu.com?from=1026962h" class="wr">网盘</a>
<a href="http://www.baidu.com/more/" class="wr">更多</a>
</div>
<div class="two">
<span class="wr tw">设置</span>
<span class="wr tw login-btn">登录</span>
</div>
</div>
<div class="logo">
<a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs">
<img class="index-logo" src="http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="270" height="129">
</a>
</div>
<div class="search">
<input class="ipt" maxlength="255">
<input type="submit" value="百度一下" class="btn">
</div>
<!-- <div class="hotworld"></div> -->
<div class="bottom">
<span class="text">关于百度</span>
<span class="text">About Baidu</span>
<span class="text">使用百度前必读</span>
<span class="text">帮助中心</span>
</div>
</body>
</html>