2天駕馭DIV+CSS！第五課（上）

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一般網站都會做到點擊logo，就會回到首頁，應該怎麼做呢，大家首先會想到，給圖片加上連結就可以了

前四節的大練習大家做的怎麼樣？有沒有難度，如果你覺著有難度沒有關係，這節課，我帶著大家做一下這個練習！
【第一步整體布局與公用CSS定義】
我們先來分析一下這個頁面

頁面主要分5大塊，頂部的Logo、導航條Nav、Banner、Content、Footer，如下圖

這樣HTML就很容易寫出來了
<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
因為這5塊的寬度都是900像素，並且都是水平置中的，所以相應CSS代碼如下
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
/*為什麼寫這段代碼沒有忘記吧，作用就是重設可能用到的標籤，不明白的去看第四節的課程關鍵詞*/
#logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
【第二步布局Logo欄】
首先我們需要把頁面上的logo給切割出來，其大小為173*46,名字為：logo.gif

一般網站都會做到點擊logo，就會回到首頁，應該怎麼做呢，大家首先會想到，給圖片加上連結就可以了，代碼一般會這麼寫
<a href="#" id="logoLink"><img src="#" /></a>
不過KwooJan要介紹另外一種方法，將圖片做成連結a的背景，同樣可以達到上面說的效果，並且HTML代碼就會更精簡，少了<img...>，看看下面Logo欄的頁面代碼，紅色的為將logo.gif作為背景的連結
HTML代碼：
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>

CSS代碼
#Logo{
height:80px;/*公用代碼中沒有定義高度，在這裡定義*/
}
#logoLink{
display:block;/*將連結a轉化成塊狀元素，這樣才能顯示出背景*/
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*為了讓ie6和ff顯示效果一樣，如果不加上這句話，後面的margin-top:20px;兩個瀏覽器解析不一樣，大家可以去掉這句話，看看兩者顯示效果差別*/
margin-top:20px;/*設定a的頂部外邊距為20像素，這樣才能和瀏覽器頂部有段距離，才能和圖片中做的一樣*/
}

好到這裡，頭部含有logo的地區已經寫完，如果自己做不出來，原始碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="CSS/css.css"/>
<title>浮動(float)頁面配置（上）alixixi.com整理</title>
</head>

<body>
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
</body>
</html>
/* 公用部分 */
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
#Logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
/*頭部logo地區*/
#Logo{
height:80px;
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*為了讓ie6和ff顯示效果一樣，如果不加上這句話，後面的margin-top:20px;兩個瀏覽器解析不一樣，大家可以去掉這句話，看看兩者顯示效果差別*/
margin-top:20px;
}
【第三步布局導覽列Nav】
頁面上的導覽列和第四節講的幾乎是一樣的，並且更簡單些，這裡我就不再給大家一步一步做，不會做的就去看第四節，這裡我就直接把代碼發出來供大家學習
HTML代碼：
<div id="Nav">
<ul>
   <li><a href="#">HOME</a></li>
      <li><a href="#">PHOTOS</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">LINKS</a></li>
      <li><a href="#">CONTACT</a></li>
</ul>
</div>

CSS代碼
#Nav{height:42px;}
#Nav ul{
height:42px;
list-style:none;
background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
display:block;/*轉化成塊狀元素，因連結是內鏈元素，若想給它定義下面的屬性，必須將它轉化成塊狀元素，*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*去除連結樣式，預設是有底線的，加上這句就沒有任何樣式，底線也沒有了*/
float:left;/*這句一定要加，不然在IE6中會出現，這種效果*/
}
#Nav ul li a:hover{background:#68acd3;}
【第四步 Banner布局】
這個就更簡單了，有兩種方法
第一種：將圖片作為<div id="Banner"></div>背景
第二種：直接將圖片插入<div id="Banner"></div>之間，代碼：<div id="Banner"><img src="" /></div>
大家可以根據需求和實際情況選擇用哪一種，在這裡我們用第一種
HTML代碼沒有什麼變化，只需要在CSS裡面定義一下就OK了
CSS代碼：
#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}
做出來了嗎？做不出跟下面的原始碼比較一下吧~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="CSS/css.css"/>
<title>浮動(float)頁面配置（上）alixixi.com整理</title>
</head>

