下面語法是從CSS達人那邊摘取的
希望有連結的朋友都能夠附上資料來源的網址
畢竟達人要把這麼多的字母  KEY 上去
真的很辛苦


 http://www.wretch.cc/hala/viewtopic.php?t=420832



---------------------------請告訴我.還有哪裡要改進-----/*相簿常用的修改*/ 

{;/*測試用藍色虛線框框*/border:2px #AC55FF dashed ! important;}
{;/*測試用綠色大號文字*/font-size: 52px ! important;color: #00A002 ! important;}

/*如何玩CSS標籤*/
當你看到了一個不認識的標籤.例如:#banner a 你就把那個標籤
放在這裡{;/*測試用藍色虛線框框*/border:2px #AC55FF dashed ! important;}
#banner a {;/*測試用藍色虛線框框*/border:2px #AC55FF dashed ! important;}
存檔.回到畫面上.看哪個物件多了一個藍色虛線框框...哦.加入功能調整....
它也可能不是個物件.而是個原則參考.例如:tr td font.small-c 你就把那個標籤
放在這裡{;/*測試用綠色大號文字*/font-size: 52px ! important;color: #00A002 ! important;}
tr td font.small-c {;/*測試用綠色大號文字*/font-size: 52px ! important;color: #00A002 ! important;}
存檔.回到畫面上.看哪個物件變成綠色大號文字...哦.加入功能調整....
你可以用著個方法快速學會或擋掉不爽看到的任何CSS標籤物件

有許多標籤功能標籤是重疊相通的(CSS本來就是金字塔式的)
那麼我門要如何抽掉其中一層呢?
例如隱藏相片張數.先找到
b .small-c /*(共同標籤)相簿張數.相簿名稱.密碼鎖圖含NEW圖*/
/*保留隱藏*/b .small-c{visibility:hidden;}
/*然後*/
/*相簿名稱還原顯示*/b .small-c a {visibility:visible ! important;}
/*密碼鎖還原顯示*/font.small-c a img{visibility:visible ! important;}
/*NEW圖還原顯示*/b font.small-c img.newAlbumUpdate{visibility:visible ! important;}

例如隱藏人氣.先找到
tr td font.small-c /*(共同標籤)相簿頁數.相簿名稱.相簿張數.相簿容量.封面照片四字.點進相片日期.相簿人氣*/
/*保留隱藏*/tr td font.small-c {visibility:hidden;}
/*然後*/
/*還原顯示相簿容量和2.3下一頁*/
HTML BODY TABLE TR TD CENTER FONT A {visibility:visible ! important;}
/*還原顯示相簿名稱.相片張數*/
b .small-c{ visibility:visible ! important;}
/*還原顯示相簿封面照片那四個字*/
td.side font.small-c { visibility:visible ! important;}
/*還原顯示點進相片日期*/
HTML BODY TABLE TR TD FONT.small-c STRONG { visibility:visible ! important;}

希望樣式設計者能明白.美不美只差十分.能不能用是差六十分.
任何項目的移動(包含小零件).
如果你從左邊大偏到中間或右邊.或從右邊大偏到到中間或左邊.或從中間靠到右邊與左邊.
那麼在別人的瀏覽器裡看到的你注定要"跑框"
建議你能從別人的觀點來調整別人能接受的畫面
例如: 950請用"右邊減回RIGHT:50".否則他家如果是別種瀏覽器那你就跑框了....
例如: 50請不要不要用中間減450........請用"左邊加LIFT:50"
例如: 400或 600請用"中間減RIGHT:100或加LIFT:100"
原則上:不要用大數字.請用"左.中.右邊加或減一點點."
啊都靠左邊吼做推推margin-RIGHT : **px;靠右邊吼做推推margin-LIFT : **px;


/*一般的瀏覽器雙語法主體靠中偏右*/
body{
width:652px;
margin: 1 auto 1 232px;
*margin-left: 102px;}

/*整體區塊的中心點與畫面的中心點重疊時為 0 */
/*不用再算了啦.整組拿去用吧*/

/*要整組一起用喔*/
/*整體位置在中間*/body{/*寬度*/width:650px;
/*火狐位置的中間*/margin: 0 auto 0 auto ;
/*IE7的 0px中間*/ *margin-left: 0px;}


/*整體位置在中間靠右px50*/body{/*寬度;twohand2012;*/width:650px;
/*火狐位置的中間靠右px50*/margin: 0 auto 0 225 ;
/*IE7的 0px中間靠右px50*/ *margin-left: 100px;}

/*整體位置在中間靠右px100*/body{/*寬度;twohand2012;*/width:650px;
/*火狐位置的中間靠右px100*/margin: 0 auto 0 275 ;
/*IE7的 0px中間靠右px100*/ *margin-left: 200px;}

/*整體位置在中間靠右px150*/body{/*寬度;twohand2012;*/width:650px;
/*火狐位置的中間靠右px150*/margin: 0 auto 0 325 ;
/*IE7的 0px中間靠右px150*/ *margin-left: 300px;}

/*整體位置在中間靠左px50*/body{/*寬度;twohand2012;*/width:650px;
/*火狐位置的中間靠左px50*/margin: 0 225 0 auto ;
/*IE7的 0px中間靠左px50*/ *margin-right: 100px;}

/*整體位置在中間靠左px100*/body{/*寬度;twohand2012;*/width:650px;
/*火狐位置的中間靠左px100*/margin: 0 275 0 auto ;
/*IE7的 0px中間靠左px100*/ *margin-right: 200px;}

/*整體位置在中間靠左px150*/body{/*寬度;twohand2012;*/width:650px;
/*火狐位置的中間靠左px150*/margin: 0 325 0 auto ;
/*IE7的 0px中間靠左px150*/ *margin-right: 300px;} 



---------------------------------------請告訴我.還有哪裡要改進------------- 
相簿和相簿之間左右的距離縮小
/*桌面寬度*/ table {width: 550px;}
/*不含點入第三頁相片桌面寬度*/form table {width: 650px;}
(兩個一起用.只有第三頁是距離縮小550px.)
橫幅和連結列要"寬回來"請在下方語法設定. 



---------------------------------------請告訴我.還有哪裡要改進------------- 
解決跑框的問題
當你設定了一個寬度{width: 100px;}
而你又希望在文字前放朵小花{padding-left:20px;}
那麼這段語法"理所當然是"{padding-left:20px;width: 80px;}
可是當你想換小花再配合尾端佈景縮減{padding-left:17px;width: **px;padding-right:36px;}
或者你隨時想更動小花甚至文字本身時怎麼辦呢?
一組同時使用的雙語法{
/*火狐的寬度*/width: 47px;padding-left:17px;padding-right:36px;
/*IE7的寬度*/ *width: 100px;}
(以上兩種結果是一樣的) 



---------------------------------------請告訴我.還有哪裡要改進------------- 
/*文字字型基本參考選一*/ A {font-family: 細明體,新細明體,標楷體,,,,,,,,Georgia,verdana,arial,helvetica,sans-serif;}
/*橫幅標題文字字型基本參考選一*/#banner a {font-family: 細明體,新細明體,標楷體,,,,,,,,Georgia,verdana,arial,helvetica,sans-serif;}
/*相片名稱和張數文字字型基本參考選一*/ b .small-c{font-family: 細明體,新細明體,標楷體,,,,,,,,Georgia,verdana,arial,helvetica,sans-serif;}
/*貼上你要改的項目文字字型基本參考選一*/ 貼上你要改的項目文字字型基本參考選一{font-family: 細明體,新細明體,標楷體,,,,,,,,Georgia,verdana,arial,helvetica,sans-serif;} 




---------------------------------------請告訴我.還有哪裡要改進------------- 
/*整體卷軸*/body {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffebf5;
scrollbar-shadow-color: #ffebf5;
scrollbar-3dlight-color: #ffebf5;
scrollbar-arrow-color: #ffcde5;
scrollbar-track-color: #ffebf5;
scrollbar-darkshadow-color: #ffffff;}
/*整體游標*/body {cursor:url("游標網址");}
/*整體文字大小顏色*/body {font-size: 16PX;color:#895117 ;}
/*整體文字靠中*/ body {text-align:center;}
/*整體文字間距*/body {letter-spacing: 2PX;}
/*整體文字行高*/body {line-height: 100%;}
/*整體文字離上離左*/body {padding-top: 2px;padding-left: 2px;}
/*整體背景圖片*/body {background: url(圖片網址) fixed no-repeat 0% 100%;}
/*整體區塊離上離中*/body {*margin-top: 2px;*margin-left: 2px;}
/*整體區塊靠邊*/body {align: center;} 



---------------------------------------請告訴我.還有哪裡要改進------------- 
/*滑鼠移到文字上方文字浮起*/a:hover {border: 3px outset;}
/*滑鼠移到文字上方加背景圖*/a:hover {background: url(圖片網址) no-repeat 90% 20% ! important;}
/*滑鼠移到文字上方更換游飆*/a:hover {cursor: url('游標網址')! important;}
/*滑鼠移到文字上方文字顏色*/a:hover {color: #ac55ff ! important;}
/*滑鼠移到文字上方底線取消*/a:hover {text-decoration: none ! important;}
/*滑鼠游標滑過文字上方時的小惡作劇*//*套餐大集合*/
/*變浮起*/
A:hover {border: 3px outset;}
/*變游標*/
A:hover {cursor:url("游標網址") ! important;}
/*變小圖*/
A:hover {background: url(圖片網址) 90% 20% no-repeat ! important;}
/*變底色*/
A:hover {background-color: #777 !important;}
/*變字大*/
A:hover {font-size: 22px ! important;}
/*變字色*/
A:hover {font-color:#6666CC ! important;}
/*變字粗*/
A:hover {font-WEIGHT: 900 ! important;}
/*變字型*/
A:hover {font-family: 細明體 ! important;}
/*變字寬*/
A:hover {LETTER-SPACING: 12px ! important;}
/*變字高*/
A:hover {LINE-HEIGHT:350% ! important;}
/*變字斜*/
A:hover {font-STYLE: italic ! important;}
/*變置中*/
A:hover {TEXT-ALIGN: center ! important;}
/*變直排*/
A:hover {display: block ! important;}
/*變底線*/
A:hover {TEXT-DECORATION:none/不加底線.underline !important;}
/*變寬度*/
A:hover {width: 212PX ! important;}
/*變高度*/
A:hover {height: 212px ! important;}
/*變智寬*/
A:hover {MIN-width: 212PX ! important;}
/*變智高*/
A:hover {MIN-height: 212px ! important;}
/*變限寬*/
A:hover {MAX-width: 212PX ! important;}
/*變限高*/
A:hover {MAX-height: 212px ! important;}
/*變起點*/
A:hover {FLOAT: lift,right,center ! important;}
/*變靠邊*/
A:hover {TEXT-ALIGN:lift,right,center ! important;}
/*變調動*/
A:hover {MARGIN: 0px 0px 0px 0px ! important;}
/*變移動*/
A:hover {PADDING: 0px 0px 0px 0px ! important;}
/*變框線*/
A:hover {BORDER:#FFCECD 1px solid ! important;}
/*變雙框*/
A:hover {BORDER: 1px solid #FFCECD double 5px ! important;}
嘿. 要玩彩虹嗎-在下方回覆欄玩玩看吧.
複製這個.換掉色碼:
[color=#FFF]謝謝[/color] 



---------------------------請告訴我.還有哪裡要改進------------- 
/*(通用)輸入按鈕調字加框加游標調底色*/
input,select {
font-size: 12px ! important;color: #ff73b7 ! important;
border: #ffcde5 1px dashed;
cursor: url('游標網址');
background-color: #ffebf5;}
/*輸入按鈕白字黑底的*/
input,select {
font-size: 12px ! important;color: #FFFFFF ! important;
border: #000000 1px solid;
background-color: #000000 ;}
/*輸入按鈕調整體積大小*/input,select {width: 182px;height: 312px;}
/*新增相簿那些加框框*/input {border: 1px solid#FFEBEB;}
/*好友列框框IE不執行*/select {border: 1px solid #FFEBEB;}
/*好友的相簿.相簿類別自由移動*/ select {position: absolute;left: 152px;top: 2px;twohand2012;}
/*好友的相簿自由移動*/#friendlist {position: absolute;left: 112px;top: 12px;twohand2012;}
/*相簿類別自由移動*/#category {position: absolute;left: 152px;top: 22px;twohand2012;}
/*隱藏或顯示好友列*/select {/*使用或刪除*/display:none;}
/*隱藏或顯示好友的相簿*/#friendlist {/*使用或刪除*/display: none;}
/*隱藏或顯示相簿分類*/#category {/*使用或刪除*/display: none;} 



 --------------------------------------請告訴我.還有哪裡要改進------------- 
/*橫幅區文字大小顏色*/#banner {font-size: 18px;color: #FF7573;}
/*橫幅區文字靠邊粗細*/#banner {font-weight: 700;text-align: left;}
/*橫幅區文字底線取消*/#banner {text-decoration: none ! important;}
/*橫幅區區塊寬度高度*/#banner {height: 412px;}
/*橫幅區區塊加背景圖*/#banner {background: url(圖片網址) no-repeat 50% 100% ! important;}

/*橫幅標題文字大小顏色*/#banner a {font-size: 47px;color: #FF7573;}
/*橫幅標題文字底線取消*/#banner a {text-decoration: none ! important;}
/*橫幅標題文字文字行高*/#banner a {LINE-HEIGHT: 120% ! important;}
/*橫幅標題文字靠邊靠上留著加小圖*/#banner a {text-align: RIGHT;padding-top: 54px ! important;}
/*橫幅標題文字寬度不夠它就直行往下延伸高度*/#banner a {height: 382px ! important;width: 52px ! important;}
/*橫幅標題文字直行上方加小圖*/#banner a {background: url(圖片網址) no-repeat 50% 0% ! important;}
/*橫幅標題文字可自由移動移到左邊再調數字*/#banner a {position: absolute;left: 72px;top: 12px;twohand2012;} 



---------------------------------------請告訴我.還有哪裡要改進------------- 
/*可以設計成網誌自訂資料一樣直行排列.點進後在敘述裡放一排小玩意*/
/*勾選相簿-編輯相簿-相簿描述(字數限制:255字):*/
/*點進相簿上方描述文字大小顏色*/ .description {font-size: 22px ! important;color: #FF7573 ! important;}
/*點進相簿上方描述文字文字行高*/ .description {LINE-HEIGHT: 150% ! important;}
/*點進相簿上方描述區塊寬度高度*/ .description {width: 182px;height: 312px;}
/*點進相簿上方描述區塊加背景圖*/ .description {background: transparent url(圖片網址) no-repeat 0% 50% ! important;}
/*點進相簿上方描述區塊自由移動*/ .description {twohand2012;position: absolute;left: 12px;top: 2px;} 



---------------------------------------請告訴我.還有哪裡要改進------------- 
/*twohand2012的連結前加小圖*/ .sidetitle{ padding-left:22px ! important;background: url(圖片網址) no-repeat 0% 0% ! important;}
/*twohand2012的首頁.相簿.網誌...連結區塊加背景圖*/ .sidetitle{background: url(圖片網址) no-repeat 100% 5% ! important;}
/*twohand2012的首頁.相簿.網誌...連結區塊高度寬度*/ .sidetitle{height: 981px ! important;width: 181px ! important;}
/*twohand2012的首頁.相簿.網誌...連結區塊自由移動*/ .sidetitle{twohand2012;position: absolute;left: 801px;top: 1px;}
/*twohand2012的首頁.相簿.網誌...連結文字大小顏色*/ .sidetitle a {font-size:22px ! important; !important;color: #ff73b7 ! important;}
/*twohand2012的首頁.相簿.網誌...連結文字底線取消*/ .sidetitle a {text-decoration: none ! important;} 



---------------------------------------請告訴我.還有哪裡要改進------------- 
/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(可個別或一起用)*/
/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(圖在字右邊用終點寬度設定配合 100% 50%)*/
#linkMypage, #linkAlbum, #linkBlog, #linkGbook, #linkUser, #linkFriend ,#linkVideo { padding-right:22px; background: url(圖片網址) no-repeat 100% 50% ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(圖在字左邊用起點寬度設定配合 0% 50%)*/
#linkMypage, #linkAlbum, #linkBlog, #linkGbook, #linkUser, #linkFriend ,#linkVideo { padding-left:22px; background: url(圖片網址) no-repeat 0% 50% ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(圖在字上方用上留高度設定配合 50% 0%)*/
#linkMypage, #linkAlbum, #linkBlog, #linkGbook, #linkUser, #linkFriend ,#linkVideo { padding-top:22px; background: url(圖片網址) no-repeat 50% 0% ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(圖在字下方用下方高度設定配合 50% 100%)*/
#linkMypage, #linkAlbum, #linkBlog, #linkGbook, #linkUser, #linkFriend ,#linkVideo { padding-bottom:22px; background: url(圖片網址) no-repeat 50% 100% ! important;}

/*首頁.連結加小圖(圖在字左邊)*/
#linkMypage
{text-align:right ! important;width: 62px ! important;background: url(圖片網址) no-repeat 0% 50% ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加寬度(用個別寬度設定)*/
#linkMypage,#linkAlbum,#linkBlog,#linkGbook,#linkUser,#linkFriend,#linkVideo
{width: 62px ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(圖在字左邊)*/
#linkMypage,#linkAlbum,#linkBlog,#linkGbook,#linkUser,#linkFriend,#linkVideo
{text-align:right ! important;width: 62px ! important;background: url(圖片網址) no-repeat 0% 50% ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(圖在字右邊)*/
#linkMypage,#linkAlbum,#linkBlog,#linkGbook,#linkUser,#linkFriend,#linkVideo
{text-align: left ! important;width: 62px ! important;background: url(圖片網址) no-repeat 100% 50% ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(圖在字下方)*/
#linkMypage,#linkAlbum,#linkBlog,#linkGbook,#linkUser,#linkFriend,#linkVideo
{text-align: center ! important;height: 62px ! important;width: 62px ! important;background: url(圖片網址) no-repeat 50% 100% ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(圖在字上方)*/
#linkMypage,#linkAlbum,#linkBlog,#linkGbook,#linkUser,#linkFriend,#linkVideo
{padding-top: 42px ! important;text-align: center ! important;height: 62px ! important;width: 62px ! important;background: url(圖片網址) no-repeat 50% 0% ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加寬度(用文字間距)*/
#linkMypage,#linkAlbum,#linkBlog,#linkGbook,#linkUser,#linkFriend,#linkVideo
{letter-spacing: 22PX ! important;}

/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖(圖在文字中間)*/
#linkMypage,#linkAlbum,#linkBlog,#linkGbook,#linkUser,#linkFriend,#linkVideo
{letter-spacing: 22PX ! important;background: url(圖片網址) no-repeat 50% 50% ! important;}

/*首頁.連結加小圖(圖在兩個分開的文字上跳來跳去)*/
#linkMypage
{letter-spacing: 18PX ! important;text-decoration: none;font-size: 16px ! important;color: #693837 ! important;padding-top: 49px ! important;text-align: center ! important;height: 67px ! important;width: 62px ! important;background: url(圖片網址) no-repeat 50% 0% ! important;}

/*留言.連結加小圖(圖躲在字後上方)*/
#linkGbook
{text-decoration: none;font-size: 16px ! important;color: #693837 ! important;padding-top: 27px ! important;text-align: center ! important;height: 62px ! important;width: 62px ! important;background: url(圖片網址) no-repeat 50% 0% ! important;}

/*影音.連結加小圖(圖在斜火紅字後上方)*/
#linkVideo
{letter-spacing: 28PX ! important;text-decoration: none;font-size: 22px ! important;color: #FA0300 ! important;padding-top: 29px ! important;text-align: center ! important;height: 75px ! important;width: 67px ! important;background: url(圖片網址) no-repeat 50% 0% ! important;} 




---------------------------------------請告訴我.還有哪裡要改進------------- 
{;/*測試用藍色虛線框框*/border:2px #AC55FF dashed ! important;}

/*自由移動.首頁.連結加小圖(圖在字上方)*/
arrow
arrow
    全站熱搜

    fayfay11 發表在 痞客邦 留言(0) 人氣()