網頁首頁製作總結（div+css+javascript）

標籤：border   link   idt   傳參數   round   顯示   輪播   編輯   padding   

一、對網頁整體布局，分幾個版塊

如所示：

　　確定布局之後，規劃好網頁，準備素材，按照標準文檔流的順序，從上到下，從左至右寫入代碼。

　　以為例，分為兩部分，紅色的主體部分和頁尾。主體部分分割為頭部、左邊和右邊三部分。對於每一個div和其css樣式，寫明注釋，標明開始和結束！可參照論文標題的分級，1→1.1→1.1.1。

　　div為塊狀元素，佔據一行，若不進行浮動，脫離標準文檔流，左邊部分和右邊部分不可能並排；既然有浮動，就必須清除浮動來關閉"開關"，否則會影響後面內容的排版。清除浮動有三種方式：設定高度；空的<div class="clear"></div>；overfloat:hidden主要用於無序列表。

　　接下來就是往主體的這三大div內部寫入代碼。（為了方便對應地書寫css樣式，可以建立一個css檔案引入。用sublime編輯時，兩列顯示，左邊是HTML，右邊是css。）

二、如果內容較多，可以使用固定在頂部的導覽列，再加上一個固定在右下角的回到頂部的按鈕。

三、首先清零，即清除所有HTML標記的內外邊距；其次，可以設定body的color、font-size:12px、background:url repeat-x #F1F1F1等。

四、定義通用的全域的類名：floatL、floatR、clear、a:link,a:visited{color:#444;text-decoration:none}、a:hover{color:#f00;text-decoration:underline}、

li{list-style:none}、.over{overflow:hidden}等。

五、注意繼承性和優先順序：{屬性：屬性值   !important；}，但它無法提升繼承過來的屬性的權重！IE6不支援！也可以給其行內樣式style加屬性值來提升優先順序。

六、理解盒子模型：盒子之間為外邊距margin，內填充padding，盒子邊框border，width和height表示內容的寬高。實際操作中可以把邊框先設定出來，方便辨識。能用父元素的padding，盡量少用子項目的margin。margin會把內容撐開，寬度高度增大。文字右移可以用文本text的縮排，text-indent：20px。盒子置中，設定寬度，margin:10px auto。設定文字的高度和line-height值相等，可實現文字垂直方向置中。

七、注意塌陷現象和空白摺疊。不在標準文檔流裡面的盒子是沒有塌陷現象的。

八、display:block   行轉為塊     |    display:inline       塊轉為行。（把a標籤轉為塊元素，可以給其加寬高。a標籤的href可以設定為"#"或者"javascript:void(0)"，前者有跳轉，後者純粹有手勢，無跳轉功能）

九、雪碧圖的使用：使用絕對位置與相對定位（"子絕父相"）

十、滾動公告、滾動圖片

　　首先想到的是跑馬燈marquee來實現，非常簡單。還有的就是用JS代碼來實現，通過scrollLeft的不斷累加或者往文字前面不斷加空格，將多出的部分進行隱藏，定時器來控制，較為複雜，據說是無縫滾動，我也不清楚跟marquee的區別在哪，測試了一下，好像也沒什麼不同，可能是瀏覽器安全色性的原因吧。還有一種是將前面的li追加到後面去，實現文字的變換。

十一、圖片輪播

　　

　　以上的思路在實現的時候需要解決幾個問題：1、在第一張圖到第二張圖切換的時候，間隔有點長；2、在滑鼠放上、離開，圖片會越來越快；3、li標記是傳參數過去的，圖片是沒有傳參數的。解決1，決定圖片是哪張的n從2開始；解決2，讓滑鼠放上和離開的定時器傳回值跟最開始設定定時器的傳回值一致；解決3，if語句，讓穿參的走if語句裡面，沒有傳參的不用管，因為最後都是要清除定時器的。

　　也可以是將圖片移動到顯示視窗之外，不斷地切換下一張圖；也可以是將上一張圖片覆蓋，讓後面的圖片壓蓋住前面的圖；然而，現在使用外掛程式，非常方便地拿來用！

十二、伸縮菜單

十三、選項卡切換

 　　另：大話主席外掛程式效果和bootstrap的柵格系統可以快速製作精美簡單的網頁！（似乎現在比較麻煩的都能找到外掛程式來直接使用。。。）

網頁首頁製作總結（div+css+javascript）