步驟7│內容設定
- 文章分類: 學XLOG
- 9/28/2010
※上方按鈕請按右鍵下載
請點選以下連結觀看CSS語法設定
以下為各項目設定方式說明:
.main-title { padding:10px 0; /*內距依序設定為 上下 / 左右*/ width:721px; /*寬度*/ float:left; /*浮動靠左*/ } .main-subtitle { padding:5px 0px; /*內距依序設定為 上下 / 左右*/ } .main-subtitle ul li { display:inline; /*顯示方式*/ margin-right:32px; /*右方外距*/ } .main-body { margin:5px 0px; /*外距依序設定為 上下 / 左右*/ width:721px; /*寬度*/ float:left; /*浮動靠左*/ } .main-textbox { width:470px; /*寬度*/ }
.articlelist { width:721px; /*寬度*/ float:left; /*浮動靠左*/ } .articlelist .main-body { min-height:140px; /*最小高度*/ } .articlelist .main-body .art-picture { padding:3px; /*內距*/ } #replylist { width:721px; /*寬度*/ float:left; /*浮動靠左*/ } #replylist .main-body { padding-bottom:10px; /*下方內距*/ } #Quick-Reply { width:721px; /*寬度*/ float:left; /*浮動靠左*/ } #Quick-Reply .main-title { padding:3px 0; /*內距設定依序為 上下 / 左右*/ } #Quick-Reply .main-body {} #Quick-Reply .main-button-div { text-align:right; /*文字齊右*/ padding-right:15px; /*右方內距*/ margin:5px 0; /*外距設定依序為 上下 / 左右*/ } #Quick-Reply textarea { width:630px !important; /*寬度*/ }
#photolist { width:721px; /*寬度*/ float:left; /*浮動靠左*/ } #photolist table { margin-top:10px; /*上方外距*/ text-align:center; /*文字置中*/ } #photolist table tr td { width:25%; /*寬度*/ } #photolist img { border:4px #ebf6f9 solid; /*框線設定依序為 寬度 / 顏色 / 樣式*/ } #albumlist { width:721px; /*寬度*/ float:left; /*浮動靠左*/ } #albumlist table { text-align:center; /*文字置中*/ } #albumlist .odd, #albumlist .even { width:157px; /*寬度*/ } #albumlist .main-title { width:157px; /*寬度*/ float:left; /*浮動靠左*/ } #albumlist .main-subtitle { width:157px; /*寬度*/ } #albumlist .main-subtitle ul { text-align:left; /*文字置左*/ } #albumlist .main-subtitle ul li { display:block; /*顯示方式*/ } #albumlist img { border:4px #ebf6f9 solid; /*框線設定依序為 寬度 / 顏色 / 樣式*/ } #albumdetail { width:721px; /*寬度*/ float:left; /*浮動靠左*/ } #albumdetail table { margin-top:10px; /*上方外距*/ text-align:center; /*文字置中*/ } #albumdetail table tr td { width:25%; /*寬度*/ } #albumdetail img { border:4px #ebf6f9 solid; /*框線設定依序為 寬度 / 顏色 / 樣式*/ }