步驟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; /*文字顏色*/ }