選擇 “全局 頁頭二級導航欄廣告(1)”

2.按照指示填寫資料與上傳圖片

回到首頁就會看到囉

 .wp { margin: 0 auto; width: 960px; }

更改為您需要的寬度

.wp { margin: 0 auto; width: 983px; }

更新css緩存

在body下增加以下程式碼

2.打開 template\default\common\footer.htm

在</body>結尾前 增加以下程式碼

3.打開路徑 template\default\common\common.css

新增以下內容

.my_bg2{background: url({IMGDIR}/bg2.png);
 background-repeat: no-repeat;
 background-position: center top;
 
}

4.更新css緩存

5.新增的背景就完成囉

2.輸入圖片名稱，並將圖片存到 static\image\common目錄下面

3.logo出來囉，但太靠右邊了，沒對其，還要調整一下位置

4.打開路徑 template\default\common\common.css

將css中

.hdc { position: relative; z-index: 3; min-height: 70px; background: {HEADERBGCOLOR}; }
    .ie6 .hdc { height: 70px; }
   #hd h2 { padding: 0 20px 8px 0; float: left; }

更改為

.hdc { position: relative; z-index: 3; min-height: 82px; background: {HEADERBGCOLOR}; }
    .ie6 .hdc { height: 82px;  }
   #hd h2 {
 float: left;
 position: absolute; /*浮動起區塊*/
 left: -38px; /*往左負*/
 height: 82px; /*設定圖片高度*/ padding-top: 0;
 padding-right: 20px;
 padding-bottom: 8px;
 padding-left: 0;
}

5.更新css緩存

位置就調整好囉

2.輸入圖片名稱，並將圖片存到 static\image\common目錄下面

就完了囉

http://psd.tutsplus.com/category/tutorials/

文字變化
{
color: #ffffff; /*文字顏色*/;
font-family: 微軟正黑體; /*文字字型*/;
font-size: 9pt; /*文字大小*/;
font-style: italic; /*文字斜體*/;
font-variant: small-caps; /*小字體*/;
letter-spacing: 1pt; /*字體間距離*/;
line-height: 200%; /*設定行高*/;
font-weight: bold; /*文字粗體*/;
vertical-align: sub; /*下標字*/;
vertical-align: super; /*上標字*/;
text-decoration: line-through; /*加刪線*/;
text-decoration: overline; /*加頂線*/;
text-decoration: underline; /*加底線*/;
text-decoration: none; /*刪除連結底線*/;
text-transform: capitalize; /*字首大寫*/;
text-transform: uppercase; /*英文大寫*/;
text-transform: lowercase; /*英文小寫*/;
text-align: right; /*文字靠右對齊*/;
text-align: left; /*文字靠左對齊*/;
text-align: center; /*文字置中對齊*/;
text-align: justify; /*文字分散對齊*/;
word-spacing: 5px; /*半形空格的間距*/;
vertical-align: top; /*垂直向上對齊*/;
vertical-align: bottom; /*垂直向下對齊*/;
vertical-align: middle; /*垂直置中對齊*/;
vertical-align: text-top; /*文字垂直向上對齊*/;
vertical-align: text-bottom; /*文字垂直向下對齊*/;
}

項目符號及編號
{
list-style-type: none; /*不編號*/;
list-style-type: decimal; /*阿拉伯數字*/;
list-style-type: lower-roman; /*小寫羅馬數字*/;
list-style-type: upper-roman; /*大寫羅馬數字*/;
list-style-type: lower-alpha; /*小寫英文字母*/;
list-style-type: upper-alpha; /*大寫英文字母*/;
list-style-type: disc; /*實心圓形符號*/;
list-style-type: circle; /*空心圓形符號*/;
list-style-type: square; /*實心方形符號*/;
list-style-image: url(dot.gif); /*圖片式符號*/;
list-style-position: outside; /*凸排*/;
list-style-position: inside; /*縮排*/
}

背景樣式
{
background-color: #F5E2EC; /*背景色彩*/;
background: transparent; /*透視背景*/;
background-image : url(image/bg.gif); /*背景圖片*/;
background-attachment : fixed; /*浮水印固定背景*/;
background-repeat : repeat; /*重複排列-網頁預設*/;
background-repeat : no-repeat; /*不重複排列*/;
background-repeat : repeat-x; /*在x軸重複排列*/;
background-repeat : repeat-y; /*在y軸重複排列*/;
background-position : 90% 90%; /*背景圖片x與y軸的位置*/;
background-position : top; /*向上對齊*/ ;
background-position : bottom; /*向下對齊*/ ;
background-position : left; /*向左對齊*/ ;
background-position : right; /*向右對齊*/ ;
background-position : center; /*置中對齊*/;
}

滑鼠樣式變化
{
cursor: progress;/*作業中*/;
cursor: crosshair;/*十字型 */;
cursor: n-resize;/*箭頭朝上*/;
cursor: s-resize;/*箭頭朝下*/;
cursor: move;/*十字箭頭*/;
cursor: e-resize;/*箭頭朝右*/;
cursor: w-resize;/*箭頭朝左*/;
cursor: help;/*加一問號*/;
cursor: nw-resize;/*箭頭朝左上*/;
cursor: se-resize;/*箭頭斜右下*/;
cursor: text;/*文字I型*/;
cursor: sw-resize;/*箭頭斜左下*/;
cursor: ne-resize;/*箭頭朝右上*/;
cursor: wait;/*漏斗*/;
cursor: pointer;/*手型*/;
cursor: not-allowed;/*無法使用 */;
cursor: url(“游標檔名.cur”),text;;/*游標圖案*/;
}

框線變化
{
border-top:/*上框線*/;
border-bottom:/*下框線*/;
border-left:/*左框線*/;
border-right:/*右框線*/;
border:/*四邊框線*/;
}

框線樣式
solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內凸框*/
ridge /*立體浮凸框*/
inset /*凹框*/
outset /*凸框*/

框線樣式解說
例 border: 1px solid #6699cc;

邊界樣式
{
margin-top: 10px; /*上邊界*/;
margin-right: 10px; /*右邊界值*/;
margin-bottom: 10px; /*下邊界值*/;
margin-left: 10px; /*左邊界值*/;
margin: 10px; /*四邊邊界值*/;
}

邊框空白
{
padding-top: 10px; /*上邊框空白*/;
padding-right: 10px; /*右邊框空白*/;
padding-bottom: 10px; /*下邊框空白*/;
padding-left: 10px; /*左邊框空白*/;
}

物件定位
{
position: relative;top: 10px;left: 10px; /*物件左上角開始位置*/ ;
position : absolute;top: 10px;left: 10px; /*網頁左上角開始位置*/;
}

透明

Min-Height  (最小高度)

 {
min-height:500px;
height:auto; !important
height:500px;
}

PRE Tag (標籤預格式)

ie 、firefox 瀏覽器支援的字體 ，多小都可以呈現

google 最小支援到12px

 IE6的雙倍邊距BUG

浮動後本來外邊距10px，但IE解釋為20px，解決辦法是加上display:inline

讓層顯示在FLASH之上

給FLASH設置透明<param name=”wmode” value=”transparent” />或者<param name=”wmode” value=”opaque” />

 垂直居中

line-height:24px

不斷行

white-space:nowrap;

刪除鏈接上的虛線框

a:active, a:focus {
    outline:none;
}

http://livevalidation.com/examples

我覺得還蠻頂尖的設計公司