【純轉】Div+CSS經典速成教程。

時間 2019-12-08

標籤純轉 div+css div css 經典速成教程欄目 HTML 简体版

原文原文鏈接

----------------------- Page 1----------------------- 今天看到一個Div+CSS佈局的經典教程，奉獻給你們，本人一貫偏好DIV+CSS，但因爲關注seo和網站運營較多，形成了DIV+CSS作網頁模板的技術生疏，爲了培養本身成全才，不得很差好消化一翻，其實很簡單滴。這個DIV+CSS佈局教程很不錯。教程共分5節，其實就一點點內容，不過經過學習，必定能讓你領會到DIV+CSS 的精髓，不要嫌文字多，一個小時必定能讓你學完，固然是針對熟悉網頁製做基礎的朋友。在網頁製做中，有許多的術語，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中咱們將會用到一些有關於HTML的基本知識，而在你學習這篇入門教程以前，請肯定你已經具備了必定的HTML基礎。下面咱們就開始一步一步使用 DIV+CSS進行網頁佈局設計吧。全部的設計第一步就是構思，構思好了，通常來講還須要用PhotoShop或 FireWorks(如下簡稱PS或FW)等圖片處理軟件將須要製做的界面佈局簡單的構畫出來，如下是我構思好的界面佈局圖。下面，咱們須要根據構思圖來規劃一下頁面的佈局，仔細分析一下該圖，咱們 ----------------------- Page 2----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 不難發現，圖片大體分爲如下幾個部分：一、頂部部分，其中又包括了LOGO、MENU 和一幅Banner圖片；二、內容部分又可分爲側邊欄、主體內容；三、底部，包括一些版權信息。有了以上的分析，咱們就能夠很容易的佈局了，咱們設計層以下圖: 根據上圖，我再畫了一個實際的頁面佈局圖，說明一下層的嵌套關係，這樣理解起來就會更簡單了。 ----------------------- Page 3----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. DIV結構以下： │body {} /*這是一個HTML元素，具體我就不說明了*/ └#Container {} /*頁面層容器*/ ├#Header {} /*頁面頭部*/ ├#PageBody {} /*頁面主體*/ │ ├#Sidebar {} /*側邊欄*/ │ └#MainBody {} /*主體內容*/ └#Footer {} /*頁面底部*/ 至此，頁面佈局與規劃已經完成，接下來咱們要作的就是開始書寫HTML代碼和 CSS。接下來咱們在桌面新建一個文件夾，命名爲「DIV+CSS佈局練習」，在文件夾下新建兩個空的記事本文檔，輸入如下內容： <!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" /> <title>無標題文檔</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html> ----------------------- Page 4----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 這是XHTML的基本結構，將其命名爲index.htm，另外一個記事本文檔則命名爲 css.css。下面，咱們在<body></body>標籤對中寫入DIV的基本結構，代碼以下： <div id="container">[color=#aaaaaa][/color] <div id="Header">[color=#aaaaaa][/color] </div> <div id="PageBody">[color=#aaaaaa][/color] <div id="Sidebar">[color=#aaaaaa][/color] </div> <div id="MainBody">[color=#aaaaaa][/color] </div> </div> <div id="Footer">[color=#aaaaaa][/color] </div> </div> 爲了使之後閱讀代碼更簡易，咱們應該添加相關注釋，接下來打開css.css文件，寫入CSS信息，代碼以下： /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*頁面層容器*/ #container {width:100%} /*頁面頭部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*頁面主體*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*頁面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} 把以上文件保存，用瀏覽器打開，這時咱們已經能夠看到基礎結構了，這個就是頁面的框架了。關於以上CSS的說明（詳細請參考CSS2.0中文手冊，網上有下載）：一、請養成良好的註釋習慣，這是很是重要的； ----------------------- Page 5----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 二、body是一個HTML元素，頁面中全部的內容都應該寫在這標籤對以內，我就很少說了；三、講解一些經常使用的CSS代碼的含義： font:12px Tahoma；這裏使用了縮寫，完整的代碼應該是：font-size:12px;font-family:Tahoma；說明字體爲12像素大小，字體爲Tahoma格式； margin:0px；也使用了縮寫，完整的應該是： margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px 或 margin:0px 0px 0px 0px 順序是上 / 右 / 下 / 左，你也能夠書寫爲margin:0(縮寫)；以上樣式說明body部分對上右下左邊距爲 0 像素，若是使用auto則是自動調整邊距，另外還有如下幾種寫法： margin:0px auto；說明上下邊距爲0px，左右爲自動調整；咱們之後將使用到的padding屬性和margin 有許多類似之處，他們的參數是一樣的，只不過各自表示的含義不相同，margin是外部距離，而padding則是內部距離。 text-align:center 文字對齊方式，能夠設置爲左、右、中，這裏我將它設置爲居中對齊。 background:#FFF 設置背景色爲白色，這裏顏色使用了縮寫，完整的應該是background:#FFFFFF。 background能夠用來給指定的層填充背景色、背景圖片，之後咱們將用到以下格式： background:#ccc url('bg.gif') top left no-repeat；表示：使用#CCC(灰度色)填充整個層，使用bg.gif作爲背景圖片， top left 表示圖片位於當前層的左上端，no-repeat表示僅顯示圖片大小而不填充滿整個層。 top/right/left/bottom/center 用於定位背景圖片，分別表示上 / 右 / 下 / 左 / 中；還可使用 background:url('bg.gif') 20px 100px; 表示X座標爲20像素，Y座標爲100像素的精肯定位； ----------------------- Page 6----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. repeat/no-repeat/repeat-x/repeat-y 分別表示填充滿整個層 / 不填充 / 沿X軸填充 / 沿Y軸填充。 height / width / color 分別表示高度(px)、寬度(px)、字體顏色(HTML色系表)。四、如何使頁面居中？你們將代碼保存後能夠看到，整個頁面是居中顯示的，那麼到底是什麼緣由使得頁面居中顯示呢？是由於咱們在#container中使用瞭如下屬性： margin:0 auto; 按照前面的說明，能夠知道，表示上下邊距爲0，左右爲自動，所以該層就會自動居中了。若是要讓頁面居左，則取消掉auto值就能夠了，由於默認就是居左顯示的。經過margin:auto咱們就能夠輕易地使層自動居中了。五、這裏我只介紹這些經常使用的CSS屬性了，其餘的請參看CSS2.0中文手冊。當咱們寫好了頁面大體的DIV結構後，咱們就能夠開始細緻地對每個部分進行製做了。在上一章中咱們寫入了一些樣式，那些樣式是爲了預覽結構而寫入的，咱們把 css.css中的樣式所有清除掉，從新寫入如下樣式代碼：樣式說明： a:link,a:visited {font-size:12px;text-decoration:none;} a:hover {} 這兩項分別是控制頁面中超連接的樣式，具體我就不說明了，請你們參閱手冊。 #container {width:800px;margin:10px auto} 指定整個頁面的顯示區域。 width:800px 指定寬度爲800像素，這裏根據實際所需設定。 margin:10px auto，則是頁面上、下邊距爲10個像素，而且居中顯示。上一章中咱們講過，對層的margin屬性的左右邊距設置爲auto可讓層居中顯示。接下來，咱們開始製做TOP部分，TOP部分包括了LOGO、菜單和 Banner，首先咱們要作的就是對設計好的圖片進行切片，如下是在FW下完成的切片： ----------------------- Page 7----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 我將TOP部分切片爲兩部分，第一部分包括了 LOGO和一條橫線。因爲LOGO圖片並無太多的顏色，這裏我因而將這一部分保存爲GIF格式，調色板選擇爲精確，選擇Alpha透明度，色版爲白色(此處顏色應與背景色相同)，導出爲 logo.gif，圖像寬度爲800px。到這裏，有的朋友就說了，* 爲何要使用 GIF 格式？使用 JPEG 不是更好嗎？由於GIF格式的圖片文件更小，這樣能使頁面載入的速度更快，固然使用此格式以前必須肯定圖片並無使用太多的顏色，當咱們使用了GIF格式時，從肉眼上並不能看出圖片有什麼太大的變化，所以這是可行的。 * 接下來的 Banner 部分還能使用 GIF 格式嗎？答案是不能，由於Banner部分是一個細緻的圖片，若是使用GIF格式顏色會有太大的損失，因此必須使用JPEG格式，將文件導出爲banner.jpg。 * 合理的切片是很是之重要的，由於切片的方法正確與否決定了 CSS 書寫的簡易程度以及頁面載入速度。切好片後，咱們還須要對TOP部分進行分析並將DIV結構寫入Header中代碼如下： <div id="menu"> <ul> <li><a href="#">首頁</a></li> <li class="menuDiv"></li> ----------------------- Page 8----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. <li><a href="#">博客</a></li> <li class="menuDiv"></li> <li><a href="#">設計</a></li> <li class="menuDiv"></li> <li><a href="#">相冊</a></li> <li class="menuDiv"></li> <li><a href="#">論壇</a></li> <li class="menuDiv"></li> <li><a href="#">關於</a></li> </ul> </div> <div id="banner"> </div> 爲何要這麼寫呢，由於對菜單使用列表<li>形式，能夠在之後方便對菜單定制樣式。而爲何要添加如下代碼呢？ <li class="menuDiv"></li> 插入這一段代碼是能夠方便地對菜單選項之間插入一些分隔樣式，例如預覽圖中的豎線分隔。而後咱們在css.css中再寫入如下樣式： /*頁面頭部*/ #header {background:url(logo.gif) no-repeat} 樣式說明： #header {background:url(logo.gif) no-repeat} 給頁面頭部分加入一個背景圖片LOGO，而且不做填充。這裏，咱們沒有指定 header 層的高度，爲何不指定呢？由於header層中還有菜單和banner項，因此層的高度暫時是未知的，而層的屬性又可讓層根據內容自動設定調整，所以咱們並不須要指定高度。使用列表<li>製做菜單開始此節的學習前，請確認你已經參照以前的幾節內容寫入了DIV、CSS到 index.htm和css.css文件中。這一節我將告訴你們如何用列表<li>來製做菜單。 ----------------------- Page 9----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. <div id="menu"> <ul> <li><a href="#">首頁</a></li> <li class="menuDiv"></li> <li><a href="#">博客</a></li> <li class="menuDiv"></li> <li><a href="#">設計</a></li> <li class="menuDiv"></li> <li><a href="#">相冊</a></li> <li class="menuDiv"></li> <li><a href="#">論壇</a></li> <li class="menuDiv"></li> <li><a href="#">關於</a></li> </ul> </div> 以上是這部分的結構，有關於<ul></ul>、<li></li>這兩個HTML元素你們本身去參考相關的內容吧，它們最主要的做用就是在HTML中以列表的形式來顯示一些信息。還有一點須要你們必定要分清楚的，當在HTML中定義爲 id="divID"時，在CSS 對應的設置語法則是#divID{}，若是在HTML中定義爲class="divID"時，則在 CSS中對應的設置語法是.divID。若是 id="divID"這個層中包括了一個<img></img>，則這個img在CSS中對應的設置語法應該是#divID img {}，一樣，若是是包含在class="divID"這個層中時，則設置語法應該是.divID img {}，這一點但願你們要分清楚了。另外，HTML中的一切元素都是能夠定義的，例如table、tr、td、th、form、 img、input...等等，若是你要在CSS中設置它們，則直接寫入元素的名稱加上一對大括號{}就能夠了。全部的CSS代碼都應該寫在大括號{}中。按照上面的介紹，咱們先在css.css中寫入如下代碼： #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} 解釋一下： #menu ul {list-style:none;margin:0px;} list-style:none，這一句是取消列表前點，由於咱們不須要這些點。 margin:0px，這一句是刪除UL的縮進，這樣作可使全部的列表內容都不縮進。 ----------------------- Page 10----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. #menu ul li {float:left;} 這裏的 float:left 的左右是讓內容都在同一行顯示，所以使用了浮動屬性 (float)。到這一步，建議你們先保存預覽一下效果，咱們再添加下面的內容，效果以下：這時，列表內容是排列在一行，咱們在#menu ul li {}再加入代碼margin:0 10px #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;margin:0 10px} margin:0 10px的做用就是讓列表內容之間產生一個20像素的距離(左：10px，右：10px)，預覽的效果以下：如今，雛形已經出來了，咱們再來固定菜單的位置，把代碼改爲以下： #menu {padding:20px 20px 0 0} /*利用padding:20px 20px 0 0來固定菜單位置*/ #menu ul {float:right;list-style:none;margin:0px;} /*添加了float:right使得菜單位於頁面右側*/ #menu ul li {float:left;margin:0 10px} 這時，位置已經肯定了，但是構思圖中，菜單選項之間還有一條豎線，怎麼辦呢？別忘了，咱們早就已經留好了一個空的<li class="menuDiv"></li>，要想加入豎線就使用它了。按照上面說的方法，咱們再添加如下代碼： .menuDiv {width:1px;height:28px;background:#999} 保存預覽一下，豎線是否已經出來了？關於這段代碼就很少講了，應該是很容易理解的。 ----------------------- Page 11----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 不過，菜單選項的文字卻在頂部，咱們再修改爲如下代碼： #menu ul li {float:left;margin:0 10px;display:block;line-height:28px} 關於display:block;line-height:28px 你們能夠去參閱一下手冊，我就很少講了。效果基本上已經實現了，剩下的就是修改菜單的超連接樣式，在css.css中添加如下代碼： #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} #menu ul li a:hover{} 這個也很少說了，沒什麼好說的了，最後的效果以下：這一節裏面，主要就是想告訴你們如何使用好border 和clear 這兩個屬性。首先，若是你曾用過table製做網頁，你就應該知道，若是要在表格中繪製一條虛線該如何作，那須要製做一個很小的圖片來填充，其實咱們還有更簡單的辦法，只要在<td></td>中加入這麼一段就能夠了，你能夠試試： <div style="border-bottom:1px dashed #ccc"></div> 你們能夠再次參考手冊，而後你就能明白dashed、solid、dotted...等的做用，利用它們你能夠製做出許多效果來，實線、虛線、雙線、陰影線等等。 <div id="banner"></div> 以上代碼即可以實現設計草圖中的banner，在css.css中加入如下樣式： #banner { background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/ width:730px; /*設定層的寬度*/ margin:auto; /*層居中*/ height:240px; /*設定高度*/ border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實線*/ clear:both /*清除浮動*/ } 經過border很容易就繪製出一條實線了，而且減小了圖片下載所佔用的網絡資 ----------------------- Page 12----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 源，使得頁面載入速度變得更快。另外一個要說明的就是clear:both，表示清除左、右全部的浮動，在接下來的局中咱們還會用這個屬性：clear:left/right。在這裏添加clear:both是因爲以前的ul、li元素設置了浮動，若是不清除則會影響banner層位置的設定。 <div id="pagebody"> <div id="sidebar"> </div> <div id="mainbody"> </div> </div> 以上是頁面主體部分，咱們在css.css中添加如下樣式： #pagebody { width:730px; /*設定寬度*/ margin:8px auto; /*居中*/ } #sidebar { width:160px; /*設定寬度*/ text-align:left; /*文字左對齊*/ float:left; /*浮動居左*/ clear:left; /*不容許左側存在浮動*/ overflow:hidden; /*超出寬度部分隱藏*/ } #mainbody { width:570px; text-align:left; float:right; /*浮動居右*/ clear:right; /*不容許右側存在浮動*/ overflow:hidden } 爲了能夠查看到效果，建議在#sidebar和#mainbody中加入如下代碼，預覽完成後能夠刪除這段代碼： border:1px solid #E00; height:200px 保存預覽效果，能夠發現這兩個層完美的浮動，在達到了咱們佈局的要求，而兩個層的實際寬度應該160+2(border)+570+2=734px，已經超出了父層的寬度，因爲clear的緣由，這兩個層纔不會出現錯位的狀況，這樣可使咱們佈局的 ----------------------- Page 13----------------------- Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 頁面不會由於內容太長（例如圖片）而致使錯位。而以後添加的overflow:hidden則可使內容太長（例如圖片）的部份自動被隱藏。一般咱們會看到一些網頁在載入時，因爲圖片太大，致使佈局被撐開，直到頁面下載完成才恢復正常，經過添加overflow:hidden就能夠解決這個問題。 CSS中每個屬性運用得當，就能夠解決許多問題，或許它們與你在佈局的頁並無太大的關係，可是你必須知道這些屬性的做用，在遇到難題的時候，可以嘗試使用這些屬性去解決問題。若是對您有幫助，請頂一個！文章來源：藍色理想，感謝做者的無私奉獻，現在的互聯網上淨化愈來愈少。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。