步驟9│購物相關設定



※上方按鈕請按右鍵下載


請點選以下連結觀看CSS語法設定

以下為各項目設定方式說明:

#shoppingCart
{
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
}
#shoppingCart table
{
    margin-top:10px;        /*上方外距設定*/
    text-align:left;            /*文字齊左*/
}
#shoppingCart .imagecontainer
{
    text-align:center;            /*文字置中*/
    padding-top:8px;        /*上方內距設定*/
}
#shoppingCart .main-button-div
{
    text-align:right;            /*文字齊右*/
}
#shoppingCart td
{
    background:#e4f4ff;        /*背景顏色*/
    padding:5px;            /*內距*/
    text-align:center;            /*文字置中*/
}
#shoppingCart td a
{
    color:#00455b;            /*文字顏色*/
}
#shoppingCart .tr-heading .general-right
{
    background:#5199c7;    /*背景顏色*/
    color:#fff;                /*文字顏色*/
}
#shoppingCart .tr-heading .numbering
{
    background:#5199c7;    /*背景顏色*/
    color:#fff;                /*文字顏色*/
}
#shoppingCart .main-button-div
{
    margin:5px 0;            /*外距設定依序為 上下 / 左右*/
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
    text-align:right;            /*文字齊右*/
}
#shoppingCart .main-button-div .i-button
{
    width:auto;                /*寬度*/
    float:right;                /*浮動靠右*/
}
#order-confirmation
{
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
}
#order-confirmation .imagecontainer
{
    text-align:center;            /*文字置中*/
}
#order-confirmation td
{
    background:#e4f4ff;        /*背景顏色*/
    color:#282828;            /*文字顏色*/
    text-align:center;            /*文字置中*/
}
#order-confirmation td a
{
    color:#00455b;            /*文字顏色*/
}
#order-confirmation .main-button-div
{
    margin:5px 0;            /*外距設定依序為 上下 / 左右*/
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
    text-align:right;            /*文字齊右*/
}
#order-confirmation .main-button-div .i-button
{
    width:auto;                /*寬度*/
    float:right;                /*浮動靠右*/
}
#order-finish
{
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
}
#order-finish h2
{
    padding-top:5px;        /*上方內距設定*/
}
#order-history
{
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
}
#order-history table
{
    padding-top:5px;        /*上方內距設定*/
}
#order-history td
{
    background:#e4f4ff;        /*背景顏色*/
    color:#282828;            /*文字顏色*/
}
#shipping-info
{
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
}
#shipping-info tr
{
    background:#e4f4ff;        /*背景顏色*/
    color:#282828;            /*文字顏色*/
    text-align:center;            /*文字置中*/
}
#shipping-info td
{
    text-align:left;            /*文字齊左*/
}
#shipping-info td a
{
    color:#00455b;            /*文字顏色*/
}
#shipping-info .tr-heading
{
    width:100px;                /*寬度*/
}
#shipping-info .inputbox input
{
    width:500px;                /*寬度*/
}
#shipping-info .main-button-div
{
    margin:5px 0;            /*外距設定依序為 上下 / 左右*/
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
    text-align:right;            /*文字齊右*/
}
#shipping-info .main-button-div .i-button
{
    width:auto;                /*寬度*/
    float:right;                /*浮動靠左*/
}
#personal-profile
{
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
}
#personal-profile form
{
    padding-top:5px;        /*上方內距設定*/
}
#personal-profile tr
{
    background:#e4f4ff;        /*背景顏色*/
    color:#282828;            /*文字顏色*/
}
#personal-profile .main-button-div
{
    width:721px;                /*寬度*/
    text-align:center;            /*文字置中*/
}
#personal-profile .tr-heading
{
    width:100px;                /*寬度*/
}
#personal-profile .inputbox input
{
    width:500px;                /*寬度*/
}
#Receipt
{
    width:721px;                /*寬度*/
    float:left;                /*浮動靠左*/
}
#Receipt table
{
    padding-top:5px;        /*上方內距設定*/
}
#Receipt td
{
    background:#e4f4ff;        /*背景顏色*/
    color:#282828;            /*文字顏色*/
    text-align:center;            /*文字置中*/
}
#Receipt .tr-heading
{
    background:#3a85b5;    /*背景顏色*/
    color:#fff;                /*文字顏色*/
}
#Receipt td a
{
    color:#00455b;            /*文字顏色*/
}