代碼詳解見（一）：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=)