代码详解见（一）：https://blog.csdn.net/weixin_42312310/article/details/100141134
百度首页设计实现的完整代码
1. HTML核心代码：
<!DOCTYPE html>
<html>
<head>
<title>我的百度首页</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="index.css" target="_blank" rel="external nofollow" />
</head>
<body>
<div id="top">
<div id="weatherCtrl">
<span>厦门：<img src="images/cloud.jpg" width="20px" height="20px" />15℃-20℃｜空气质量 良好 </span>
|<span>皮肤</span>
|<span>意见反馈</span>
<br/><br/><div id="weather" class="hide">
<div class="div1">
<span>12月18号</span>
<span>农历十二</span>
<span>未来七天天气</span> <hr/>
</div>
<div class="div2">
<span>今天（周二）</span><br/>
<img src="images/sunny.jpg" width="50" height="50"/><br/>
<span>17℃-24℃</span><br/>
<span>晴</span><br/>
<span>优</span>
</div>
<div class="div2">
<span>明天（周三）</span><br/>
<span><img src="images/cloud.jpg" width="50" height="50"/></span><br/>
<span>10℃-21℃</span><br/>
<span>多云</span><br/>
<span>好</span>
</div>
<div class="div2">
<span>后天（周四）</span><br/>
<span><img src="images/yin.jpg" width="50" height="50"/></span><br/>
<span>10℃-20℃</span><br/>
<span>阴</span><br/>
<span>良</span>
</div>
<div class="div2">
<span>周五</span><br/>
<span><img src="images/cloud.jpg" width="50" height="50"/></span><br/>
<span>11℃-20℃</span><br/>
<span>多云</span><br/>
<span>好</span>
</div>
<div class="div2">
<span>周六</span><br/>
<span><img src="images/rain.jpg" width="50" height="50"/></span><br/>
<span>10℃-18℃</span><br/>
<span>小雨</span><br/>
<span>良</span>
</div>
<div class="div2">
<span>周天</span><br/>
<span><img src="images/cloud.jpg" width="50" height="50"/></span><br/>
<span>10℃-22℃</span><br/>
<span>多云</span><br/>
<span>好</span>
</div>
</div>
</div>
<div id="other">
<ul>
<li><a target="_blank" data-tab="news" href="http://news.baidu.com/" target="_blank" rel="external nofollow" >新闻</a></li>
<li><a target="_blank" data-tab="tieba" href="http://tieba.baidu.com/" target="_blank" rel="external nofollow" >贴吧</a></li>
<li><a target="_blank" data-tab="zhidao" href="http://zhidao.baidu.com/" target="_blank" rel="external nofollow" >知道</a></li>
<li><a target="_blank" data-tab="image" href="http://image.baidu.com" target="_blank" rel="external nofollow" >图片</a></li>
<li><a target="_blank" data-tab="video" href="http://video.baidu.com/" target="_blank" rel="external nofollow" >视频</a></li>
<li><a target="_blank" data-tab="map" href="http://map.baidu.com/" target="_blank" rel="external nofollow" >地图</a></li>
<li><a target="_blank" data-tab="wenku" href="http://wenku.baidu.com/" target="_blank" rel="external nofollow" >文库</a></li>
<li><a target="_blank" data-tab="edit" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >设置</a><br/>
<br/><ul class="search">
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >搜素设置</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >高级搜素</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >页面设置</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >隐私设置</a></li>
</ul>
</li>
<li><a target="_blank" href="http://www.baidu.com/more/" target="_blank" rel="external nofollow" id="more">更多>></a></li>
</ul>
</div>
</div><br/><br/>
<div id="main" >
<div id="div_logo">
<img src="images/baidu_logo.jpg" alt="This is Baidu_logo"><br/><br/>
<form id="bdfm" target="_blank" name="bdfm" method="get" action="">
<div class="div-input">
<input type="text" name="word">
<label></label>
</div>
<button type="submit">百度一下</button>
</form>
</div><br/><br/><br/><br/>
<div id="div_tab" >
<table width="780" align="center">
<tr>
<td>
<div class="table">
|<span id="tab1" onclick="tabSelect(1);">我的关注</span>
|<span id="tab2" onclick="tabSelect(2);">推荐</span>
|<span id="tab3" onclick="tabSelect(3);">导航</span>
</div>
<div id="tabCtr1">
<span class="text">▼我的导航</span><hr/>
<img src="images/du.jpg" width="20" height="20"/>音乐
<img src="images/du.jpg" width="20" height="20"/>视频
<img src="images/du.jpg" width="20" height="20"/>知道
<img src="images/du.jpg" width="20" height="20"/>电影 <br/>
<hr/><div class="text">+自定义</div><hr/>
<img src="images/happy.jpg" alt="happy image is missing.."/>
</div>
<div id="tabCtr2" class="hide">
<span class="text">以下信息根据您的兴趣推荐</span><hr/>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" align="center">内地与港澳人士热议港珠澳大桥：为大湾区发展带来新机遇</a><br/><br/>
<img src="images/bridge1.jpg" alt="The bridge image is missing.." width="200" height="200"/>
<img src="images/bridge2.jpg" alt="The bridge image is missing.." width="200" height="200"/>
<img src="images/bridge3.jpg" alt="The bridge image is missing.." width="200" height="200"/><hr/><br/>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >中国股市需要华为精神！！！</a><br/><br/>
<img src="images/glod.jpg" alt="The glod image is missing.." width="200" height="200"/>
<img src="images/glod1.jpg" alt="The glod image is missing.." width="200" height="200"/><hr/><br/>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >牛骏峰《一本好书》实力上线 不愿妥协只做麦田里的守望者</a><br/><br/>
<img src="images/watcher1.jpg" alt="The watcher image is missing.." width="150" height="200"/>
<img src="images/watcher2.jpg" alt="The watcher image is missing.." width="200" height="200"/>
<img src="images/watcher3.jpg" alt="The watcher image is missing.." width="200" height="200"/><hr/><br/>
</div>
<div id="tabCtr3" class="hide">
<span class="text">猜你喜欢</span><hr/><br/>
<img src="images/nuo.jpg" width="20" height="20" />百度糯米
<img src="images/qq.jpg" width="20" height="20" />腾讯
<img src="images/home.jpg" width="20" height="20" />汽车之家
<img src="images/taobao.jpg" width="20" height="20" />淘宝网
<img src="images/stor.jpg" width="20" height="20" />1号店
<img src="images/weib.jpg" width="20" height="20" />新浪微博
<img src="images/weixin.jpg" width="20" height="20" />微信
<img src="images/city.jpg" width="20" height="20" />58同城 <br/><br/>
<img src="images/youxi.jpg" width="20" height="20" />小游戏
<img src="images/zhifu.jpg" width="20" height="20" />支付宝
<img src="images/road.jpg" width="20" height="20" />铁路客户
<img src="images/le.jpg" width="20" height="20" />乐视
<img src="images/dang.jpg" width="20" height="20" />当当网
<img src="images/yi.jpg" width="20" height="20" />易网
<img src="images/yigou.jpg" width="20" height="20" />苏宁易购
<img src="images/weir.jpg" width="20" height="20" />微软商店
<hr/><span class="text">其他资讯</span><hr/>
<img src="images/JD.com.jpg" width="100" height="100"/>
<img src="images/gan.jpg" width="100" height="100"/>
<img src="images/cctv.jpg" width="100" height="100"/>
<img src="images/people.com.jpg" width="100" height="100"/>
<img src="images/vip.jpg" width="100" height="100"/>
<img src="images/street.jpg" width="100" height="100"/>
<img src="images/ifeng.jpg" width="100" height="100"/>
<img src="images/qiy.jpg" width="100" height="100"/>
<img src="images/gome.jpg" width="100" height="100"/>
<img src="images/pin.jpg" width="100" height="100"/>
<img src="images/youku.jpg" width="100" height="100"/>
<img src="images/tmall.jpg" width="100" height="100"/>
<img src="images/tmallbest.jpg" width="100" height="100"/>
<img src="images/nuomi.jpg" width="100" height="100"/>
<img src="images/travel.jpg" width="100" height="100"/>
<img src="images/suning.jpg" width="100" height="100"/>
<img src="images/kdi.jpg" width="100" height="100"/>
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="bottom" >
<p>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="link_css">设为首页</a> ©2017 Baidu <a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >使用百度前必读</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >意见反馈</a>京ICP证030173号<img src="images/ICP.jpg" /><br/>
<img src="images/jinggong.jpg"/>京公网安备110000002000001号
</p>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#weatherCtrl").hover(
function () {
$("#weather").fadeIn(1000);
},
function () {
$("#weather").fadeOut(1000);
}
);
})
function tabSelect(idx){
for(var i=1;i<=3;i++){
if(i==idx){
$("#tabCtr"+i).show();
}else{
$("#tabCtr"+i).hide();
}
}
}
</script>
</html>
2. css代码：
body{
background:url("images/keji.jpg");
background-size:100%;
}
/*天气css样式 */
#weatherCtrl{
font-family:微软雅黑;
float:left;
font-size:15px;
}
#weather{
border:1px solid black;
font-size:15px;
position:absolute;
z-index:100;
background-color:white;
}
#weatherCtrl span:hover{ color:#ce7828de;}
#weather:hover{ color:#2e9814b8;}
.div1{
position:relative;
}
.div2{
position:relative;
float:left;
}
/*其他css样式*/
#other{
float:right;
}
#other ul{ list-style:none;}
#other ul li{ float:left; line-height:1px; position:relative;}
#other ul li a{color:black; display:block;padding:0px 10px;}
#other ul li a:hover{ color:#2e9814b8;}
#other ul li ul li{ float:left; line-height:30px;}
#other ul li ul li a{ width:200%;}
#other ul li ul li a:hover{ background-color:#18d9e2;}
#other ul li:hover ul{ display:block}
.search{
border:1px solid black;
position:absolute;
display:none;
margin:10px 0;
padding:5px 60px 0 0;
background-color:white;
}
/*百度logo的css样式 */
#div_logo {
width: 640px;
margin: auto;
}
#div_logo img{
width: 270px;
height: 130px;
margin: 45px 50px 0 150px;
}
#div_logo button{
width: 100px;
height: 36px;
float: left;
border: none;
font-size: 16px;
line-height: 41px;
text-align: center;
background-color: #317EF3;
color: white;
}
.div-input {
width: 537px;
overflow: hidden;
position: relative;
float: left;
}
.div-input > input {
width: 487px;
padding: 11px 50px 11px 5px;
border: none;
}
.div-input > label {
display: block;
width: 18px;
height: 16px;
position: absolute;
top: 13px;
right: 10px;
background: url("images/camera.jpg") no-repeat;
cursor: pointer;
}
.div-input > label:hover {
background-position: 0 -20px;
}
/*网页详细信息css样式 */
#tabCtr1{
background:url("images/bg2.jpg");
background-size:100%;
}
#tabCtr2{
background-color:#e7eab7;
background-size:100%;
}
#tabCtr2 a{font-family:宋体;font-size:20px;}
#tabCtr3{
background:url("images/bg4.jpg");
background-size:100%;
}
.table{
background:url("images/bg1.jpg");
font-family:隶书;
font-size:28px;
}
.text{
font-family:华文行楷;
font-size:25px;
}
/* 网页底部css样式*/
#bottom p{
text-align:center;
}
.link_css:visited{color:purple;}
#bottom a:hover{color:red;}
.hide{
display:none;
}
.show{
display:block;
}
![外边距合并（内边距无效，外边距塌陷）解决[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)