<body>
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>
<div id="Nav">
<ul>
    <li><a href="#">HOME</a></li>
        <li><a href="#">PHOTOS</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">LINKS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
</body>
</html>
/* 公用部分 */
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
#Logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
/*頭部logo地區*/
#Logo{
height:80px;
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*為了讓ie6和ff顯示效果一樣，如果不加上這句話，後面的margin-top:20px;兩個瀏覽器解析不一樣，大家可以去掉這句話，看看兩者顯示效果差別*/
margin-top:20px;
}
/*導航條*/
#Nav{height:42px;}
#Nav ul{
height:42px;
list-style:none;
background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
display:block;/*轉化成塊狀元素，因連結是內鏈元素，若想給它定義下面的屬性，必須將它轉化成塊狀元素，*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*去除連結樣式，預設是有底線的，加上這句就沒有任何樣式，底線也沒有了*/
float:left;
}
#Nav ul li a:hover{background:#68acd3;}

/*Banner*/
#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}
怎麼樣做到這裡比較簡單吧，好，接著來
【第五步內容Content板塊布局】
從圖片上我們看到，內容板塊分為左右兩個地區，左邊ContentL寬度是600px，右邊ContentR寬度是300px，但是由於我們要將內邊距設定成15px(這樣才會好看)，所以ContentL的寬度在CSS中就要設定成600-15*2=570px,而右側的ContentR則需要設定成300-15*2=270px；
HTML代碼：
<div id="Content">
<div id="ContentL">此處為左邊ContentL</div>
<div id="ContentR">此處為左邊ContentR</div>
</div>

CSS代碼:
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*為什麼都要左側浮動，如果不明白就去看第二節*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}
頁面效果：

內容部分我們就先做到這裡，最後我們再布局裡面的具體元素，下面接著來布局著作權模組(Footer)
【第六步 Footer布局】
這部分結構比較簡單，大家只需要知道怎麼布局就OK了
HTML代碼：
<div id="Footer">
<p>CSS學習 alixixi.com整理</p>
<p>CSS學習 alixixi.com整理</p>
</div>
CSS代碼：
#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}
目前效果如下：

本節到這裡的全代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="CSS/css.css"/>
<title>CSS學習 alixixi.com整理</title>
</head>

<body>
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>
<div id="Nav">
<ul>
    <li><a href="#">HOME</a></li>
        <li><a href="#">PHOTOS</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">LINKS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div id="Banner"></div>
<div id="Content">
<div id="ContentL">此處為左邊ContentL</div>
    <div id="ContentR">此處為左邊ContentR</div>
</div>
<div id="Footer">
    <p>CSS學習 alixixi.com整理有</p>
    <p>CSS學習 alixixi.com整理</p>
</div>
</body>
</html>
/* 公用部分 */
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
#Logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}
/*頭部logo地區*/
#Logo{
height:80px;
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*為了讓ie6和ff顯示效果一樣，如果不加上這句話，後面的margin-top:20px;兩個瀏覽器解析不一樣，大家可以去掉這句話，看看兩者顯示效果差別*/
margin-top:20px;
}
/*導航條*/
#Nav{height:42px;}
#Nav ul{
height:42px;
list-style:none;
background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
display:block;/*轉化成塊狀元素，因連結是內鏈元素，若想給它定義下面的屬性，必須將它轉化成塊狀元素，*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*去除連結樣式，預設是有底線的，加上這句就沒有任何樣式，底線也沒有了*/
float:left;
}
#Nav ul li a:hover{background:#68acd3;}

/*Banner*/
#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}

/*Content*/
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*為什麼都要左側浮動，如果不明白就去看第二節*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}

/*Footer*/
#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}
本文來自www.cssxuexi.cn ＊尊重他人勞動成果，轉載請自覺註明出處！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More