<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.head{
width: 580px;
/* 宽 */
height: 20px;
/* 高 */
/* border: 2px solid black; */
margin-left: auto;
/* 水平居中 */
margin-top:20px;
/* 上边距 */
}
.one{
display: inline-block;
/*显示 */
background: #3385ff;
/* 背景颜色 */
color:white;
/* 颜色 */
height: 25px;
/* 高 */
width: 80px;
/* 宽 */
text-align: center;
/* 水平对齐居中 */
}
a{
font-size:16px;
/* 字体大小 */
color: black;
/* 颜色 */
margin-right: 20px;
/* 右边框距离 */
}
a:hover{
color:#3385ff;
/* 颜色 */
}
.box{
width: 660px;
/* 宽 */
height: 170px;
/* 高 */
/* border: 2px solid black; */
padding:170px;
/* 内边距距离 */
margin:auto;
/* 水平居中 */
}
.picture{
width: 220px;
/* 宽 */
height: 80px;
/* 高 */
margin:auto;
/* 水平居中 */
}
.cont{
width: 650px;
/* 宽 */
height: 40px;
/* 高 */
margin: auto;
/* 水平居中 */
}
.left{
width: 540px;
/* 宽 */
height: 35px;
/* 高 */
border: 1px solid #3385ff;
/*边框 */
display: inline-block;
/*显示 */
margin-right: -5px;
/* 右边距 */
}
.right{
width: 100px;
/* 宽 */
height: 37px;
/* 高 */
background: #3385ff;
/* 背景颜色 */
display: inline-block;
/* 显示 */
font-size: 16px;
/* 字体大小 */
color: white;
/* 颜色 */
text-align: center;
/* 水平对齐 居中 */
line-height: 37px;
/* */
position: absolute;
/* */
}
.img{
width: 20px;
/* 宽 */
height: 20px;
/* 高 */
overflow: hidden;
/* 溢出的 隐藏 */
margin-left:auto;
/* 左外边距 */
margin-top: 10px;
/* 上外边距 */
margin-right: 10px;
/* 右外边距 */
}
.foot{
width: 660px;
/* 宽 */
height: 250px;
/* 高 */
margin: auto;
/*外边距 */
}
.foot-one{
width: 110px;
/* 宽 */
height: 110px;
/* 高 */
margin: auto;
/*外边距 */
}
.foot-two{
font-size: 20px;
/* 字体大小 */
text-align: center;
/* 文字居中 */
margin: 15px 0;
/* 外边距 */
}
.foot-three{
font-size: 16px;
/* 字体大小 */
text-align: center;
/*文字居中 */
color: grey;
/* 颜色 */
}
.foot-four{
text-align: center;
/* 文字居中 */
margin-top: 40px;
/* 上外边距 */
}
.foot-four a{
font-size:16px;
/* 字体大小 */
color: gray;
/* 颜色 */
}
.foot-five{
font-size: 16px;
/* 字体大小 */
text-align: center;
/* 文字居中 */
color: gray;
/* 颜色 */
}
</style>
<body>
<div class="head">
<strong>
<a href="" >新闻</a>
<a href="" >h123</a>
<a href="">地图</a>
<a href="">视频</a>
<a href="">贴吧</a>
<a href="">学术</a>
<a href="">登录</a>
</strong>
<a href="">设置</a>
<div class="one">更多产品</div>
</div>
<div class="box">
<div class="picture">
<img src="daidu.png" alt="">
</div>
<div class="cont">
<div class="left">
<div class="img">
<img src="how.png" alt="">
</div>
</div>
<div class="right">百度一下</div>
</div>
</div>
<div class="foot">
<div class="foot-one">
<img src="baidu00.png" alt="">
</div>
<div class="foot-two">
下载百度APP
</div>
<div class="foot-three">
有事搜一搜 没事看一看
</div>
<div class="foot-four">
<a href="">把百度设为主页</a>
<a href="">关于百度</a>
<a href="">About Baidu</a>
<a href="">百度推广</a>
</div>
<div class="foot-five">© 2019 Baidu 使用百度前必读 意见反馈 京ICP证030173号 京公网安备11000002000001号
</div>
</div>
</body>
</html>