css+div 今日總結

忙碌了一段時間，前端介面學到不少知識。記錄下，自己的所思所想所感...

1.網頁布局、背景色以及整體風格

       網頁布局常用的布局是頂部（top）、底部(footer)、中間部分(center)。頂部一般是標題（title）和菜單(menu),菜單一級菜單和二級菜單，二級菜單的樣式方面有多中變化，一般體現在滑鼠懸浮，滑鼠點擊時的字型顏色的更改和局部背景顏色的更改，沒有特殊情況，頂部和頭部每個網頁都會用到，把他們寫成2個jsp檔案，那個頁面需要用到，就引用。

引用jsp檔案代碼如下：

      <jsp:include  page= "../include/init.jsp"  flush= "true" />   page是jsp檔案的路徑
引用css檔案代碼如下：

     <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/default/style/resourceConfig.css" />

       href是css檔案的路徑；request.getContextPath()是當前檔案所在的根目錄

在css檔案中引用css檔案的代碼：

@import url(base.css);

      背景色決定了網頁的整體風格。為了適應瀏覽器的打下，故背景圖片不可設定成固定的寬度，高度可以固定，因為切圖的時候把背景圖片切成寬度是1px,高度是實際高度的圖片，樣式設定成x軸方向重複。網頁的整個背景最好在body裡面設定(body設定網頁的字型 顏色 置中等等。).例如：

body{
    background:url(../images/bodyBg_01.png) left top repeat-x #ececba;
    margin:0;
    padding:0;
    font-family:"微軟雅黑";
 }

div,p,ul,h1,h2,h3,h4,h5,h6{padding:0;margin:0;}

margin:0;設定body的上下左右邊距都是0.

margin:0 aut0;設定對象置中，原理是設定對象的上下邊距是0，左右的邊距auto，auto就是左右的邊距是一樣的，那麼對象自動置中。

2.css檔案的書寫技巧

    css+div布局就是為了實現內容和樣式的徹底分離，設定網頁的整體風格寫成一個base.css檔案，存放整體風格的樣式代碼。