2天駕馭DIV+CSS!第五課(上)

來源:互聯網
上載者:User
一般網站都會做到點擊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 *尊重他人勞動成果,轉載請自覺註明出處! 



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。