刚看完一点html,css相关书籍，做一个百度页面练练手，至于长宽的问题，可以进行调整（代码没有简化）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#quan{
width: 1295.2px;
height: 683.4px;
}
#tz{width: 473.39px;
height: 60px;
padding-left:24px;
position: absolute;
top:0px;
right: 792.812px;
bottom:662.4px;
left:0px;
font-size: 0;
z-index: 1;
}
a{display:inline-block;
text-decoration: none;
font-weight: 400;
font-size: 13px;
font-family: Arial, sans-serif;
margin: 19px 31px 0px 0px;
width:26px;
height: 22.4px;
color:black;
text-align: center;
}
a:hover{color:blue;cursor: pointer;}
#h{width:43.39px;}
#ty{
position: absolute;
top:0px;
right: 0px;
bottom: 662.4px;
left:1133.2px;
width:138px;
height: 60px;
padding-right: 24px;
font-size: 0;
}
.y1,.y2{display: inline-block;
text-align: center;
line-height: 22.4px;
font-weight: 400;
font-size: 13px;
font-family: Arial, sans-serif;}
.y1{
margin: 19px 0 0 32px;
width:26px;
height: 22.4px;
}
.y1:hover{cursor: pointer;}
.y2{
margin: 18px 0 0 32px;
width: 48px;
height: 24px;
background-color:#4e6ef2;
color:white;
border-radius: 6px;
}
.y2:hover{cursor: pointer;}
#kuang{
width: 654px;
height: 314px;
margin: 0 auto auto auto;
}
#tzh{
width: 654px;
height: 188.4px;
text-align: center;
margin: 0 auto auto auto;
position: relative;
top:0;
right: 0;
bottom: 0;
left:0;
}
#tzh img{
width: 270px;
height: 129px;
position: absolute;
top:44.4px;
right: 192px;
bottom: 15px;
left: 327px;
margin-left:-135px ;
}
#s{
display: inline-block;
width: 480px;
height: 16px;
border-radius: 10px 0 0 10px;
border:2px solid lightgray;
padding: 12px 48px 12px 16px;
}
#s:hover{border-color:blue;}
#sou{
display: inline-block;
width: 108px;
height: 44px;
background-color: #4e6ef2;
color:white;
border-radius: 0 10px 10px 0;
text-align: center;
line-height: 44px;
position: relative;
bottom:44px;
left:546px;
font-size: 17px;
font-weight: 400;
}
#sou:hover{cursor: pointer;}
#baire{
position: absolute;
top:286px;
left:auto ;
right: auto;
width: 654px;
height: 24px;
margin-bottom: 4px;
}
.b1{
width:56px;
height: 24px;
line-height: 24px;
float:left;
color:#222;
font-size:14px;
font-weight: 400;}
.b1:hover{cursor: pointer;}
.b2{
width: 39px;
height: 24px;
line-height: 24px;
float:right;
color:#9195a3 ;
font-size: 13px;
font-weight: 400;}
.b2:hover{cursor: pointer;}
.clear{clear:both}
#xk{
width: 654px;
height: 96px;
margin: 0 auto auto auto;
}
.r1,.r2,.r3,.r4,.r5,.r6{
width: 268px;
height: 32px;
line-height: 32px;
font-weight: 400;
}
.r1,.r2,.r3{
margin-right: 59px;
}
.r4,.r5,.r6{
margin-left: 59px;
position: relative;
bottom:96px;
left:327px;
}
.r11,.r21,.r31,.r41,.r51,.r61{
display: inline-block;
width: 18px;
height: 32px;
margin-right: 2px;
font-size: 15px;
}
.r41,.r51,.r61{
color:darkgray;
}
.r12,.r22,.r32,.r42,.r52,.r62{
display: inline-block;
width: auto;
height: auto;
font-size: 14px;
color:#626675;
}
.r12{color:#222;}
.r12:hover{color:blue;cursor: pointer;}
.r22:hover{color:blue;cursor: pointer;}
.r32:hover{color:blue;cursor: pointer;}
.r42:hover{color:blue;cursor: pointer;}
.r52:hover{color:blue;cursor: pointer;}
.r62:hover{color:blue;cursor: pointer;}
#re{
width: 12px;
height: 16px;
padding: 0 2px;
margin-bottom: 4px;
margin-left: 8px;
color: white;
background-color: #ff9812;
text-align: center;
font-size: 12px;
font-weight: 200;
border-radius: 4px;
}
#di{
height: 39px;
color:#bbb;
font-size: 0;
text-align: center;
}
#di1{
margin-left: auto;
margin-right: auto;
}
#di span{
display: inline-block;
height: 39px;
line-height: 39px;
margin-right: 18px;
font-size: 12px;
}
#di span:hover{
color:black;
cursor: pointer;
}
</style>
</head>
<body>
<div id="quan">
<div id="tz">
<a href="http://news.baidu.com/" target="_blank">新闻</a>
<a id="h" href="https://www.hao123.com/" target="_blank">hao123</a>
<a href="https://map.baidu.com/" target="_blank">地图</a>
<a href="https://live.baidu.com/" target="_blank">直播</a>
<a href="https://haokan.baidu.com/" target="_blank">视频</a>
<a href="http://tieba.baidu.com/" target="_blank">贴吧</a>
<a href="https://xueshu.baidu.com/" target="_blank">学术</a>
<a href="https://www.baidu.com/more/" target="_blank">更多</a>
</div>
<div id="ty">
<span class="y1">设置</span>
<span class="y2">登录</span>
</div>
<div id="kuang">
<div id="tzh">
<img src="img/1.png" alt="百度头像" title="点击一下，了解更多"/>
</div>
<input type="text" id="s" value="" />
<span id="sou">百度一下</span>
<div id="baire">
<div class="b1">百度热榜</div>
<div class="b2">换一换</div>
<div class="clear"></div>
</div>
</div>
<div id="xk">
<div class="r1">
<span class="r11" style="color:#fe2d46;">1</span>
<span class="r12">五一假期返程高峰</span>
<span id="re">热</span>
</div>
<div class="r2">
<span class="r21" style="color:#f60;">2</span>
<span class="r22">G7会议印度代表团现2例新冠阳性病例</span>
</div>
<div class="r3">
<span class="r31" style="color:#faa90e;">3</span>
<span class="r32">3名回国人员疑从印度感染变异病毒</span>
</div>
<div class="r4">
<span class="r41">4</span>
<span class="r42">五一档电影票房破16亿</span>
</div>
<div class="r5">
<span class="r51">5</span>
<span class="r52">被拐25年寻亲女子父母已病逝</span>
</div>
<div class="r6">
<span class="r61">6</span>
<span class="r62">张文宏与哥哥同台演讲</span>
</div>
</div>
</div>
<div id="di"><div id="di1">
<span>设为首页</span>
<span>关于百度</span>
<span>About Baidu</span>
<span>百度营销</span>
<span>使用百度前必读</span>
<span>意见反馈</span>
<span>帮助中心</span>
<span>京公网安备11000002000001号</span>
<span>京ICP证030173号</span>
<span>©2021 Baidu</span>
<span style="margin-right: 0;">(京)-经营性-2017-0020</span>
</div></div>
</body>
</html>
如有其他建议还望指出，谢谢！
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
