<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/*input{margin: 0;padding: 0;}写项目不准用*/
#nav{/*background: lightblue;*/
width: 600px;
height: 30px;
list-style: none;/*去黑点*/
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;/*字体均匀分布，且两头没有空闲*/
}
#nav a{color: #000;font-size: 13px;text-decoration: none/*去下划线*/;
line-height: 30px;}/*后代选择器*/
/*li{float: left;}*/
#topRight{/*background: lightcoral;*/
position: absolute;
right:10px;
top:10px;
float: right;
width: 140px;
display: flex;
justify-content: space-between;}
#topRight>input{background: #fff;
border: 0;
cursor: pointer/*小手*/;
}
#topRight>#login{background: #38f;
color: #fff;width: 48px;
border-radius: 6px;}
/*权重，权值 行内1000，id100，class10，tag1*/
#center{width: 600px;
height: 250px;
margin: 150px auto 0;
/*background: lightpink;*/
}
#imgBox{
width: 220px;margin:0 auto;
background: lightblue;}
#imgBox>img{width:100%;}
#iptBox{width: 100%;height: 44px;/*background: lightblue*/border: 1px solid lightgray;border-radius: 10px;}
#iptBox>input[type='text']{width: 500px;height: 100%;float: left;border: 0;border-radius: 10px 0 0 10px;}
/*属性选择器*/
#iptBox>input[type='button']{width: 100px;height: 100%;float: left;border: 0;color: #fff;background: #38f;border-radius: 0 10px 10px 0;}
#footer{
position: fixed;bottom: 0;left: 7.5;/*right: 0;*/min-width: 760px;width: 85%;
margin: 0 auto;display: flex;
justify-content: space-around;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="">新闻</a></li>
<li><a href="">hao123</a></li>
<li><a href="">新闻</a></li>
<li><a href="">新闻</a></li>
<li><a href="">新闻</a></li>
<li><a href="">新闻</a></li>
<li><a href="">新闻</a></li>
<li><a href="">新闻</a></li>
</ul>
<div id="topRight">
<input type="button" name="" value="设置">
<input type="button" id="login" name="" value="登录">
</div>
<div id="center">
<div id="imgBox">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
</div>
<div id="iptBox">
<input type="text" name="">
<input type="button" name="" value="百度一下">
</div>
</div>
<ul id="footer">
<li><a href="">关于百度</a></li>
<li><a href="">about baidu</a></li>
<li><a href="">百度</a></li>
<li><a href="">百度</a></li>
<li><a href="">百度</a></li>
<li><a href="">about baidu</a></li>
<li><a href="">about baidu</a></li>
<li><a href="">about baidu</a></li>
<li><a href="">about baidu</a></li>
</body>
</html>