步驟9│購物相關設定
- 文章分類: 學XLOG
- 5/10/2018
※上方按鈕請按右鍵下載
請點選以下連結觀看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; /*文字顏色*/
}