步驟5│強調框架設定
- 文章分類: 學XLOG
- 9/28/2010
※上方按鈕請按右鍵下載
請點選以下連結觀看CSS語法設定
以下為各項目設定方式說明:
{ margin:5px 0; /*自訂欄位最外層 - 外距設定依序為 上下 / 左右*/ width:194px; /*自訂欄位最外層 - 寬度*/ }
{ text-align:center; /*自訂欄位標題 - 文字置中*/ padding:3px 5px; /*自訂欄位標題 - 內距設定依序為 上下 / 左右*/ margin:5px 0px 0px 0px; /*自訂欄位標題 - 外距設定依序為 上 / 右 / 下 / 左*/ background:#bbe0ec; /*自訂欄位標題 - 背景色*/ }
{ color:#476b84; /*自訂欄位內容 - 文字顏色*/ padding-bottom:5px; /*自訂欄位內容 - 下方內距設定*/ }
{
padding-top:8px; /*自訂欄位無序清單 - 上方內距設定*/
}
{ line-height:17px; /*自訂欄位無序清單項目 – 行高設定*/ padding:6px 0; /*自訂欄位無序清單項目 – 內距設定依序為 上下 / 左右*/ Border-bottom:2px #bbe0ec solid; /*自訂欄位無序清單項目 – 框線設定依序為 寬度 / 顏色 /樣式*/ }
{
color:#476b84; /*自訂欄位連結文字 - 文字顏色*/
}
{
display:none; /*logo 標題 - 顯示方式*/
}
{
text-align:center; /*logo 內容 - 文字置中*/
}
{
display:none; /*搜尋欄位 標題 - 顯示方式*/
}
{
margin-top:15px; /*搜尋欄位 內容 - 上方外距設定*/
}
{ width:190px; /*搜尋欄位 文字方塊 - 寬度*/ border:none; /*搜尋欄位 文字方塊 - 框線設定*/ background:#fff; /*搜尋欄位 文字方塊 - 背景顏色*/ }
{ padding-top:5px; /*搜尋欄位 按鈕 - 上方內距*/ width:194px; /*搜尋欄位 按鈕 - 寬度*/ text-align:center; /*搜尋欄位 按鈕 - 文字置中*/ }
{
padding-top:5px; /*會員欄位 - 上方內距*/
}
{
height:150px; /*會員欄位 內容 - 高度*/
}
{ width:190px; /*會員欄位 文字方塊 - 寬度*/ margin-top:5px; /*會員欄位 文字方塊 - 上方外距*/ border:none; /*會員欄位 文字方塊 - 框線設定*/ background:#fff; /*會員欄位 文字方塊 - 背景顏色*/ }
{ padding-top:5px; /*會員欄位 按鈕 - 上方內距*/ width:194px; /*會員欄位 按鈕 - 寬度*/ height:50px; /*會員欄位 按鈕 - 高度*/ }
{ float:left; /*會員欄位 按鈕 - 浮動靠左*/ margin-left:4px; /*會員欄位 按鈕 - 左方外距*/ }
{
padding-top:15px; /*購物車欄位 - 上方內距*/
}
{ background:#ddd; /*按月份搜尋欄的下拉式選單 - 背景顏色*/ width:194px; /*按月份搜尋欄的下拉式選單 - 寬度*/ text-align:center; /*按月份搜尋欄的下拉式選單 - 文字置中*/ }
{
display:none; /*月曆標題 - 顯示方式*/
}
{
color:#5cb7ff; /*月曆連結 - 文字顏色*/
}
{
text-align:center; /*月曆表格 - 文字置中*/
}
{ margin-top:15px; /*月曆 內容 - 上方外距*/ width:194px; /*月曆 內容 - 寬度*/ }
{
display:none; /*按月份搜尋欄標題 - 顯示方式*/
}