简单百度页面
作者：互联网
<!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;}
#header{
min-width: 800px;
position: relative;
}
body{
height: 5000px;
}
#nav{
width: 600px;
height: 30px;
background: #fff;
margin: 0;
padding: 0;
font-size: 14px;
list-style: none;
display: flex;
justify-content: space-around;
line-height: 30px;
}
#nav>li {
/* display: inline-block;
margin: 0 19px;
font-size: 14px;
list-style: none;*//*去黑点*/
}/*#nav>li 子代选择器*/
/*#nav li 后代选择器*/
#nav a{
color: #000;
text-decoration: none;/*去下划线*/
}
#topRight{
width: 140px;
height: 30px;
background: #fff;
position: absolute;
right: 10px;
top: 5px;
display: flex;
justify-content: space-between;
}
#topRight>input{
background: #fff;
border: 0;
font-size: 13px;
height: 24px;
cursor: pointer;
}
#topRight>#login{
width: 48px;
background: #38f;
color: #fff;
border-radius: 6px;
}
/*权值,权重*/
/*行内样式1000,id 100,class 10,tag 1*/
#center{
width: 600px;
height: 250px;
margin: 150px auto 0;
/*text-align: center;*/
}
#imgBox{
width: 220px;
margin: 0 auto;
}
#imgBox>img{
width: 100%;
}
#iptBox{
width: 100%;
height: 44px;
border: 1px solid lightgray;
border-radius: 10px;
/*background: lightblue;*/
}
#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%;
border: 0;
float: left;
border: 0;
background: #38f;
color: #fff;
border-radius:0 10px 10px 0 ;
}
#b{
min-width: 200px;
position: fixed;
bottom: 0px;
right: 0;
background: lightblue;
}
#c{
width: 1500px;
height: 30px;
background: #fff;
margin: 0;
padding: 0;
font-size: 12px;
list-style: none;
display: flex;
justify-content: space-around;
line-height: 30px;
}
#c a{
color: gray;
text-decoration: none;
}
</style>
</head>
<body>
<div id="header">
<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" value="设置">
<input type="button" id="login" value="登录">
</div>
</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" value="百度一下">
</div>
</div>
<div id="b">
<ul id="c">
<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="">京公网安备11000002000001号</a></li>
<li><a href="">京ICP证030173号</a></li>
<li><a href="">©2021 Baidu</a></li>
<li><a href="">互联网药品信息服务资格证书 (京)-经营性-2017-0020</a></li>
<li><a href="">信息网络传播视听节目许可证 0110516</a></li>
</ul>
</div>
</body>
</html>
标签：10px,height,width,background,简单,fff,border,百度,页面 来源： https://www.cnblogs.com/cwbnb/p/15517771.html