cssdiv初級教程-資料下載頁
2024-08-21 15:27本頁面
【導讀】根結底還是由于沒有入門造成的。那么接下來的這篇文章就帶領大家入門吧...在網頁制作中，有許多的術語，例如：CSS、HTML、DHTML、XHTML等等。下面我們就開始一步一步使用DIV+CSS進行網頁布局設計吧。所有的設計第一步就是構思，構思好了，一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或。FW)等圖片處理軟件將需要制作的界面布局簡單的構畫出來，以下是我構思好的界面布局圖。根據(jù)上圖，我再畫了一個實際的頁面布局圖，說明一下層的嵌套關系，這樣理解起來就會更簡單了。至此，頁面布局與規(guī)劃已經完成，接下來我們要做的就是開始書寫HTML代碼和CSS。這是XHTML的基本結構，將其命名為，另一個記事本文檔則命名為。說明上下邊距為0px，左右為自動調整；只不過各自表示的含義不相同，margin是外部距離，而padding則是內部距離。設置背景色為白色，這里顏色使用了縮寫，完整的應該是background:#FFFFFF。
【正文】 碼： 程序代碼 menu ul li a:link,menu ul li a:visited {fontweight:bold。color:666} menu ul li a:hover{} 這個也不多說了，沒什么好說的了，最后的效果如下： 四、頁面制作 (1)用好 border 和 clear 這一節(jié)里面，主要就是想告訴大家如何使用好 border 和 clear 這兩個 屬性。 首先，如果你曾用過 table 制作網頁，你就應該知道，如果要在表格中繪制一條虛線該如何做，那需要制作一個很小的圖片來填充，其實我們還有更簡單的辦法，只要在 td/td中加入這么一段就可以了，你可以試試： div style=borderbottom:1px dashed ccc/div 大家可以再次參考手冊，然后你就能明白 dashed、 solid、 dotted...等的作用，利用它們你可以制作出許多效果來，實線、虛線、雙線、陰影線等等。 程序代碼 div id=banner/div 以上代碼便可以實現(xiàn)設計草圖中的 banner，在 中加入以下樣式： 程序代碼 banner { background:url() 0 30px norepeat。 /*加入背景圖片 */ width:730px。 /*設定層的寬度 */ margin:auto。 /*層居中 */ height:240px。 /*設定高度 */ borderbottom:5px solid EFEFEF。 /*畫一條淺灰色實線 */ clear:both /*清除浮動 */ } 通過 border 很容易就繪制出一條實線了，并且減少了圖片下載所占用的網絡資源，使得頁面載入速度變得更快。 另一 個要說明的就是 clear:both，表示清除左、右所有的浮動，在接下來的布局中我們還會用這個屬性： clear:left/right。在這里添加 clear:both是由于之前的 ul、 li元素設置了浮動，如果不清除則會影響 banner層位置的設定。 程序代碼 div id=pagebody!頁面主體 div id=sidebar!側邊欄 /div div id=mainbody!主體內容 /div /div 以上是頁面主體部分，我們在 中添加以下樣式： 程序代碼 pagebody { width:730px。 /*設定寬度 */ margin:8px auto。 /*居中 */ } sidebar { width:160px。 /*設定寬度 */ textalign:left。 /*文字左對齊 */ float:left。 /*浮動居左 */ clear:left。 /*不允許左側存在浮動 */ overflow:hidden。 /*超出寬度部分隱藏 */ } mainbody { width:570px。 textalign:left。 float:right。 /*浮動居右 */ clear:right。 /*不允許右側存在浮動 */ overflow:hidden } 為了可以查看到效果，建議在 sidebar 和 mainbody 中加入以下代碼，預覽完成后可以刪除這段代碼： 程序代碼 border:1px solid E00。 height:200px 保存預覽效果，可以發(fā)現(xiàn)這兩個層完美的浮動，在達到了我們布局的要 求，而兩個層的實際寬度應該160+2(border)+570+2=734px，已經超出了父層的寬度，由于 clear 的原因，這兩個層才不會出現(xiàn)錯位的情況，這樣可以使我們布局的頁面不會因為內容太長（例如圖片）而導致錯位。 而之后添加的 overflow:hidden 則可以 使內容太長（例如圖片）的部 份自動被隱藏 。通常我們會看到一些網頁在載入時，由于圖片太大，導致布局被撐開，直到頁面下載完成才恢復正常，通過添加overflow:hidden 就可以解決這個問題。 CSS 中每一個屬性運用得當，就可以解決許多問題，或許它們與你在布局的頁并沒有太大的關系，但是你必須知道這些屬性的作用，在遇到難題的時候，可以嘗試使用這些屬性去解決問題。 源文件可以再下一節(jié)中再次下載。
醫(yī)療健康相關推薦
鄂ICP備17016276號-1