下面語法是從CSS達人那邊摘取的
希望有連結的朋友都能夠附上資料來源的網址
畢竟達人要把這麼多的字母 KEY 上去
真的很辛苦
http://www.wretch.cc/hala/viewtopic.php?t=301350&postdays=0&postorder=asc&start=0
1 /*從網誌未能執行前的版面基本設定(雙語法).空白的當機畫面嘹解結構的建立*/
/*網頁本體卷軸*/
html {overflow: hidden;/*可以不使用的隱藏捲軸*/
SCROLLBAR-FACE-COLOR:#FFDDDD;/*滑版的顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:#FFF6F2;/*滑版左和上邊框的顏色*/
SCROLLBAR-SHADOW-COLOR:#EBD5C0;/*滑版右和下邊框的顏色*/
SCROLLBAR-3DLIGHT-COLOR:#EBD5C0;/*左和上邊框的顏色*/
SCROLLBAR-ARROW-COLOR:#EBD5C0;/*上下箭頭的顏色*/
SCROLLBAR-DARKSHADOW-COLOR:#FFF6F2;/*陰影的顏色*/
SCROLLBAR-TRACK-COLOR:#ffeeee;/*軌道底部的顏色*/}
html {/*背景*/background: url(第一張背景圖片網址) no-repeat 0% 100%;twohand2012;}
/*主體設寬度為650px時*/
/*寬高*/body {width:650px;height: 450px;}
/*位置*/body {margin-left: 220px;margin-top: 65px;}
/*主區塊一寬度跟隨650px*/
#container1 {width:650px;height: 450px;}
/*捲軸*/#container1 {overflow: auto;}
/*連結列寬度先決定設為150px.為別人誤差預留30px*/
#links {width: 150px;height: 450px;FLOAT: right;text-align:center;}
/*可以不設捲軸*/#links {overflow: auto;}
/*文章區寬度再決定.650-150-30=470*/
#content {FLOAT:left;width: 470px;height: 450px;margin-top: 3px;twohand2012;}
/*可以不設捲軸*/#content {overflow: auto;}
(雙語法)的設計
直接複製上方的"架構功能"放在CSS的最上層.內容數字可以自己調整.
刪除下方body #links #content 內容裡的重複"架構功能"
如果連結列版面會掉下去.加寬主體或縮減文章區或連結列寬度.
讓下方的body #links #content 只留下文字.背景圖...等"裝飾功能"
將來改版.查修.瀏覽功能更替.....都會恨方便
所有下方標籤物件的"架構功能"都要參考上方描述的"架構功能"
錯誤示範例如:
連結列寬度設170px
連結列起點靠左FLOAT: left;(不要)區塊從右方留空margin-right: 50px;
加上我的地盤*/ #boxMySpace起點靠右FLOAT: right;(不要)從左方留空margin-left: 50px;
在瀏覽智慧功能逐漸放棄趨勢下.機器會解讀為100跑框或反向重疊.
加上首頁.名片.相簿...等連結標籤(省略)再反向.畫面最終為+.-30px或120px270px.....的結果都有可能.
最後加上滑鼠游過網誌連結時.他要因循繼承誰的再加上自己的主張呢???
只要設計者不依賴現行的繼承解讀功能.在宣告時.參考方向.一致性的.說清楚.講明白.
不論瀏覽器換到第幾代.它只能改變自己的自動服務設計者未說明項目.說清楚就不怕了.
為什麼人家的語法O.K我用就跑框
例如最新的回應的回應者帳號.他的連結列可能在左邊.前方繼承起點內容靠右.
而你的連結列可能在右邊.前方繼承起點內容靠左.
那就會跑框.或者是未顯示.藏在橫向捲軸之外的空間.
怎麼辦呢.設連結列100.左30等於右70減去文字寬度.
他的連結列是150.他的45等於你的30.說來簡單.只是你不知道.
你又看不到他的前方設定怎麼辦呢...透視畫面架構的功力.從挽救中.久了就知道.
為什麼文字無法改變設定......所有無法改變--消除前方設定--前方設定-學過"架構功能"就會了
為什麼要有這麼多麻煩的前方繼承起點參考設定
我們說的"當然"是-當我如此想很自然.的主人用語.
而英文的"當然"of cause是-因者您的旨意而成為我執著的原因.的僕人用語.
人世間的"當然"是-老子說的當下的自然.絕對不會是御用的三綱五常.
生活中充滿了"我家的"前方繼承起點參考設定.都由"我家的老媽子去搞定"
去到別人家.即使見到了人家的僕人.都要說-of cause
2 /*其他*/
/*總共面積所佔高度寬度*/=文字+鋪空+邊緣+邊界外區.面積高度寬度
/*目視面積背景範圍所佔高度寬度*/=文字+鋪空.面積高度寬度
padding:為延伸(文字)之一部份功能.設文字 A 為0px;(四方)padding:25px;則背景圖可視範圍50px*50px內.滑鼠a:hover點到padding:(看似點圖)可執行連結功能.
/*高度寬度*/ {height: 212px;width: 212px;}
/*最小高度寬度隨內容自動增加*/ {MIN-height: 212px;MIN-width: 212px;}
/*最大高度寬度隨內容自動縮減*/ {MAX-height: 212px;MAX-width: 212px;}
FLOAT:漂流物
/*區塊靠右*/ {FLOAT: right;}
/*區塊靠左*/ {FLOAT: left;}
/*區塊置中*/ {FLOAT: center;}
margin:邊界外區
/*區塊四方留空*/ {margin: 15px ;}
/*區塊上方留空縮減*/ {margin-top: -22px ;}
/*區塊上方留空*/ {margin-top: 15px ;}
/*區塊左方留空*/ {margin-left: 90px;}
/*區塊下方留空*/ {margin-bottom: 15px ;}
/*區塊右方留空*/ {margin-right: 90px;}
border:邊緣
/*區塊四方白色細實線框*/ {border: #FFFFFF 1px solid;}
/*區塊四方黑色細實線框*/ {border: #000000 1px solid;}
/*區塊上方白色細實線框*/ {border-top: #FFFFFF 1px solid;}
/*區塊左方白色細實線框*/ {border-left: #FFFFFF 1px solid;}
/*區塊下方白色細實線框*/ {border-bottom: #FFFFFF 1px solid;}
/*區塊右方白色細實線框*/ {border-right: #FFFFFF 1px solid;}
text:書寫印刷
/*文字靠左*/ {text-align: left;}
/*文字置中*/ {text-align: center;}
/*文字靠右*/ {text-align: right;}
padding:文章鋪空
/*文字四方留空*/ {padding: 15px ;}
/*文字上方留空縮減*/ {padding-top: -22px ;}
/*文字上方留空*/ {padding-top: 15px ;}
/*文字左方留空*/ {padding-left: 90px;}
/*文字下方留空*/ {padding-bottom: 15px ;}
/*文字右方留空*/ {padding-right: 90px;}
/*文字大小顏色*/ {font-size: 12px ! important;color: #555555 ;}
/*文字隱藏*/ {font-size: 0px;color: #ffffff ;line-height: 0%;letter-spacing: -3PX;}
/*文字字型基本參考選一*/ A {font-family: 細明體,新細明體,標楷體,,,,,,,,Georgia,verdana,arial,helvetica,sans-serif;}
/*文字行高*/{LINE-HEIGHT: 150%;}
/*文字間距*/ {letter-spacing: 12PX;}
/*文字底線取消*/{text-decoration: none;}
/*隱藏而保不留空間且無法還原*/{display: none;}
/*隱藏而保要留空間且可以還原*/{visibility: hidden;}
/*將隱藏而保要留空間還原*/{visibility:visible;}
/*隱藏橫向捲軸*/ {overflow-X: hidden;}
/*隱藏縱向捲軸*/ {overflow-Y: hidden;}
/*開始就都不要*/ {overflow: hidden;}
/*橫向捲軸在畫面大於寬度設定時自動出現*/
/*縱向捲軸在畫面大於高度設定時自動出現*/
/*橫向或縱向捲軸在畫面流量溢出你家的地板時會自動出現嘿吼作*/ {overflow: auto;}
/*透明度*/ {filter: Alpha( Opacity = 70, style = 0 );}
/*獨立移動*/ {position: absolute;right: 22px;top: 22px;twohand2012;}
/*獨立配合切割*/clip: rect( /*切上邊*/ 0px/*留右邊*/ 500px/*留高度*/ 250px /*切左邊*/285px);
/*加圖通用包包*/
標籤貼這裡 {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
標籤貼這裡 {;/*測試用藍色虛線框框*/border:2px #AC55FF dashed;}
標籤貼這裡 {;/*測試用綠色大號文字*/font-size: 52px;color: #00A002;}
/*要進入*/如名片http://www.wretch.cc/user/twohand2012
將: user改為blog或album或guestbook或mypage
/*文字超連結語法*/
...點這裡
<>>a class="maintitle" href=
"http://www.wretch.cc/hala/viewtopic.php?t=306574">
...點這裡<>>/a>
1刪除>>和>>.2修改...點這裡.3三行變一行.4修改網址.就可以了
/*整體文字*/
body{font-size: 12px;color: #555555 ;}
/*內容文字*/
A {font-size: 12px;color: #555555 ;}
/*滑鼠移到連結文字上方文字立體浮起框*/a:hover {border: 2px outset;}
/*滑鼠移到連結文字上方文字顏色*/a:hover {color: #ac55ff ;}
/*滑鼠移到連結文字上方底線取消*/a:hover {text-decoration: none;}
/*滑鼠移到連結文字上方加背景圖*/a:hover {background: url(圖片網址) no-repeat 90% 20%;}
3 /*橫幅區設寬度.高度.與背景圖.網誌標題文字直行靠左*/
/*橫幅區*/
#banner {
margin-top: 0px;height: 393px;width: 630px;
background: url(圖片網址) no-repeat 40% 100%;}
/*滑鼠游過橫幅區*/
#banner a:hover {color: #FF5755 ;}
/*標題區*/
#pageheader {
height: 393px;width: 612px;
background: url(圖片網址) no-repeat 100% 0%;}
/*標題字區加小圖*/
#pageheader h1 {
padding-top: 12px;height: 381px;width: 612px;
background: url(圖片網址) no-repeat 0% 0%;}
/*網誌標題字直行移到左右方加小圖*/
#pageheader h1 A {
font-size: 44px;color:#FF73B7;font-weight: bold;LINE-HEIGHT: 110%;text-decoration: none;
FLOAT: right;margin-right: 72px;height: 311px;width: 66px;padding-left: 22px;padding-top: 12px;display: block;twohand2012;
background: url(圖片網址) no-repeat 50% 38%;}
/*若要獨立移動可使用.再移*/
#pageheader h1 A {position: absolute;left: 22px;top: 22px;twohand2012;}
/*橫幅文章標題*/
h1 .description {
font-size: 12px;color:#ff9291 ;text-decoration: none;
width: 112px;padding-top: 32px;twohand2012;}
/*描述移到右上角放背景圖放小玩意*/
#description2 .description {
font-size: 15px;color:#ff9291 ;text-align: right;
width:180px;padding-left: 12px;
background: url(圖片網址) no-repeat 40% 0%;
position: absolute;right: 0px;top: 22px;twohand2012;}
4 輸入按鈕.文字大小顏色.白細框.粉底色.高度.寬度
input {
font-size: 10px;color: #FFAFD6 ;
border: #FFFFFF 1px solid;
background-color: #FFEBEB;
height: 14px;width: 62px;}
/*好友列.文字大小顏色.白細框.粉底色.高度.寬度*/
select {
font-size: 10px;color: #FFAFD6 ;
border: #FFFFFF 1px solid;
background-color: #FFEBEB;
height: 14px;width: 62px;}
5 /*文章區加背景(不要在這裡做文字設定.區塊也已在上方設定.放圖就好)*/
#content {background: url(圖片網址) no-repeat 100% 0%;}
/*文章日期.文字大小顏色.左留空.高度.寬度加背景圖*/
.date {
font-size: 20px;color: #ff9999;
padding-top: 3px;padding-left: 85px;
height: 62px;width: 400px;
background: url(圖片網址) no-repeat 0% 100%;}
6 /*整體文章加背景*/
.blog {background: url(圖片網址) no-repeat 65% 0% ;}
.blogbody {background: url(圖片網址) no-repeat 50% 0% ;}
/*整篇文章加背景*/
.articletext {background: url(圖片網址) no-repeat 98% 0%;}
7 /*所有文章列表日期文字大小.顏色*/
.articletext TABLE {
font-size: 12px;color:#8000FA;}
/*所有文章列表標題文字大小.顏色*/
.articletext TABLE A {
font-size: 12px ;color:#555555 ;}
8 /*文章標題文字大小顏色.文字行高.上留空.左留空.下留空.寬度.高度.加背景圖*/
.title {
font-size: 26px;color: #7573ff;
line-height: 180%;
padding-top: 27px;padding-left: 90px;padding-bottom: 0px;
width: 347px;height: 61px;
background: url(圖片網址) no-repeat 125% 80% ;}
9 /*文章內文文字大小顏色行高.左上下留空.區塊上留空.寬度.加背景或小圖*/
.innertext {
font-size: 14px;color: #333333 ;
line-height: 182%;
padding-left: 5px;
padding-top: 42px;padding-bottom: 42px;
margin-top: 22px;
width: 452px ! important;
background: url(圖片網址) no-repeat 25% 0%;}
8 /*繼續閱讀直接點圖式改字成圖*/
.extended {margin-left: 137px;padding-right: 52px;padding-left: 52px;padding-top: 38px;twohand2012;}
.extended a {padding-right: 52px;padding-left: 52px;font-size: 0px;color: #ffffff ;twohand2012;line-height: 0%;
padding-top: 38px;twohand2012;letter-spacing: -2PX;
background: url(圖片網址) no-repeat;}
10 -----------------/*引用回應欄*/-------------
/*作者日期文字*/
.posted {
font-size: 0px;color: #ffffff;
text-align: right;border: #ffebeb 5px double;
height: 10px;width: 447px;
background: url(圖片網址) no-repeat;}
/*引用回應文字*/
.posted a {font-size: 10px;color: #ffcde5;line-height: 100%;}
11 /*-------文章訪客回應區共同設定-------*/
/*訪客回應區整體背景顏色*/
.total-comments-div {background-color: #000000 ;}
/*訪客回應區內背景顏色*/
.comments-body{background-color: #777777 ;}
/*給個回應文字大小顏色.間距.高度.加小圖或改字成圖*/
.comments-bottom .comments-head {
font-size: 0px;color: #FFEBEB ;letter-spacing: -3PX ;
height: 100px;twohand2012;
background: url(圖片網址) #FFEBEB no-repeat 50% 50%;}
/*文章訪客留言內容文字大小顏色*/
.comments-body p {font-size: 13px;color: #891788 ;twohand2012;}
/*文章訪客回應打字區加背景*/
.comments-body textarea {
height: 600px;background: url(圖片網址) #fff no-repeat 100% 100%;}
12 /*連結列.連結列標題.連結列框內容.連結列框內容文字改成沒有底線*/
#links , .sidetitle , .side , .side A {text-decoration: none;twohand2012;}
/*滑鼠游過連結列時文字顏色*/
#links a:hover {color: #FF5755 ;}
13 /*行事曆文字大小顏色整體加背景有文章日期小花*/
/*行事曆整體加背景有文章日期小花*/
div.calendar {
padding-top: 5px;height: 140px;
background: url(圖片網址) repeat-Y 50% 100%;}
filter: Alpha( Opacity = 70, style = 0 );
/*行事曆(星期字大小顏色)*/
.calendar {
letter-spacing: NONE;width: 120px;font-size: 6px;color: #000000 ;}
/*行事.年.月.有文日.文字*/ .calendar a {font-size: 10px;color: #000000;}
/*行事歷日期文字*/#links td .calendar {font-size: 10px;color: #000000;}
/*行事歷日期文字*/
#links .calendar td .calendar {
display: block;color: #555555;line-height: 100%;
width: 8px;height: 10px;text-align: center;}
/*行事歷有文章日文字*/
#links td .calendar a {
display: block;width: 8px;height: 10px;text-align: center;}
/*行事歷有文章日區塊加小花*/
#links td .calendar a:link {
background: url(圖片網址) no-repeat center 50%;}
/*行事歷年月*/
.calendarhead {
color: #BD1F6C;}
14 /*我的照片加相框(相片可放大)*//*播放中相簿加相框(相片可放大)*//*首頁連結加小圖*//*我的地盤標題改成圖*/
/*我的地盤標題隱藏*/
.boxMySpace0 .sidetitle {visibility: hidden;}
/*twohand2012地盤改成圖*/
#boxMySpace {height: 2012px;background: url(圖片網址) no-repeat 50% -1%;}
/*twohand2012的地盤加小圖位置由 25% 50%調整或背景*/
.boxMySpace0 .sidetitle{
display: block;height: 44px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*我的照片加相框或背景*/
.boxMySpaceImg{
display: block;height: 90px;width: 120px;padding-top: 7px;
background:url('圖片網址') no-repeat 50% 100% ;}
/*我的照片放大*/
.boxMySpaceImg Img {
height: 150px;width: 122PX;}
/*我的照片精美又大張*/
.boxMySpaceImg {
padding-top: 302px;height: 312px;margin-top: 12px;
background: url(精美又大張的照片網址) 50% 0% no-repeat;}
.boxMySpaceImg Img {
height: 2px;width: 2PX; }
15 /*播放相簿獨立移動相片加相框*/
#boxSlideShow {
height: 110px;width: 111px;text-align: center: center;text-decoration: none;
background:url(圖片網址) no-repeat 50% 100% ;}
#boxSlideShow {font-size: 10px;color: #ffcde5 ;}
/*播放相簿寬度.相片上左留空*/
#boxSlideShow IMG{width: 92px;padding-left: 6px; padding-top: 5px;}
/*播放相簿獨立移動*/
#boxSlideShow {position: absolute; left: 272px;top: 530px;twohand2012;}
/*播放相簿標題隱藏*/ .boxSlideShow0 .sidetitle{display:none;}
/*播放相簿描述隱藏*/ #SlidePicTitle {display:none;}
/*播放相簿暫停隱藏*/ #buttonPlayPause {display:none;}
/*播放相簿上張隱藏*/ #buttonPrev {display:none;}
/*播放相簿下張隱藏*/ #buttonNext {display:none;}
16 /*網誌分類加小圖圖可任意調在上.下.左.右.方.調22px;5px; 25% 50%*/
#blogCategory {
display: block;height: 44px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*未分類*/
#blogCategory A {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*以下七項通用在相簿和留言板時記的加display: block ! important;height: 90px;width: 120px;padding-top: 7px;喔.*/
/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖圖可任意調在上.下.左.右.方.調22px;5px; 25% 50%*/
#linkMypage,#linkAlbum,#linkBlog,#linkGbook,#linkUser,#linkFriend,#linkVideo
{display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*首頁連結加小圖圖可任意調在上.下.左.右.方.調22px;5px; 25% 50%*/
#linkMypage {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*相簿連結加小圖圖可任意調在上.下.左.右.方.調22px;5px; 25% 50%*/
#linkAlbum {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*網誌連結加小圖two*/
#linkBlog {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
網誌CSS(二)
希望有連結的朋友都能夠附上資料來源的網址
畢竟達人要把這麼多的字母 KEY 上去
真的很辛苦
http://www.wretch.cc/hala/viewtopic.php?t=301350&postdays=0&postorder=asc&start=0
1 /*從網誌未能執行前的版面基本設定(雙語法).空白的當機畫面嘹解結構的建立*/
/*網頁本體卷軸*/
html {overflow: hidden;/*可以不使用的隱藏捲軸*/
SCROLLBAR-FACE-COLOR:#FFDDDD;/*滑版的顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:#FFF6F2;/*滑版左和上邊框的顏色*/
SCROLLBAR-SHADOW-COLOR:#EBD5C0;/*滑版右和下邊框的顏色*/
SCROLLBAR-3DLIGHT-COLOR:#EBD5C0;/*左和上邊框的顏色*/
SCROLLBAR-ARROW-COLOR:#EBD5C0;/*上下箭頭的顏色*/
SCROLLBAR-DARKSHADOW-COLOR:#FFF6F2;/*陰影的顏色*/
SCROLLBAR-TRACK-COLOR:#ffeeee;/*軌道底部的顏色*/}
html {/*背景*/background: url(第一張背景圖片網址) no-repeat 0% 100%;twohand2012;}
/*主體設寬度為650px時*/
/*寬高*/body {width:650px;height: 450px;}
/*位置*/body {margin-left: 220px;margin-top: 65px;}
/*主區塊一寬度跟隨650px*/
#container1 {width:650px;height: 450px;}
/*捲軸*/#container1 {overflow: auto;}
/*連結列寬度先決定設為150px.為別人誤差預留30px*/
#links {width: 150px;height: 450px;FLOAT: right;text-align:center;}
/*可以不設捲軸*/#links {overflow: auto;}
/*文章區寬度再決定.650-150-30=470*/
#content {FLOAT:left;width: 470px;height: 450px;margin-top: 3px;twohand2012;}
/*可以不設捲軸*/#content {overflow: auto;}
(雙語法)的設計
直接複製上方的"架構功能"放在CSS的最上層.內容數字可以自己調整.
刪除下方body #links #content 內容裡的重複"架構功能"
如果連結列版面會掉下去.加寬主體或縮減文章區或連結列寬度.
讓下方的body #links #content 只留下文字.背景圖...等"裝飾功能"
將來改版.查修.瀏覽功能更替.....都會恨方便
所有下方標籤物件的"架構功能"都要參考上方描述的"架構功能"
錯誤示範例如:
連結列寬度設170px
連結列起點靠左FLOAT: left;(不要)區塊從右方留空margin-right: 50px;
加上我的地盤*/ #boxMySpace起點靠右FLOAT: right;(不要)從左方留空margin-left: 50px;
在瀏覽智慧功能逐漸放棄趨勢下.機器會解讀為100跑框或反向重疊.
加上首頁.名片.相簿...等連結標籤(省略)再反向.畫面最終為+.-30px或120px270px.....的結果都有可能.
最後加上滑鼠游過網誌連結時.他要因循繼承誰的再加上自己的主張呢???
只要設計者不依賴現行的繼承解讀功能.在宣告時.參考方向.一致性的.說清楚.講明白.
不論瀏覽器換到第幾代.它只能改變自己的自動服務設計者未說明項目.說清楚就不怕了.
為什麼人家的語法O.K我用就跑框
例如最新的回應的回應者帳號.他的連結列可能在左邊.前方繼承起點內容靠右.
而你的連結列可能在右邊.前方繼承起點內容靠左.
那就會跑框.或者是未顯示.藏在橫向捲軸之外的空間.
怎麼辦呢.設連結列100.左30等於右70減去文字寬度.
他的連結列是150.他的45等於你的30.說來簡單.只是你不知道.
你又看不到他的前方設定怎麼辦呢...透視畫面架構的功力.從挽救中.久了就知道.
為什麼文字無法改變設定......所有無法改變--消除前方設定--前方設定-學過"架構功能"就會了
為什麼要有這麼多麻煩的前方繼承起點參考設定
我們說的"當然"是-當我如此想很自然.的主人用語.
而英文的"當然"of cause是-因者您的旨意而成為我執著的原因.的僕人用語.
人世間的"當然"是-老子說的當下的自然.絕對不會是御用的三綱五常.
生活中充滿了"我家的"前方繼承起點參考設定.都由"我家的老媽子去搞定"
去到別人家.即使見到了人家的僕人.都要說-of cause
2 /*其他*/
/*總共面積所佔高度寬度*/=文字+鋪空+邊緣+邊界外區.面積高度寬度
/*目視面積背景範圍所佔高度寬度*/=文字+鋪空.面積高度寬度
padding:為延伸(文字)之一部份功能.設文字 A 為0px;(四方)padding:25px;則背景圖可視範圍50px*50px內.滑鼠a:hover點到padding:(看似點圖)可執行連結功能.
/*高度寬度*/ {height: 212px;width: 212px;}
/*最小高度寬度隨內容自動增加*/ {MIN-height: 212px;MIN-width: 212px;}
/*最大高度寬度隨內容自動縮減*/ {MAX-height: 212px;MAX-width: 212px;}
FLOAT:漂流物
/*區塊靠右*/ {FLOAT: right;}
/*區塊靠左*/ {FLOAT: left;}
/*區塊置中*/ {FLOAT: center;}
margin:邊界外區
/*區塊四方留空*/ {margin: 15px ;}
/*區塊上方留空縮減*/ {margin-top: -22px ;}
/*區塊上方留空*/ {margin-top: 15px ;}
/*區塊左方留空*/ {margin-left: 90px;}
/*區塊下方留空*/ {margin-bottom: 15px ;}
/*區塊右方留空*/ {margin-right: 90px;}
border:邊緣
/*區塊四方白色細實線框*/ {border: #FFFFFF 1px solid;}
/*區塊四方黑色細實線框*/ {border: #000000 1px solid;}
/*區塊上方白色細實線框*/ {border-top: #FFFFFF 1px solid;}
/*區塊左方白色細實線框*/ {border-left: #FFFFFF 1px solid;}
/*區塊下方白色細實線框*/ {border-bottom: #FFFFFF 1px solid;}
/*區塊右方白色細實線框*/ {border-right: #FFFFFF 1px solid;}
text:書寫印刷
/*文字靠左*/ {text-align: left;}
/*文字置中*/ {text-align: center;}
/*文字靠右*/ {text-align: right;}
padding:文章鋪空
/*文字四方留空*/ {padding: 15px ;}
/*文字上方留空縮減*/ {padding-top: -22px ;}
/*文字上方留空*/ {padding-top: 15px ;}
/*文字左方留空*/ {padding-left: 90px;}
/*文字下方留空*/ {padding-bottom: 15px ;}
/*文字右方留空*/ {padding-right: 90px;}
/*文字大小顏色*/ {font-size: 12px ! important;color: #555555 ;}
/*文字隱藏*/ {font-size: 0px;color: #ffffff ;line-height: 0%;letter-spacing: -3PX;}
/*文字字型基本參考選一*/ A {font-family: 細明體,新細明體,標楷體,,,,,,,,Georgia,verdana,arial,helvetica,sans-serif;}
/*文字行高*/{LINE-HEIGHT: 150%;}
/*文字間距*/ {letter-spacing: 12PX;}
/*文字底線取消*/{text-decoration: none;}
/*隱藏而保不留空間且無法還原*/{display: none;}
/*隱藏而保要留空間且可以還原*/{visibility: hidden;}
/*將隱藏而保要留空間還原*/{visibility:visible;}
/*隱藏橫向捲軸*/ {overflow-X: hidden;}
/*隱藏縱向捲軸*/ {overflow-Y: hidden;}
/*開始就都不要*/ {overflow: hidden;}
/*橫向捲軸在畫面大於寬度設定時自動出現*/
/*縱向捲軸在畫面大於高度設定時自動出現*/
/*橫向或縱向捲軸在畫面流量溢出你家的地板時會自動出現嘿吼作*/ {overflow: auto;}
/*透明度*/ {filter: Alpha( Opacity = 70, style = 0 );}
/*獨立移動*/ {position: absolute;right: 22px;top: 22px;twohand2012;}
/*獨立配合切割*/clip: rect( /*切上邊*/ 0px/*留右邊*/ 500px/*留高度*/ 250px /*切左邊*/285px);
/*加圖通用包包*/
標籤貼這裡 {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
標籤貼這裡 {;/*測試用藍色虛線框框*/border:2px #AC55FF dashed;}
標籤貼這裡 {;/*測試用綠色大號文字*/font-size: 52px;color: #00A002;}
/*要進入*/如名片http://www.wretch.cc/user/twohand2012
將: user改為blog或album或guestbook或mypage
/*文字超連結語法*/
...點這裡
<>>a class="maintitle" href=
"http://www.wretch.cc/hala/viewtopic.php?t=306574">
...點這裡<>>/a>
1刪除>>和>>.2修改...點這裡.3三行變一行.4修改網址.就可以了
/*整體文字*/
body{font-size: 12px;color: #555555 ;}
/*內容文字*/
A {font-size: 12px;color: #555555 ;}
/*滑鼠移到連結文字上方文字立體浮起框*/a:hover {border: 2px outset;}
/*滑鼠移到連結文字上方文字顏色*/a:hover {color: #ac55ff ;}
/*滑鼠移到連結文字上方底線取消*/a:hover {text-decoration: none;}
/*滑鼠移到連結文字上方加背景圖*/a:hover {background: url(圖片網址) no-repeat 90% 20%;}
3 /*橫幅區設寬度.高度.與背景圖.網誌標題文字直行靠左*/
/*橫幅區*/
#banner {
margin-top: 0px;height: 393px;width: 630px;
background: url(圖片網址) no-repeat 40% 100%;}
/*滑鼠游過橫幅區*/
#banner a:hover {color: #FF5755 ;}
/*標題區*/
#pageheader {
height: 393px;width: 612px;
background: url(圖片網址) no-repeat 100% 0%;}
/*標題字區加小圖*/
#pageheader h1 {
padding-top: 12px;height: 381px;width: 612px;
background: url(圖片網址) no-repeat 0% 0%;}
/*網誌標題字直行移到左右方加小圖*/
#pageheader h1 A {
font-size: 44px;color:#FF73B7;font-weight: bold;LINE-HEIGHT: 110%;text-decoration: none;
FLOAT: right;margin-right: 72px;height: 311px;width: 66px;padding-left: 22px;padding-top: 12px;display: block;twohand2012;
background: url(圖片網址) no-repeat 50% 38%;}
/*若要獨立移動可使用.再移*/
#pageheader h1 A {position: absolute;left: 22px;top: 22px;twohand2012;}
/*橫幅文章標題*/
h1 .description {
font-size: 12px;color:#ff9291 ;text-decoration: none;
width: 112px;padding-top: 32px;twohand2012;}
/*描述移到右上角放背景圖放小玩意*/
#description2 .description {
font-size: 15px;color:#ff9291 ;text-align: right;
width:180px;padding-left: 12px;
background: url(圖片網址) no-repeat 40% 0%;
position: absolute;right: 0px;top: 22px;twohand2012;}
4 輸入按鈕.文字大小顏色.白細框.粉底色.高度.寬度
input {
font-size: 10px;color: #FFAFD6 ;
border: #FFFFFF 1px solid;
background-color: #FFEBEB;
height: 14px;width: 62px;}
/*好友列.文字大小顏色.白細框.粉底色.高度.寬度*/
select {
font-size: 10px;color: #FFAFD6 ;
border: #FFFFFF 1px solid;
background-color: #FFEBEB;
height: 14px;width: 62px;}
5 /*文章區加背景(不要在這裡做文字設定.區塊也已在上方設定.放圖就好)*/
#content {background: url(圖片網址) no-repeat 100% 0%;}
/*文章日期.文字大小顏色.左留空.高度.寬度加背景圖*/
.date {
font-size: 20px;color: #ff9999;
padding-top: 3px;padding-left: 85px;
height: 62px;width: 400px;
background: url(圖片網址) no-repeat 0% 100%;}
6 /*整體文章加背景*/
.blog {background: url(圖片網址) no-repeat 65% 0% ;}
.blogbody {background: url(圖片網址) no-repeat 50% 0% ;}
/*整篇文章加背景*/
.articletext {background: url(圖片網址) no-repeat 98% 0%;}
7 /*所有文章列表日期文字大小.顏色*/
.articletext TABLE {
font-size: 12px;color:#8000FA;}
/*所有文章列表標題文字大小.顏色*/
.articletext TABLE A {
font-size: 12px ;color:#555555 ;}
8 /*文章標題文字大小顏色.文字行高.上留空.左留空.下留空.寬度.高度.加背景圖*/
.title {
font-size: 26px;color: #7573ff;
line-height: 180%;
padding-top: 27px;padding-left: 90px;padding-bottom: 0px;
width: 347px;height: 61px;
background: url(圖片網址) no-repeat 125% 80% ;}
9 /*文章內文文字大小顏色行高.左上下留空.區塊上留空.寬度.加背景或小圖*/
.innertext {
font-size: 14px;color: #333333 ;
line-height: 182%;
padding-left: 5px;
padding-top: 42px;padding-bottom: 42px;
margin-top: 22px;
width: 452px ! important;
background: url(圖片網址) no-repeat 25% 0%;}
8 /*繼續閱讀直接點圖式改字成圖*/
.extended {margin-left: 137px;padding-right: 52px;padding-left: 52px;padding-top: 38px;twohand2012;}
.extended a {padding-right: 52px;padding-left: 52px;font-size: 0px;color: #ffffff ;twohand2012;line-height: 0%;
padding-top: 38px;twohand2012;letter-spacing: -2PX;
background: url(圖片網址) no-repeat;}
10 -----------------/*引用回應欄*/-------------
/*作者日期文字*/
.posted {
font-size: 0px;color: #ffffff;
text-align: right;border: #ffebeb 5px double;
height: 10px;width: 447px;
background: url(圖片網址) no-repeat;}
/*引用回應文字*/
.posted a {font-size: 10px;color: #ffcde5;line-height: 100%;}
11 /*-------文章訪客回應區共同設定-------*/
/*訪客回應區整體背景顏色*/
.total-comments-div {background-color: #000000 ;}
/*訪客回應區內背景顏色*/
.comments-body{background-color: #777777 ;}
/*給個回應文字大小顏色.間距.高度.加小圖或改字成圖*/
.comments-bottom .comments-head {
font-size: 0px;color: #FFEBEB ;letter-spacing: -3PX ;
height: 100px;twohand2012;
background: url(圖片網址) #FFEBEB no-repeat 50% 50%;}
/*文章訪客留言內容文字大小顏色*/
.comments-body p {font-size: 13px;color: #891788 ;twohand2012;}
/*文章訪客回應打字區加背景*/
.comments-body textarea {
height: 600px;background: url(圖片網址) #fff no-repeat 100% 100%;}
12 /*連結列.連結列標題.連結列框內容.連結列框內容文字改成沒有底線*/
#links , .sidetitle , .side , .side A {text-decoration: none;twohand2012;}
/*滑鼠游過連結列時文字顏色*/
#links a:hover {color: #FF5755 ;}
13 /*行事曆文字大小顏色整體加背景有文章日期小花*/
/*行事曆整體加背景有文章日期小花*/
div.calendar {
padding-top: 5px;height: 140px;
background: url(圖片網址) repeat-Y 50% 100%;}
filter: Alpha( Opacity = 70, style = 0 );
/*行事曆(星期字大小顏色)*/
.calendar {
letter-spacing: NONE;width: 120px;font-size: 6px;color: #000000 ;}
/*行事.年.月.有文日.文字*/ .calendar a {font-size: 10px;color: #000000;}
/*行事歷日期文字*/#links td .calendar {font-size: 10px;color: #000000;}
/*行事歷日期文字*/
#links .calendar td .calendar {
display: block;color: #555555;line-height: 100%;
width: 8px;height: 10px;text-align: center;}
/*行事歷有文章日文字*/
#links td .calendar a {
display: block;width: 8px;height: 10px;text-align: center;}
/*行事歷有文章日區塊加小花*/
#links td .calendar a:link {
background: url(圖片網址) no-repeat center 50%;}
/*行事歷年月*/
.calendarhead {
color: #BD1F6C;}
14 /*我的照片加相框(相片可放大)*//*播放中相簿加相框(相片可放大)*//*首頁連結加小圖*//*我的地盤標題改成圖*/
/*我的地盤標題隱藏*/
.boxMySpace0 .sidetitle {visibility: hidden;}
/*twohand2012地盤改成圖*/
#boxMySpace {height: 2012px;background: url(圖片網址) no-repeat 50% -1%;}
/*twohand2012的地盤加小圖位置由 25% 50%調整或背景*/
.boxMySpace0 .sidetitle{
display: block;height: 44px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*我的照片加相框或背景*/
.boxMySpaceImg{
display: block;height: 90px;width: 120px;padding-top: 7px;
background:url('圖片網址') no-repeat 50% 100% ;}
/*我的照片放大*/
.boxMySpaceImg Img {
height: 150px;width: 122PX;}
/*我的照片精美又大張*/
.boxMySpaceImg {
padding-top: 302px;height: 312px;margin-top: 12px;
background: url(精美又大張的照片網址) 50% 0% no-repeat;}
.boxMySpaceImg Img {
height: 2px;width: 2PX; }
15 /*播放相簿獨立移動相片加相框*/
#boxSlideShow {
height: 110px;width: 111px;text-align: center: center;text-decoration: none;
background:url(圖片網址) no-repeat 50% 100% ;}
#boxSlideShow {font-size: 10px;color: #ffcde5 ;}
/*播放相簿寬度.相片上左留空*/
#boxSlideShow IMG{width: 92px;padding-left: 6px; padding-top: 5px;}
/*播放相簿獨立移動*/
#boxSlideShow {position: absolute; left: 272px;top: 530px;twohand2012;}
/*播放相簿標題隱藏*/ .boxSlideShow0 .sidetitle{display:none;}
/*播放相簿描述隱藏*/ #SlidePicTitle {display:none;}
/*播放相簿暫停隱藏*/ #buttonPlayPause {display:none;}
/*播放相簿上張隱藏*/ #buttonPrev {display:none;}
/*播放相簿下張隱藏*/ #buttonNext {display:none;}
16 /*網誌分類加小圖圖可任意調在上.下.左.右.方.調22px;5px; 25% 50%*/
#blogCategory {
display: block;height: 44px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*未分類*/
#blogCategory A {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*以下七項通用在相簿和留言板時記的加display: block ! important;height: 90px;width: 120px;padding-top: 7px;喔.*/
/*首頁.相簿.網誌.留言.名片.好友.影音.連結加小圖圖可任意調在上.下.左.右.方.調22px;5px; 25% 50%*/
#linkMypage,#linkAlbum,#linkBlog,#linkGbook,#linkUser,#linkFriend,#linkVideo
{display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*首頁連結加小圖圖可任意調在上.下.左.右.方.調22px;5px; 25% 50%*/
#linkMypage {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*相簿連結加小圖圖可任意調在上.下.左.右.方.調22px;5px; 25% 50%*/
#linkAlbum {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
/*網誌連結加小圖two*/
#linkBlog {
display: block;height: 22px;width: 120px;padding-top: 5px;text-decoration: none;
background:url('圖片網址') no-repeat 25% 50% ;}
網誌CSS(二)
全站熱搜
留言列表
my class (0)