<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="imgs/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="baidu.css" />
<title>百度一下，你就知道</title>
</head>
<body>
<div id="top">
<span id="spanxw"><a href="#">新闻</a></span>
<span id="spanhao123"><a href="#">hao123</a></span>
<span id="spanditu"><a href="#">地图</a></span>
<span id="spanzhibo"><a href="#">直播</a></span>
<span id="spanshipin"><a href="#">视频</a></span>
<span id="spantieba"><a href="#">贴吧</a></span>
<span id="spanxueshu"><a href="#">学术</a></span>
<span id="spangengduo"><a href="#">更多</a></span>
<span id="spandenglu"><a class="a-denglu" href="#">登录</a></span>
<span id="spanshezhi"><a href="#">设置</a></span>
</div>
<!-- body -->
<div id="body">
<span id="baiduimg">
<a href="#"></a><img title="上百度,看2021年全国两会" class="bdimg" src="imgs/bioati.png" >
</span>
</div>
<form action="http://www.baidu.com:8080:/test" method="get">
<span id="sousuokuang"><input type="text" name="sousuo" id="sousuokuang2" value="" /></span>
<span class="xiangji"><a href="#"><img id="xjurl" src="./imgs/favicon.ico" ></a></span>
<span id="sousuoanniu"><input id="bdanniu" type="submit" value="百度一下"/></span>
</form>
<span id="rsbang"><a href="#">百度热搜</a></span>
<span id="huan"><a href="#" id="hyh"><i>(～￣▽￣)～</i>换一换</a></span>
<div id="liebao">
<span id="one">1 <a href="#">政协开幕会上的这一幕让人感动<span id="hot">新</span></a></span>
<span id="two">2 <a href="#">委员建议高考调至6月首个周末</a></span>
<span id="san">3 <a href="#">天问一号拍摄到高清火星影像图</a></span>
<span id="si">4 <a href="#">外媒：CGTN可继续在欧播出<span id="new">热</span></a></span>
<span id="wu">5 <a href="#">央视评货拉拉女用户坠亡事件</a></span>
<span id="liu">6 <a href="#">老人摔跤没人扶？真相曝光</a></span>
</div>
<div align="center" id="bottom">
<p><span><a id="dbu">设为首页</a></span></p>
<p><span><a id="dbu">关于百度</a></span></p>
<p><span><a id="dbu">About Baidu</a></span></p>
<p><span><a id="dbu">百度经营</a></span></p>
<p><span><a id="dbu">使用百度前必读</a></span></p>
<p><span><a id="dbu">意见反馈</a></span></p>
<p><span><a id="dbu">帮助中心</a></span></p>
<p><span><a id="dbu">京公网安备11000002000001号</a></span></p>
<p><span><a id="dbu">京ICP证</a></span></p>
</div>
</body>
</html>CSS
span{
display: inline-block;
margin:30px,10px,0px,20px;
margin-left: 20px;
padding-top: 10px;
}
.a-denglu{
background-color: #4e71f2;
display: inline-block;
text-align: center;
height: 25px;
width: 45px;
line-height: 26px;
font-size: 13px;
border-radius: 6px;
cursor: pointer;
}
.a-denglu:link{
color: white;
}
#spandenglu{
float: right;
border-radius: 5px;
border-style: none;
}
#spanshezhi{
float: right;
}
a{
text-decoration: none;
font-size: 13px;
}
a:link{
color: black;
}
a:hover{
color: blue;
}
.bdimg{
width: 250px;
position: absolute;
left: 600px;
}
.xiangji{
position: relative;
top:10px;
border:1px;
border-style:none ;
border-color:#c4c7ce ;
background: #fff;
width: 30px;
height: 20px;
}
#sousuokuang{
position: absolute;
top: 200px;
left: 400px;
}
#sousuokuang2{
border-radius: 10px 0 0 10px;
border-right: none;
width: 512px;
height: 16px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 16px;
}
.xiangji{
position: absolute;
top: 213px;
left: 910px;
}
#xjurl{
width: 20px;
}
#sousuoanniu{
position: absolute;
top: 200px;
left: 931px;
}
#bdanniu{
cursor: pointer;
border: none;
border-radius: 0 10px 10px 0;
background-color:#4e6ef2 ;
color: #fff;
font-size: 16px;
width: 108px;
height: 44px;
}
#rsbang{
position: absolute;
top: 300px;
left: 400px;
}
#liebao{
width:700px ;
position: absolute;
top: 330px;
left: 400px;
}
#two{
position: absolute;
top: 50px;
left: 0;
color: #ff726b;
}
#san{
position: absolute;
top: 90px;
left: 0;
color: #faa90e;
}
#si{
position: absolute;
top: 0px;
left: 400px;
color: #9195a3;
}
#wu{
position: absolute;
top: 50px;
left: 400px;
color: #9195a3;
}
#liu{
position: absolute;
top: 90px;
left: 400px;
color: #9195a3;
}
#one{
color: red;
}
#hot{
color: red;
}
#new{
color: #ffb14c;
}
#huan{
position: absolute;
top: 300px;
left: 1000px;
}
#hyh{
}
#bottom{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
height: 39px;
padding-top: 1px;
margin: 0;
}
p{ font-size: 3px;
display: inline-block;
}
#dbu{
color: #bbbbbb;
}