close
史上最完整的部落格css語法
分類：部落教學
2008/08/02 23:24
.....進入要拍圖的畫面後 → 按下鍵盤上的「Prt Scr」鍵 →
.....打開小畫家 → 點右鍵選「貼上」→ 存檔 → 上傳相簿
如何將連結列裡的項目調位置呢?例-播放相簿移至首項
.....#links {PADDING-TOP: 230px;
.....#boxSlideShow {MARGIN-TOP: -850px; PADDING-BOTTOM: 650px}
.....#links 可以是任一項.230px先留空.
.....#boxSlideShow 可以是任一項.-850px用負數拉上去.
開機太慢.隱藏卸除不必要的工具.這裡有一堆隱藏.
.....另外.升級IE7啦.瀏覽器上的多餘工具也丟一丟.
.....桌面上的.下方工具列的.慢速防毒軟體啦.....加起來就很可觀了.
.....隱藏連結列標題.sidetitle {display: none;}
.....隱藏好友名單.select {display: none;}
.....隱藏我的相片.boxMySpaceImg {display: none;}
.....隱藏我的人氣.#boxCounter {display: none;}
.....隱藏無名logo圖#logo img {display:none;}
.....隱藏行事曆.calendar {display: none;}
.....隱藏最新文章.boxNewArticle1 {display: none;}
.....隱藏最新文章鎖圖#boxNewArticle img{display:none}
.....隱藏文章標題鎖圖.title img{display:none}
.....隱藏我的訂閱#boxRssList{display:none}
.....隱藏我的RSS.syndicate {display:none}
.....隱藏網誌文章搜尋框框#boxSearch {DISPLAY: none;
.....隱藏網誌文章搜尋#boxSearch FORM {DISPLAY: none;
.....隱藏站內搜尋#scupioSearch {DISPLAY: none;
.....隱藏文章彙集#boxDate { DISPLAY: none;}
.....隱藏捲軸overflow: hidden;
.....隱藏引用與回應尾部.posted { DISPLAY: none;}
.....限制引用.從網誌管理設定.
.....隱藏留言板數目(加設)span.description{display:none}
不顯示文字的小秘方.
.....我將文字設成與背景同色.再禁用右鍵反白.就OK了.
.....另外文字設成1PX或極小值.再禁用右鍵COPY.也行.
消除文字加底線的方法.
.....刪去TEXT-DECORATION:underline;
消除底線a{text-decoration: none;}
孤單的相簿完工日
.....這裡面包含了.LOGO圖更換.RSS圖更換以及NEW圖更換.YA..
.....兩週的相簿語法自我學習.總算有點成績.
.....正如我學習星座兩週便畫出向量星座圖時一樣.
.....沒有任何掌聲的鼓勵.只有我點了一根蠟燭.頒獎給我自己.
.....天地間有一股神祕的真理.亦可從CSS裡反擊.
.....若將NEW圖化作空訊息.空無之中仍有空間地.
.....再將張數化為零.張數普送新圖形.
.....無空之人空有零.有空之人得圖形.
相簿主標題設背景再右移#banner a{
background: transparent url(http:---.gif) no-repeat 100% 0%;font-size: 52px; color: #FF5755; text-decoration: blink ; position: absolute; left: 300px; WIDTH: 500px; }
相簿LOGO圖更換
#logo img {display:none;}
#logo {display: block;
background: url(圖片網址) no-repeat 50% 0%;
width: 1000px; height: 300px;}
相簿RSS圖更換
.syndicate a{visibility: hidden;}
.syndicate img{visibility: hidden;}
.syndicate{font-size: 2px;height: 100px;
background: url(圖片網址) center center;}
相簿NEW圖更換.(隱藏張數.顯示密碼鎖)
b .small-c {visibility:hidden;FONT-SIZE: 0px;color:#B0AFFF ;}
b font.small-c a {;visibility:visible ;color:#FF3799 ; FONT-SIZE: 18px;BACKGROUND: #FFfBF5 !important ;BORDER: #B0AFFF double 4px;}
b font.small-c img{BACKGROUND: #FFF !important ;}
b font.small-c img.newAlbumUpdate {visibility:hidden;;HEIGHT: 30px;WIDTH: 74px;}
b font.small-c{visibility:visible !important;BACKGROUND:url(圖片網址)!important;}
相簿.橫幅設定#banner {margin: 0px 0px 0px 50px;WIDTH: 571px;
FONT-SIZE: 10px ; FONT-COLOR:#7573FF;PADDING-RIGHT: 0px;
PADDING-LEFT: 0px; BACKGROUND:url(圖片網址) no-repeat center top;
PADDING-BOTTOM: -5px; PADDING-TOP: 10px}
相簿.[相簿管理] [樣式管理] [音樂管理] [ 我的金卡會員期限 ]隱藏
#linkMypage,#linkBlog,#linkAlbum,#linkGbook,#linkUser,#linkFriend,#linkVideo{display:none}
相簿.相簿名稱前加小圖b font a{
dusplay:block ;width: 100px;background:url(圖片網址) no-repeat left top ;}
相簿.相簿管理|樣式管理|設定a.small-c {font-size:18px}
相簿.相簿描述.description{LETTER-SPACING: 6px;}
相簿.命名相簿名稱A{TEXT-DECORATION:underline改成none;}
相簿.好友列設定select{ WIDTH: 200px;margin-top: -0px;margin-left: -0px; background:#CECDFF; color:#FF37FD; FONT-SIZE:10px;}
相簿.隱藏好友列select{display:none;}
相簿.隱藏連結列的[ | ] #Myspace.small-c span {visibility:hidden;}
相簿.連結斷行直立排列.sidetitle div.small-c a {display: block;}
相簿.連結列的背景#MySpace.small-c a{ background: url(圖片網址) ;}
相簿.連結列table tr td div {}
相簿.隱藏相簿分類#category {display: none;}
相簿.整體邊框BODY {BORDER: #B0AFFF double 4px;}
相簿.整體下左上右移動邊界BODY {margin: 0px 0px 0px 100px;}
相簿.桌面下左上右移動邊界TABLE {margin: 0px 0px 0px 100px;}
相簿.橫幅下左上右移動邊界#banner {margin: 0px 300px 0px 0px;}
相簿.連結下左上右移動邊界.sidetitle .small-c{margin: 0px 0px 0px 240px;}
相簿.其他物件移動邊界也一樣.但要在上一層區塊大小容許範圍內.
相簿.相片加上雙框框.side IMG { BORDER: #B0AFFF double 8px}
相簿.相片張數.相簿名稱文字設定b .small-c{COLOR: #BB73FF;FONT-SIZE: 12px ;}
相簿.相簿名稱文字設定b font.small-c a{COLOR: #00DC71;FONT-SIZE: 14px ;}
相簿.隱藏相片張數.相簿名稱b .small-c{visibility:hidden;}
相簿.顯示相簿名稱b font.small-c a{visibility:visible;}
前面的隱藏如果用的是display: none(不顯示不留空間)
都把它改成visibility:hidden(不顯示但保留空間)
然後才能使某原件visibility:visible(重新顯示)
相簿.顯示密碼鎖font.small-c a img{visibility:visible;}.(不會閃.仍未解)
相簿.隱藏密碼鎖font.small-c a img{visibility:hidden;}
相簿.隱藏NEW語法b font.small-c img.newAlbumUpdate {visibility:hidden;}
相簿.顯示NEW語法b font.small-c img.newAlbumUpdate {visibility:visible;}
相簿.雙框沒大沒小.side { }
......side IMG { BACKGROUND: url(圖片網址) no-repeat center center;
.....width: 160px;BORDER: #B0AFFF double 12px}
留言板.整體背景更換.
BODY {BACKGROUND: url(圖片網址) #ffeeee fixed no-repeat center center;}
留言板.隱藏好友的留言板 select{display:none;}
留言板.隱藏搜尋#search {display: none;}
留言板.隱藏人氣#counter font.small-c{display:none}
留言板.標題文字.sidetitle{}
留言板.留言文字.side{}
留言板.留言內容底圖form .side textarea {background:url(圖片網址);}
和前方文字繼承設定有關.我的是.small-c{font-size:10pt; !important;} !important 刪掉.
好像跟瀏覽器也有關係.我用IE7瀏覽器是OK了.
留言板.怎麼把[我要留言]的字改成我要的圖呢?
#postmsg a{font-size:-0px !important ;width:300pt;height:60pt;background: url(圖片網址);}別的卻不行.不知如何弄出通用語法.........努力中................
網誌.兩張背景底圖語法.body {的背景單色要消掉喔.
html {background-image: url(第二張底圖網址);}
body {cursor:url(滑鼠網址);background-image: url(一般第一張底圖網址);}
網誌.大區塊邊界移動#container1 {margin:100px 0px 0px 250px;}
網誌.橫幅設定#banner {background: url(背景網址)
no-repeat;margin-left: -13px;height:124px;text-align: left;}
網誌點入標題h1 .description {}
網誌網誌描述#description2 .description {}
網誌分類文章中的標題#boxCategory .side strong a {}
網誌文章整體#content {}
網誌文章主體.blogbody {}
網誌文章內容.articletext {}
網誌文章標題.title {}
網誌文章內文.innertext {}
網誌最新的回應中更改字體
網誌整體文字上層設定繼承性A {}
網誌連結文字上層設定繼承性#links A {}
.boxNewComment1 .side {color: #FF3799;}
.boxNewComment1 .side a{color: #FF73FD;}
另外.其他.box.......也都繼承更上層嘍.可以在各別設定.
網誌.最新的引用中加捲軸
#boxNewTrackback {width:200px;height:200px;overflow: auto;-/*捲軸語法*/-
網誌.文章點進去的標題
H1 .description {FONT-SIZE: 10px; COLOR: #ff9291; PADDING-TOP: 3px;}
background: transparent url(背景網址) no-repeat scroll 75% 105%;
font-size: 25px;width: 400px;color:#7573ff;line-height:150%;height:45px;}
網誌.文章置中.innertext {text-align:center}
網誌.文章字體設定.
.innertext {FONT-SIZE: 14px;FONT-COLOR: #6666CC;-/*網誌文章內容內文*/-}
.articletext {FONT-SIZE: 14px;FONT-COLOR: #6666CC;-/*網誌文章內容*/- }
網誌.本文章已受主人保護.innertext form {}
網誌.繼續閱讀的設定.extended {
background: url(圖片網址) no-repeat 95% 50%;padding-right: 20px; margin-top: -50px; font-size: 10px;line-height: 100%;text-align: right;font-color: #dddddd;height: 30px;}
.extended a {color: #ffffff ;}
網誌.回應文字區設定背景和文字.comments-body TEXTAREA
{ BACKGROUND: url(背景網址)#fffefe no-repeat right top;HEIGHT: 450px ;font-size: 15px;}
網誌.回應區背景透明textarea#text{background: none;}
網誌.給個回應設定.comments-bottom .comments-head {
background: url(圖片網址) no-repeat left top;height: 100px;}
網誌.連結列的欄位.side {BORDER: #e7cdff 5px double; BACKGROUND: url(圖片網址) transparent scroll repeat 0% 0%; COLOR: #a561e9;TEXT-ALIGN: center}
網誌.連結列的文字換行#links a { display: block;
網誌.連結列的標籤(首頁相簿網誌留言名片好友影音)#boxMySpace #service #serviceList
網誌.RSS更換背景
.syndicate a{visibility: hidden;}
.syndicate img{visibility: hidden;}
.syndicate{font-size: 2px;height: 40px;
background: url(背景惘網址) no-repeat center center;}
網誌.LOGO的更換與設定
#links .powered br {display: block;}
#links .powered {}
#links .powered .powerlogo img {display: none;}
#links .powered .powerlogo {margin-top: 5px;display: block;background: url(背景網址) no-repeat; width: 200px;height: 100px;}
.total-comments-div .powered {}
網誌.移動人氣#boxCounter {position:absolute;top:330px;}
#boxCounter .sidetitle{display:none}
#boxCounter br {DISPLAY: none}
名片.隱藏[加為好友] [送禮物給TWOHAND2012] .boxAddFriendLink,.boxGiftLink{display:none ;}
名片.如何顯示我的人氣#counter font.small-c {color:#9291FF;width: 82px;}
名片.LOGO更換 #logo.small-c a img {visibility:hidden}
#logo.small-c {background: url(圖片網址) no-repeat; width: 820px;height: 100px;}
部落格.改字改圖的遊戲規則大都通用.巧在相關配套細節運用.基本模型如下:
(1)#某標籤 a {將文字font-size: 0px;隱藏後用底圖background: url(http:--.gif) 取代.再設寬width: 100px;設高height: 50px;}
或(1)#某標籤 img {將圖visibility:hidden;隱藏而保留原空間}
(2)#某標籤 {將空間visibility:visible ;顯現後用底圖background: url(http:--.gif) 取代.再設寬width: 100px;設高height: 50px;}
(3)--天啊.不行--.初學者請逐項設入原語法以留原相關配套細節.勿憑空起草.
請 觀察一下我的部落格有許多改字改圖的地方都嘛用這一招.
部落格.jpg照片放進連結列資料夾內>img src="圖片網址"border=0>
部落格.雙框.side { BORDER: #B0AFFF double 5px}也不錯玩喔.
部落格.任意移動物件position: absolute;left:--px;top:--px;
部落格.滑鼠移到變色彈動A:hover { COLOR: #8F19FF; TEXT-DECORATION: underline;POSITION: relative; right: 5px; bottom: 5px}
部落格.圖片黑白{FILTER: xray Alpha(opacity=100 style=1)}
部落格.CSS的語法隨便放上去就好了嗎?
基本上CSS擺放的順序.只是一個告知順序.它的混亂.除了增加你的開啟時間.掛網機率.
錯失顯示.和將來找尋修改重複誤寫以外.....不會.它不會改變最後呈現的結果的.
我也和你一樣.正在學習.
.....我可不想渡過功夫大師的辛苦童年.
.....我會從一點一滴的修改樂趣當中去體會整體創意.
.....創意並不會來自答案.越來越多的答案招式只會壓垮自己.
.....我到現在只記得一招.."如何提出一個有趣的問題".
.....在參考不同答案的同時.我會稍稍的加上一點叛逆.
.....如果我不能找到更有趣的答案.我便辜負了生命的延續.
.....不論我現在走在學習階段的那裡.我都會隨時提醒自己.
.........."如何提出一個有趣的問題".
如何提出一個有趣的問題呢.
.....我的方法方法很簡單.
.....我會先到處去瀏覽別人的作品.觀察一下他的有趣在那裡.
.....我不會只想模仿它的作品.而是做出自己的創意.
.....模仿和創意.這個看在一般人眼裡好像是難以區分的問題.
.....其實它是有非常明確的定義.
.....模仿是物理的加法作用.而創意是化學的乘法作用.
.....新的生命元素會和舊的生命元素產生新的生命形式.
.....一隻貓身上插了一朵花是模仿.
.....一隻貓身上長出一朵花是創意.
.....除了貓的毛草必須具備光合作用的滋養能力.
.....花朵的本身也必須有耐翻滾磨擦如橡皮般的能力.
.....而這隻貓也不必再取悅他的主人而獲得自由的新生命.
我對我自己的期許
.....我究竟想要創造一個什麼樣的園地呢.
.....我不要貪婪網路人氣.在我這隻貓身上插滿鮮花.
.....看著無情的摘花客捏著鼻子離開.
.....也不告訴我.我還有哪裡不可愛.
.....更不會留下來陪我分享.他的創意更可愛.
.....我寧願純粹的啟發孩子般的創意.
.....如何悟透模式.而不是抄襲模樣.
.....如何回到一無所知的伏犧時代.
.....只要了解太極如何生兩儀.兩儀如何生四象.
.....便能了解一顆球一塊空地.就能找到友情與愛情.
.....沉迷於複雜的人生消費遊戲.只會更空虛.
.....創意的目的是在解決問題.而不是沉迷於學習的樂趣.
.....我不要把一句話的事情.變成一年的教材.來留住人氣.
.....我寧願陪伴一隻貓.讓牠能開出自己生命中的第一朵花.
.....不論他愛的是個性的樊谷花.還是市場的達利花.
.....在他可以發表論文時.還記得有一個憂鬱者.他是我兄弟.
幫助創造者的生命
.....除非學習者在學習的當時.就是用創造者的心情在學習.
.....否則不論學習者多麼努力.永遠不會成為創造者.
.....創造者在學習1+1=2就已看到2少了1還剩1這件事.
.....然後一路過關斬將的學習新公式.
.....而學習者卻渡過十幾年甲加甲..乙加乙等於丁的背誦日子.
.....他們永遠不會像創造者一樣在學會
.....b font.small-c a和img.newAlbumUpdate之後.
.....自己去創造出.small-c img這樣的組合文字.
.....大膽的放進CSS裡面.看會發生什麼變化.
.....每一隻工蜂在吃了蜂王乳之後都可以變成蜂王.
.....每一個生命在發揮創意之後都可以成為創造者.
.....我經常提醒我自己.千萬不要因為課業或生活壓力而放棄問.為什麼.如果....
.....我要向聖人學習謙卑的學習者精神.
.....但在內心永遠不放棄創造者的使命.
.....創造者最大的使命.不是自私的完成個人什麼偉大的作品.
.....而是將創造者的邏輯傳承下去.讓其他的生命找到生命的意義.
我喜歡配合小幫手的CSS初期學習有個小秘方
.....我在對於CSS名詞和位置都還不太熟悉時.
.....常常在設定數字時加上一點小密碼來增加辨識.
.....例如我的總寬度是971文章區是694連結列是199....
.....諸如此類的許多設定都像這樣盡量特別密碼化.
.....當我再進入CSS修改表格時.
.....我便能明確的確定它的名稱和位置了.
.....然後我會很雙子的玩遍小幫手的每一項可設定功能調整.
.....看似調皮.其實我會不斷的進去CSS看剛才那個調整的名詞寫法.
.....在我了解了名詞寫法與遊戲規則之後(先存檔).便開始天蠍的大膽叛逆.
.....在CSS如果10變100呢.負100呢...3715%呢.(取自我的相簿背景圖).
.....最後我會很處女的修整並記住我剛才的創意.考驗一下自己.
.....把我的CSS頁面.放到我的最愛.不用小幫手.直接點進去改.
.....不但更快.而且CSS的原始創意能力.永遠是套用機器所無法取代.
一開始學習CSS時.
.....我總是很擔心一不小心就會把版面調亂.再也調不回來了.
.....而我又很雙魚的不願意把辛辛苦苦的心血結晶放棄.從新設定.
.....後來我學會在不論任何新的設定前.
.....先在"修改CSS樣式表"版面底下的"暫存檔1"或2或3.點一下.
.....然後在"存檔"點一下.如此一來.我便可以放心的做新的調整.
.....任何狀況發生時.我只要將原先的"暫存檔1"或2或3.點一下.
.....然後在"讀檔"點一下.然後在"目前使用"點一下.
.....然後在"存檔"點一下.如此一來.我便可以找回原先的設定了.
.....後來在我放心的設定下.經常在不小心打錯字.設錯行.
.....甚至是大膽的嚐試負數值PX的使用.而發生一些有趣的跑框特殊效果.
.....卻發現了魁儡吊線法能使一些項目上下位移.還有風箏放線法.
.....能使一些指定的字飛出框外.而這些創意其實是來自於錯誤的修正.
版面調整的問題
.....步驟一.設定#container1{-/*整體內容區塊一-*/-WIDTH: 971px; -/*寬度*/-
.....步驟二.設定#content { -/*文章區*/-PADDING-LEFT: 300px; -/*左留指定空間*/-
..........調整300px的大小直到文章區左縁起點讓你滿意.
.....步驟三.設定#content { -/*文章區*/--*/-WIDTH: 400px; -/*寬度*/-
..........調整400px的大小直到文章區寬度讓你滿意.
.....步驟四.設定#links {-/*連結區*/--*/-PADDING-LEFT: 500px; -/*左留指定空間*/-
..........調整500px的大小直到連結區左縁起點讓你滿意.
.....步驟五.設定#links {-/*連結區*/--*/-WIDTH: 200px; -/*寬度*/-
..........調整200px的大小直到連結區寬度讓你滿意.
跑框問題的解決.
.....這是我最難忘的經驗.想像桌子上放了一盆花.
.....那麼花盆本身的大小.也就是寬度和高度(文章區有延續性一般不設高度除外).
.....語法是 HEIGHT: 100px; -/*???的高度..框線內的*/-
................WIDTH: 100PX; -/*???的寬度..框線內的*/-
.........如果設了過大的PX值???PX那麼這花盆就會跨或擠走別的桌子.
.....然後是花盆外緣的內縮空間.也就是城牆外的護城河的寬度.
.....語法是 MARGIN-LEFT: 10px; -/*???的左指定邊界*/-
................MARGIN-RIGHT: 10px; -/*???的右指定邊界*/-
................MARGIN-TOP: 10px; -/*???的上指定邊界*/-
................MARGIN-BOTTOM: 10px; -/*???的下指定邊界*/-
.........如果設了大的負數值???PX那麼這花盆就會跨或飛到別的桌子上.
.....然後是花盆內緣的內縮空間.也就是除去可插花的針山以外與花盆的寬度.
.....語法是PADDING-TOP: 10px; -/*???的上留指定空間*/-
...............PADDING-RIGHT: 10px; -/*???的右留指定空間*/-
...............PADDING-LEFT: 10px; -/*???的左留指定空間*/-
...............PADDING-BOTTOM: 10px; -/*???的下留指定空間*/-
.........如果設了大的負數值???PX那麼這花朵就會跨或飛到花盆外面.
.....另外一提是花盆的厚度.也就是邊框粗細.一般不設則為無邊框.
.....語法是BORDER-RIGHT: #ffcccc 1px solid ; -/*???的右指定框線顏色粗細*/-
...............BORDER-TOP: #ffcccc 1px solid ; -/*???的上指定框線顏色粗細*/-
...............BORDER-LEFT: #ffcccc 1px solid ; -/*???的左指定框線顏色粗細*/-
...............BORDER-BOTTOM: #ffcccc 1px solid ; -/*???的下指定框線顏色粗細*/-
.....那麼這盆花要放在桌子左邊算起.還是右邊算起.還是中間呢???好天枰喔.
.....語法是FLOAT: lift,right,center; -/*???區塊整體的配置靠左.右.置中*/-
.....那麼這花朵要放在花盆左邊算起.還是右邊算起.還是中間呢.
.....語法是TEXT-ALIGN:lift,right,center,; -/*???內容的水平位置對齊左.右.置中*/-
背景的問題.
.....這是我在學習CSS時最首先接觸的項目.因為它最簡單了.
.....首先我將我的一些圖片上傳到我的相簿裡.
.....在上傳時.版面左下方有一個進階功能的尺寸設定.
.....當我設定1024*1024時.我便可以有一張版面較大的背景圖.
.....而在選擇品質時.由於是版面.我選擇了最佳品質.
.....上傳成功後.我進入我的相簿.找到圖.點顯示.點右鍵.點內容.抓網址.
.....在CSS裡面有那些地方可以設背景呢?我很雙子的在每個地方都試了一下.
.....例如整體背景.BODY {
.....BACKGROUND-IMAGE: -/*???背景*/-
.....url(http://www.wretch.cc/blog/TWOHAND2012);
.....-/*???背景網址*/-
.....我在設定.posted {-/*引用與回應尾部*/-- 的背景圖時.
.....我並不需要事先去切割一個適當的圖形.
.....在我現在的使用裡.那個細長條的背景.其實原圖是很大的.
.....它其實就像是一口井.只顯露出我們挖出的空間.
.....在我已經了解了前面的的花盆遊戲之後.井的大小就解決了.
.....我想要將這口井移到我圖片上想要的位置時.
.....語法是BACKGROUND-POSITION: 100% 100%; -/*???背景的上下左右位置*/-
.....我想要用一張小圖來重複鋪滿一口大景時.
.....語法是.BACKGROUND-REPEAT: x,Y,no-repeat ;
.....-/*???背景重複直向與橫向或都不重複*/-
.....我也可以用一個單一的顏色來做背景.
.....語法是BACKGROUND: #fff; -/*???背景顏色*/-
.....我上網搜尋"色碼表"找到一張色碼參考表的網址:
.....http://myweb.hinet.net/home2/rhinejo/home/color/color-cord.html
.....我的整體背景要固定不隨捲軸的捲動而移動時.
.....語法是BACKGROUND-ATTACHMENT: fixed;
.....-/*網頁背景不捲動.若要捲動就設SCROLL或刪除此語法*/-
文字設定的問題.
.....最讓我覺得困擾的是.根本不知道它到底設在哪裡.
.....而且不同的套用.為什麼在不同的位置作設定.
.....既然我已經做了備份存檔.我就大膽的把一個一個的FONT-SIZE: 10px;
.....加個0變撐十倍大的FONT-SIZE: 100px;--哈哈.
.....然後到版面上去看誰變大了.我就抓到哪一個項目就是在哪裡調了.
.....牡羊座的方法確實痛快又有效.
.....然後我就用備份還原.然後只改那一項就O.K.了.
.....但是為什麼有些不相干的字也跟著改變了呢.
.....原來文字的設定有它的繼承性.沒設定時.就會繼承它的最上層設定.
.....所以我找到的其實是它的爺爺.然後一堆堂兄堂弟就跟著改名改姓了.
.....然後我就改用射手座的方法.直接指名道姓的針對它.
.....對於我要設而沒有設的項目.把FONT-SIZE: 100px;直接加下去--哈哈.
.....難怪火象的人對於機器這種不會生氣的東西.學的特別快.
.....以下是有關於文字設定的語法.
.....TEXT-DECORATION: -/*???文字底線可設定值*/-
.....none/一般值.underline/加底線.
.....overline/上標線.line-through/加註取消線.;
.....FONT-SIZE: 14px; --/*???的字體大小*/--
.....FONT-COLOR: #6666CC; -/*???的文字顏色*/-
.....FONT-WEIGHT: normal,100,400,700,900; -/*???的文字粗細*/-
.....FONT-FAMILY: Georgia, arial,helvetica,sans-serif
..... -/*???的文字字型*/--
.....FONT-STYLE: italic,normal,; -/*???的文字斜體*/-
.....VERTICAL-ALIGNT:-/*???的文字的垂直位置可設定值*/-
.....BASELINE/底線為準.TEXT-TOP/向上對齊.TEXT-BOTTOM/向下對齊.
.....SUPER/上標字.SUB/下標字.TOP/上層字.MIDDLE/中層字.BOTTOM/下層字.
.....LETTER-SPACING: 6px; -/*???的文字間距*/-
.....LINE-HEIGHT: 150%; -/*???的文字行距*/-
透明濾鏡效果的問題.
.....有時我魔羯的發現隨著瀏覽器所預設項目容許的不同.通常較大區塊才有用.
.....它會將整個區塊的字.圖.框.全部透明化.文字淡了.可以加深色度.
.....語法中的形式1-10是隨瀏覽器的預設而定.有空可以玩玩看特效.
.....FILTER: Alpha(opacity=75,enabled=10);
.....-/*???濾鏡效果透明度75%及形式第10項*/-
隱藏或顯示的問題.
.....有時我會水瓶的把某個項目刪除.試試看它會不會不見了.
.....因為繼承性的特性仍會使它以一般未變更原貌出現.
.....所以我必須特別在指定項目內注明不顯示.
.....語法是DISPLAY: none; -/*???完全不顯示*/-
.....一般使用DISPLAY: none.是用來做--不顯示.
.....而---要顯示.那就直接把DISPLAY: none---不顯示.的字串刪掉就好了.
.....如果有使用了DISPLAY-list-style:--要顯示--那麼需要設定顯示什麼呢....
..............天靈靈.地靈靈.各方高手來顯靈...
.....基本上.list(清單)-style(樣式):指定item(原設定值的繼承).
.....是指原瀏覽器上已設定並容許的style字樣.
.....例如:visibile-使顯示.auto-自動值.normal-一般值.disc-實心圓點.
.....circle-空心圓點.square-空心方圓......要翻字典了
.....而我的朋友的瀏覽器是新是舊或是他牌還不保證看得到喔.
.....我好期待有喜歡飆CSS的金牛能跳出來說..
.....不用........ ul {list-style:???????=01;}..0幾自己選.
不顯示文字的小秘方.
.....我將文字設成與背景同色.再禁用右鍵反白.就OK了.
.....另外文字設成1PX或極小值.再禁用右鍵COPY.也行.
捲軸加設時的問題.
.....當我很獅子的希望我那美麗的大背景.或是可愛的橫幅都不要捲走時.
.....我就必須將我的文章和連結列加設捲軸.讓它們自己走.
.....語法是overflow: auto;-/*???捲軸語法*/-
.....另外我必須補充一個高度HEIGHT: 300px; -/*???的高度..框線內的*/-
.....大畫面還是會上下微動.將下留白減少(有一堆東西可以減)
.....#container1{-/*設定內容區塊一*/-
.....HEIGHT: 500px; -/*內容區塊一的高度..框線內的*/-
自訂軸捲的語法是
.....SCROLLBAR-FACE-COLOR: #FFCCCC;-/*捲軸滑動版的顏色*/-
.....SCROLLBAR-HIGHLIGHT-COLOR: #FFF6F2; -/*捲軸滑動版左上邊框的顏色*/-
.....SCROLLBAR-SHADOW-COLOR: #EBD5C0; -/*捲軸滑動版右下邊框的顏色*/-
.....SCROLLBAR-3DLIGHT-COLOR: #EBD5C0; -/*捲軸左上邊框的顏色*/-
.....SCROLLBAR-ARROW-COLOR: #EBD5C0; -/*捲軸上下指標的顏色*/-
.....SCROLLBAR-TRACK-COLOR: #ffeeee; -/*捲軸軌道底部的顏色/-
.....SCROLLBAR-DARKSHADOW-COLOR: #FFF6F2; -/*捲軸右下邊框的顏色*/-
.....SCROLLBAR-BASE-COLOR: #FFF6F2;-/*捲軸基本的顏色*/-
軸捲的顏色取材搭用你網誌色彩例如#body{}裡的背景底色來換#------也不錯看喔.用你文章的雙框色 border: 5px double #------來換#FFF更有整體感了.
網址的連結如何放在我發表的文章中變成點下就能連結呢?
.....很簡單.在寫文章框框的上緣有個"使用進階編輯器"
.....先點下去.變成進階編輯表格型態後再發文.就可以了.
.....舊文章要改呢.我用比較處女座的方法.先複製起來.另外用進階器發表一次.
.....有了備份.再複製一份回來.在修改時.先改成進階編輯.
.....舊的全部刪掉.然後將備份從新貼上.看到網址會反紅就對了.
.....如果字體變小.全選反白後.上方可以改字體喔.
html {
}
BODY {-------------------------/*設定整個網頁的*/-----------------
cursor:url("游標網址");
-/*游標網址*/--
FONT-SIZE: 14px; --/*一般未設定時繼承的字體大小*/--
FONT-COLOR: #6666CC; -/*一般未設定時繼承的文字顏色*/-
FONT-WEIGHT: normal,100,400,700,900; -/*???的文字粗細*/-
FONT-FAMILY: Georgia, arial,helvetica,sans-serif -/*一般未設定時繼承的文字字型*/--
LETTER-SPACING: 6px; -/*一般未設定時繼承的文字間距*/-
LINE-HEIGHT: 150%; -/*一般未設定時繼承的文字行距*/-
BACKGROUND-ATTACHMENT: fixed; -/*網頁背景不捲動.若要捲動就設SCROLL*/-
BACKGROUND-POSITION: 100% 100%; -/*網頁背景的上下左右位置*/-
BACKGROUND-COLOR: #FFFFFF; -/*背景的顏色*/-
BACKGROUND-IMAGE: -/*網頁整體背景*/-
url(http://www.wretch.cc/blog/TWOHAND2012);
-/*網頁整體背景網址*/-
HEIGHT: 500px; -/*網頁的高度..框線內的*/-
WIDTH: 800PX; -/*網頁的寬度..框線內的*/-
PADDING-TOP: 0px; -/*網頁的上留指定空間*/-
MARGIN-BOTTOM: 0px; -/*網頁的下指定邊界*/-
}
#blog_main {------------------/*設定主要整體的*/----------------------
TEXT-ALIGN: center -/*主要整體的水平位置對齊*/-
HEIGHT: 500px; -/*主要整體的高度..框線內的*/-
WIDTH: 800PX; -/*主要整體的網頁的寬度..框線內的*/-
PADDING-TOP: 0px; -/*主要整體的上留指定空間*/-
MARGIN-BOTTOM: 0px; -/*主要整體的下指定邊界*/-
}
#container1{---------------/*設定內容區塊一*/------------
BACKGROUND-COLOR: transparent; -/*內容區塊一的背景顏色*/-
TEXT-ALIGN: center -/*內容區塊一的水平位置對齊*/-
HEIGHT: 500px; -/*內容區塊一的高度..框線內的*/-
WIDTH: 800PX; -/*內容區塊一的網頁的寬度..框線內的*/-
PADDING-TOP: 0px; -/*內容區塊一的上留指定空間*/-
MARGIN-BOTTOM: 0px; -/*內容區塊一的下指定邊界*/-
}
引用：http://tw.myblog.yahoo.com/jw!CKNB6J2BERppujL92n13CSpftnQHQQ--/article?mid=436
分類：部落教學
2008/08/02 23:24
.....進入要拍圖的畫面後 → 按下鍵盤上的「Prt Scr」鍵 →
.....打開小畫家 → 點右鍵選「貼上」→ 存檔 → 上傳相簿
如何將連結列裡的項目調位置呢?例-播放相簿移至首項
.....#links {PADDING-TOP: 230px;
.....#boxSlideShow {MARGIN-TOP: -850px; PADDING-BOTTOM: 650px}
.....#links 可以是任一項.230px先留空.
.....#boxSlideShow 可以是任一項.-850px用負數拉上去.
開機太慢.隱藏卸除不必要的工具.這裡有一堆隱藏.
.....另外.升級IE7啦.瀏覽器上的多餘工具也丟一丟.
.....桌面上的.下方工具列的.慢速防毒軟體啦.....加起來就很可觀了.
.....隱藏連結列標題.sidetitle {display: none;}
.....隱藏好友名單.select {display: none;}
.....隱藏我的相片.boxMySpaceImg {display: none;}
.....隱藏我的人氣.#boxCounter {display: none;}
.....隱藏無名logo圖#logo img {display:none;}
.....隱藏行事曆.calendar {display: none;}
.....隱藏最新文章.boxNewArticle1 {display: none;}
.....隱藏最新文章鎖圖#boxNewArticle img{display:none}
.....隱藏文章標題鎖圖.title img{display:none}
.....隱藏我的訂閱#boxRssList{display:none}
.....隱藏我的RSS.syndicate {display:none}
.....隱藏網誌文章搜尋框框#boxSearch {DISPLAY: none;
.....隱藏網誌文章搜尋#boxSearch FORM {DISPLAY: none;
.....隱藏站內搜尋#scupioSearch {DISPLAY: none;
.....隱藏文章彙集#boxDate { DISPLAY: none;}
.....隱藏捲軸overflow: hidden;
.....隱藏引用與回應尾部.posted { DISPLAY: none;}
.....限制引用.從網誌管理設定.
.....隱藏留言板數目(加設)span.description{display:none}
不顯示文字的小秘方.
.....我將文字設成與背景同色.再禁用右鍵反白.就OK了.
.....另外文字設成1PX或極小值.再禁用右鍵COPY.也行.
消除文字加底線的方法.
.....刪去TEXT-DECORATION:underline;
消除底線a{text-decoration: none;}
孤單的相簿完工日
.....這裡面包含了.LOGO圖更換.RSS圖更換以及NEW圖更換.YA..
.....兩週的相簿語法自我學習.總算有點成績.
.....正如我學習星座兩週便畫出向量星座圖時一樣.
.....沒有任何掌聲的鼓勵.只有我點了一根蠟燭.頒獎給我自己.
.....天地間有一股神祕的真理.亦可從CSS裡反擊.
.....若將NEW圖化作空訊息.空無之中仍有空間地.
.....再將張數化為零.張數普送新圖形.
.....無空之人空有零.有空之人得圖形.
相簿主標題設背景再右移#banner a{
background: transparent url(http:---.gif) no-repeat 100% 0%;font-size: 52px; color: #FF5755; text-decoration: blink ; position: absolute; left: 300px; WIDTH: 500px; }
相簿LOGO圖更換
#logo img {display:none;}
#logo {display: block;
background: url(圖片網址) no-repeat 50% 0%;
width: 1000px; height: 300px;}
相簿RSS圖更換
.syndicate a{visibility: hidden;}
.syndicate img{visibility: hidden;}
.syndicate{font-size: 2px;height: 100px;
background: url(圖片網址) center center;}
相簿NEW圖更換.(隱藏張數.顯示密碼鎖)
b .small-c {visibility:hidden;FONT-SIZE: 0px;color:#B0AFFF ;}
b font.small-c a {;visibility:visible ;color:#FF3799 ; FONT-SIZE: 18px;BACKGROUND: #FFfBF5 !important ;BORDER: #B0AFFF double 4px;}
b font.small-c img{BACKGROUND: #FFF !important ;}
b font.small-c img.newAlbumUpdate {visibility:hidden;;HEIGHT: 30px;WIDTH: 74px;}
b font.small-c{visibility:visible !important;BACKGROUND:url(圖片網址)!important;}
相簿.橫幅設定#banner {margin: 0px 0px 0px 50px;WIDTH: 571px;
FONT-SIZE: 10px ; FONT-COLOR:#7573FF;PADDING-RIGHT: 0px;
PADDING-LEFT: 0px; BACKGROUND:url(圖片網址) no-repeat center top;
PADDING-BOTTOM: -5px; PADDING-TOP: 10px}
相簿.[相簿管理] [樣式管理] [音樂管理] [ 我的金卡會員期限 ]隱藏
#linkMypage,#linkBlog,#linkAlbum,#linkGbook,#linkUser,#linkFriend,#linkVideo{display:none}
相簿.相簿名稱前加小圖b font a{
dusplay:block ;width: 100px;background:url(圖片網址) no-repeat left top ;}
相簿.相簿管理|樣式管理|設定a.small-c {font-size:18px}
相簿.相簿描述.description{LETTER-SPACING: 6px;}
相簿.命名相簿名稱A{TEXT-DECORATION:underline改成none;}
相簿.好友列設定select{ WIDTH: 200px;margin-top: -0px;margin-left: -0px; background:#CECDFF; color:#FF37FD; FONT-SIZE:10px;}
相簿.隱藏好友列select{display:none;}
相簿.隱藏連結列的[ | ] #Myspace.small-c span {visibility:hidden;}
相簿.連結斷行直立排列.sidetitle div.small-c a {display: block;}
相簿.連結列的背景#MySpace.small-c a{ background: url(圖片網址) ;}
相簿.連結列table tr td div {}
相簿.隱藏相簿分類#category {display: none;}
相簿.整體邊框BODY {BORDER: #B0AFFF double 4px;}
相簿.整體下左上右移動邊界BODY {margin: 0px 0px 0px 100px;}
相簿.桌面下左上右移動邊界TABLE {margin: 0px 0px 0px 100px;}
相簿.橫幅下左上右移動邊界#banner {margin: 0px 300px 0px 0px;}
相簿.連結下左上右移動邊界.sidetitle .small-c{margin: 0px 0px 0px 240px;}
相簿.其他物件移動邊界也一樣.但要在上一層區塊大小容許範圍內.
相簿.相片加上雙框框.side IMG { BORDER: #B0AFFF double 8px}
相簿.相片張數.相簿名稱文字設定b .small-c{COLOR: #BB73FF;FONT-SIZE: 12px ;}
相簿.相簿名稱文字設定b font.small-c a{COLOR: #00DC71;FONT-SIZE: 14px ;}
相簿.隱藏相片張數.相簿名稱b .small-c{visibility:hidden;}
相簿.顯示相簿名稱b font.small-c a{visibility:visible;}
前面的隱藏如果用的是display: none(不顯示不留空間)
都把它改成visibility:hidden(不顯示但保留空間)
然後才能使某原件visibility:visible(重新顯示)
相簿.顯示密碼鎖font.small-c a img{visibility:visible;}.(不會閃.仍未解)
相簿.隱藏密碼鎖font.small-c a img{visibility:hidden;}
相簿.隱藏NEW語法b font.small-c img.newAlbumUpdate {visibility:hidden;}
相簿.顯示NEW語法b font.small-c img.newAlbumUpdate {visibility:visible;}
相簿.雙框沒大沒小.side { }
......side IMG { BACKGROUND: url(圖片網址) no-repeat center center;
.....width: 160px;BORDER: #B0AFFF double 12px}
留言板.整體背景更換.
BODY {BACKGROUND: url(圖片網址) #ffeeee fixed no-repeat center center;}
留言板.隱藏好友的留言板 select{display:none;}
留言板.隱藏搜尋#search {display: none;}
留言板.隱藏人氣#counter font.small-c{display:none}
留言板.標題文字.sidetitle{}
留言板.留言文字.side{}
留言板.留言內容底圖form .side textarea {background:url(圖片網址);}
和前方文字繼承設定有關.我的是.small-c{font-size:10pt; !important;} !important 刪掉.
好像跟瀏覽器也有關係.我用IE7瀏覽器是OK了.
留言板.怎麼把[我要留言]的字改成我要的圖呢?
#postmsg a{font-size:-0px !important ;width:300pt;height:60pt;background: url(圖片網址);}別的卻不行.不知如何弄出通用語法.........努力中................
網誌.兩張背景底圖語法.body {的背景單色要消掉喔.
html {background-image: url(第二張底圖網址);}
body {cursor:url(滑鼠網址);background-image: url(一般第一張底圖網址);}
網誌.大區塊邊界移動#container1 {margin:100px 0px 0px 250px;}
網誌.橫幅設定#banner {background: url(背景網址)
no-repeat;margin-left: -13px;height:124px;text-align: left;}
網誌點入標題h1 .description {}
網誌網誌描述#description2 .description {}
網誌分類文章中的標題#boxCategory .side strong a {}
網誌文章整體#content {}
網誌文章主體.blogbody {}
網誌文章內容.articletext {}
網誌文章標題.title {}
網誌文章內文.innertext {}
網誌最新的回應中更改字體
網誌整體文字上層設定繼承性A {}
網誌連結文字上層設定繼承性#links A {}
.boxNewComment1 .side {color: #FF3799;}
.boxNewComment1 .side a{color: #FF73FD;}
另外.其他.box.......也都繼承更上層嘍.可以在各別設定.
網誌.最新的引用中加捲軸
#boxNewTrackback {width:200px;height:200px;overflow: auto;-/*捲軸語法*/-
網誌.文章點進去的標題
H1 .description {FONT-SIZE: 10px; COLOR: #ff9291; PADDING-TOP: 3px;}
background: transparent url(背景網址) no-repeat scroll 75% 105%;
font-size: 25px;width: 400px;color:#7573ff;line-height:150%;height:45px;}
網誌.文章置中.innertext {text-align:center}
網誌.文章字體設定.
.innertext {FONT-SIZE: 14px;FONT-COLOR: #6666CC;-/*網誌文章內容內文*/-}
.articletext {FONT-SIZE: 14px;FONT-COLOR: #6666CC;-/*網誌文章內容*/- }
網誌.本文章已受主人保護.innertext form {}
網誌.繼續閱讀的設定.extended {
background: url(圖片網址) no-repeat 95% 50%;padding-right: 20px; margin-top: -50px; font-size: 10px;line-height: 100%;text-align: right;font-color: #dddddd;height: 30px;}
.extended a {color: #ffffff ;}
網誌.回應文字區設定背景和文字.comments-body TEXTAREA
{ BACKGROUND: url(背景網址)#fffefe no-repeat right top;HEIGHT: 450px ;font-size: 15px;}
網誌.回應區背景透明textarea#text{background: none;}
網誌.給個回應設定.comments-bottom .comments-head {
background: url(圖片網址) no-repeat left top;height: 100px;}
網誌.連結列的欄位.side {BORDER: #e7cdff 5px double; BACKGROUND: url(圖片網址) transparent scroll repeat 0% 0%; COLOR: #a561e9;TEXT-ALIGN: center}
網誌.連結列的文字換行#links a { display: block;
網誌.連結列的標籤(首頁相簿網誌留言名片好友影音)#boxMySpace #service #serviceList
網誌.RSS更換背景
.syndicate a{visibility: hidden;}
.syndicate img{visibility: hidden;}
.syndicate{font-size: 2px;height: 40px;
background: url(背景惘網址) no-repeat center center;}
網誌.LOGO的更換與設定
#links .powered br {display: block;}
#links .powered {}
#links .powered .powerlogo img {display: none;}
#links .powered .powerlogo {margin-top: 5px;display: block;background: url(背景網址) no-repeat; width: 200px;height: 100px;}
.total-comments-div .powered {}
網誌.移動人氣#boxCounter {position:absolute;top:330px;}
#boxCounter .sidetitle{display:none}
#boxCounter br {DISPLAY: none}
名片.隱藏[加為好友] [送禮物給TWOHAND2012] .boxAddFriendLink,.boxGiftLink{display:none ;}
名片.如何顯示我的人氣#counter font.small-c {color:#9291FF;width: 82px;}
名片.LOGO更換 #logo.small-c a img {visibility:hidden}
#logo.small-c {background: url(圖片網址) no-repeat; width: 820px;height: 100px;}
部落格.改字改圖的遊戲規則大都通用.巧在相關配套細節運用.基本模型如下:
(1)#某標籤 a {將文字font-size: 0px;隱藏後用底圖background: url(http:--.gif) 取代.再設寬width: 100px;設高height: 50px;}
或(1)#某標籤 img {將圖visibility:hidden;隱藏而保留原空間}
(2)#某標籤 {將空間visibility:visible ;顯現後用底圖background: url(http:--.gif) 取代.再設寬width: 100px;設高height: 50px;}
(3)--天啊.不行--.初學者請逐項設入原語法以留原相關配套細節.勿憑空起草.
請 觀察一下我的部落格有許多改字改圖的地方都嘛用這一招.
部落格.jpg照片放進連結列資料夾內>img src="圖片網址"border=0>
部落格.雙框.side { BORDER: #B0AFFF double 5px}也不錯玩喔.
部落格.任意移動物件position: absolute;left:--px;top:--px;
部落格.滑鼠移到變色彈動A:hover { COLOR: #8F19FF; TEXT-DECORATION: underline;POSITION: relative; right: 5px; bottom: 5px}
部落格.圖片黑白{FILTER: xray Alpha(opacity=100 style=1)}
部落格.CSS的語法隨便放上去就好了嗎?
基本上CSS擺放的順序.只是一個告知順序.它的混亂.除了增加你的開啟時間.掛網機率.
錯失顯示.和將來找尋修改重複誤寫以外.....不會.它不會改變最後呈現的結果的.
我也和你一樣.正在學習.
.....我可不想渡過功夫大師的辛苦童年.
.....我會從一點一滴的修改樂趣當中去體會整體創意.
.....創意並不會來自答案.越來越多的答案招式只會壓垮自己.
.....我到現在只記得一招.."如何提出一個有趣的問題".
.....在參考不同答案的同時.我會稍稍的加上一點叛逆.
.....如果我不能找到更有趣的答案.我便辜負了生命的延續.
.....不論我現在走在學習階段的那裡.我都會隨時提醒自己.
.........."如何提出一個有趣的問題".
如何提出一個有趣的問題呢.
.....我的方法方法很簡單.
.....我會先到處去瀏覽別人的作品.觀察一下他的有趣在那裡.
.....我不會只想模仿它的作品.而是做出自己的創意.
.....模仿和創意.這個看在一般人眼裡好像是難以區分的問題.
.....其實它是有非常明確的定義.
.....模仿是物理的加法作用.而創意是化學的乘法作用.
.....新的生命元素會和舊的生命元素產生新的生命形式.
.....一隻貓身上插了一朵花是模仿.
.....一隻貓身上長出一朵花是創意.
.....除了貓的毛草必須具備光合作用的滋養能力.
.....花朵的本身也必須有耐翻滾磨擦如橡皮般的能力.
.....而這隻貓也不必再取悅他的主人而獲得自由的新生命.
我對我自己的期許
.....我究竟想要創造一個什麼樣的園地呢.
.....我不要貪婪網路人氣.在我這隻貓身上插滿鮮花.
.....看著無情的摘花客捏著鼻子離開.
.....也不告訴我.我還有哪裡不可愛.
.....更不會留下來陪我分享.他的創意更可愛.
.....我寧願純粹的啟發孩子般的創意.
.....如何悟透模式.而不是抄襲模樣.
.....如何回到一無所知的伏犧時代.
.....只要了解太極如何生兩儀.兩儀如何生四象.
.....便能了解一顆球一塊空地.就能找到友情與愛情.
.....沉迷於複雜的人生消費遊戲.只會更空虛.
.....創意的目的是在解決問題.而不是沉迷於學習的樂趣.
.....我不要把一句話的事情.變成一年的教材.來留住人氣.
.....我寧願陪伴一隻貓.讓牠能開出自己生命中的第一朵花.
.....不論他愛的是個性的樊谷花.還是市場的達利花.
.....在他可以發表論文時.還記得有一個憂鬱者.他是我兄弟.
幫助創造者的生命
.....除非學習者在學習的當時.就是用創造者的心情在學習.
.....否則不論學習者多麼努力.永遠不會成為創造者.
.....創造者在學習1+1=2就已看到2少了1還剩1這件事.
.....然後一路過關斬將的學習新公式.
.....而學習者卻渡過十幾年甲加甲..乙加乙等於丁的背誦日子.
.....他們永遠不會像創造者一樣在學會
.....b font.small-c a和img.newAlbumUpdate之後.
.....自己去創造出.small-c img這樣的組合文字.
.....大膽的放進CSS裡面.看會發生什麼變化.
.....每一隻工蜂在吃了蜂王乳之後都可以變成蜂王.
.....每一個生命在發揮創意之後都可以成為創造者.
.....我經常提醒我自己.千萬不要因為課業或生活壓力而放棄問.為什麼.如果....
.....我要向聖人學習謙卑的學習者精神.
.....但在內心永遠不放棄創造者的使命.
.....創造者最大的使命.不是自私的完成個人什麼偉大的作品.
.....而是將創造者的邏輯傳承下去.讓其他的生命找到生命的意義.
我喜歡配合小幫手的CSS初期學習有個小秘方
.....我在對於CSS名詞和位置都還不太熟悉時.
.....常常在設定數字時加上一點小密碼來增加辨識.
.....例如我的總寬度是971文章區是694連結列是199....
.....諸如此類的許多設定都像這樣盡量特別密碼化.
.....當我再進入CSS修改表格時.
.....我便能明確的確定它的名稱和位置了.
.....然後我會很雙子的玩遍小幫手的每一項可設定功能調整.
.....看似調皮.其實我會不斷的進去CSS看剛才那個調整的名詞寫法.
.....在我了解了名詞寫法與遊戲規則之後(先存檔).便開始天蠍的大膽叛逆.
.....在CSS如果10變100呢.負100呢...3715%呢.(取自我的相簿背景圖).
.....最後我會很處女的修整並記住我剛才的創意.考驗一下自己.
.....把我的CSS頁面.放到我的最愛.不用小幫手.直接點進去改.
.....不但更快.而且CSS的原始創意能力.永遠是套用機器所無法取代.
一開始學習CSS時.
.....我總是很擔心一不小心就會把版面調亂.再也調不回來了.
.....而我又很雙魚的不願意把辛辛苦苦的心血結晶放棄.從新設定.
.....後來我學會在不論任何新的設定前.
.....先在"修改CSS樣式表"版面底下的"暫存檔1"或2或3.點一下.
.....然後在"存檔"點一下.如此一來.我便可以放心的做新的調整.
.....任何狀況發生時.我只要將原先的"暫存檔1"或2或3.點一下.
.....然後在"讀檔"點一下.然後在"目前使用"點一下.
.....然後在"存檔"點一下.如此一來.我便可以找回原先的設定了.
.....後來在我放心的設定下.經常在不小心打錯字.設錯行.
.....甚至是大膽的嚐試負數值PX的使用.而發生一些有趣的跑框特殊效果.
.....卻發現了魁儡吊線法能使一些項目上下位移.還有風箏放線法.
.....能使一些指定的字飛出框外.而這些創意其實是來自於錯誤的修正.
版面調整的問題
.....步驟一.設定#container1{-/*整體內容區塊一-*/-WIDTH: 971px; -/*寬度*/-
.....步驟二.設定#content { -/*文章區*/-PADDING-LEFT: 300px; -/*左留指定空間*/-
..........調整300px的大小直到文章區左縁起點讓你滿意.
.....步驟三.設定#content { -/*文章區*/--*/-WIDTH: 400px; -/*寬度*/-
..........調整400px的大小直到文章區寬度讓你滿意.
.....步驟四.設定#links {-/*連結區*/--*/-PADDING-LEFT: 500px; -/*左留指定空間*/-
..........調整500px的大小直到連結區左縁起點讓你滿意.
.....步驟五.設定#links {-/*連結區*/--*/-WIDTH: 200px; -/*寬度*/-
..........調整200px的大小直到連結區寬度讓你滿意.
跑框問題的解決.
.....這是我最難忘的經驗.想像桌子上放了一盆花.
.....那麼花盆本身的大小.也就是寬度和高度(文章區有延續性一般不設高度除外).
.....語法是 HEIGHT: 100px; -/*???的高度..框線內的*/-
................WIDTH: 100PX; -/*???的寬度..框線內的*/-
.........如果設了過大的PX值???PX那麼這花盆就會跨或擠走別的桌子.
.....然後是花盆外緣的內縮空間.也就是城牆外的護城河的寬度.
.....語法是 MARGIN-LEFT: 10px; -/*???的左指定邊界*/-
................MARGIN-RIGHT: 10px; -/*???的右指定邊界*/-
................MARGIN-TOP: 10px; -/*???的上指定邊界*/-
................MARGIN-BOTTOM: 10px; -/*???的下指定邊界*/-
.........如果設了大的負數值???PX那麼這花盆就會跨或飛到別的桌子上.
.....然後是花盆內緣的內縮空間.也就是除去可插花的針山以外與花盆的寬度.
.....語法是PADDING-TOP: 10px; -/*???的上留指定空間*/-
...............PADDING-RIGHT: 10px; -/*???的右留指定空間*/-
...............PADDING-LEFT: 10px; -/*???的左留指定空間*/-
...............PADDING-BOTTOM: 10px; -/*???的下留指定空間*/-
.........如果設了大的負數值???PX那麼這花朵就會跨或飛到花盆外面.
.....另外一提是花盆的厚度.也就是邊框粗細.一般不設則為無邊框.
.....語法是BORDER-RIGHT: #ffcccc 1px solid ; -/*???的右指定框線顏色粗細*/-
...............BORDER-TOP: #ffcccc 1px solid ; -/*???的上指定框線顏色粗細*/-
...............BORDER-LEFT: #ffcccc 1px solid ; -/*???的左指定框線顏色粗細*/-
...............BORDER-BOTTOM: #ffcccc 1px solid ; -/*???的下指定框線顏色粗細*/-
.....那麼這盆花要放在桌子左邊算起.還是右邊算起.還是中間呢???好天枰喔.
.....語法是FLOAT: lift,right,center; -/*???區塊整體的配置靠左.右.置中*/-
.....那麼這花朵要放在花盆左邊算起.還是右邊算起.還是中間呢.
.....語法是TEXT-ALIGN:lift,right,center,; -/*???內容的水平位置對齊左.右.置中*/-
背景的問題.
.....這是我在學習CSS時最首先接觸的項目.因為它最簡單了.
.....首先我將我的一些圖片上傳到我的相簿裡.
.....在上傳時.版面左下方有一個進階功能的尺寸設定.
.....當我設定1024*1024時.我便可以有一張版面較大的背景圖.
.....而在選擇品質時.由於是版面.我選擇了最佳品質.
.....上傳成功後.我進入我的相簿.找到圖.點顯示.點右鍵.點內容.抓網址.
.....在CSS裡面有那些地方可以設背景呢?我很雙子的在每個地方都試了一下.
.....例如整體背景.BODY {
.....BACKGROUND-IMAGE: -/*???背景*/-
.....url(http://www.wretch.cc/blog/TWOHAND2012);
.....-/*???背景網址*/-
.....我在設定.posted {-/*引用與回應尾部*/-- 的背景圖時.
.....我並不需要事先去切割一個適當的圖形.
.....在我現在的使用裡.那個細長條的背景.其實原圖是很大的.
.....它其實就像是一口井.只顯露出我們挖出的空間.
.....在我已經了解了前面的的花盆遊戲之後.井的大小就解決了.
.....我想要將這口井移到我圖片上想要的位置時.
.....語法是BACKGROUND-POSITION: 100% 100%; -/*???背景的上下左右位置*/-
.....我想要用一張小圖來重複鋪滿一口大景時.
.....語法是.BACKGROUND-REPEAT: x,Y,no-repeat ;
.....-/*???背景重複直向與橫向或都不重複*/-
.....我也可以用一個單一的顏色來做背景.
.....語法是BACKGROUND: #fff; -/*???背景顏色*/-
.....我上網搜尋"色碼表"找到一張色碼參考表的網址:
.....http://myweb.hinet.net/home2/rhinejo/home/color/color-cord.html
.....我的整體背景要固定不隨捲軸的捲動而移動時.
.....語法是BACKGROUND-ATTACHMENT: fixed;
.....-/*網頁背景不捲動.若要捲動就設SCROLL或刪除此語法*/-
文字設定的問題.
.....最讓我覺得困擾的是.根本不知道它到底設在哪裡.
.....而且不同的套用.為什麼在不同的位置作設定.
.....既然我已經做了備份存檔.我就大膽的把一個一個的FONT-SIZE: 10px;
.....加個0變撐十倍大的FONT-SIZE: 100px;--哈哈.
.....然後到版面上去看誰變大了.我就抓到哪一個項目就是在哪裡調了.
.....牡羊座的方法確實痛快又有效.
.....然後我就用備份還原.然後只改那一項就O.K.了.
.....但是為什麼有些不相干的字也跟著改變了呢.
.....原來文字的設定有它的繼承性.沒設定時.就會繼承它的最上層設定.
.....所以我找到的其實是它的爺爺.然後一堆堂兄堂弟就跟著改名改姓了.
.....然後我就改用射手座的方法.直接指名道姓的針對它.
.....對於我要設而沒有設的項目.把FONT-SIZE: 100px;直接加下去--哈哈.
.....難怪火象的人對於機器這種不會生氣的東西.學的特別快.
.....以下是有關於文字設定的語法.
.....TEXT-DECORATION: -/*???文字底線可設定值*/-
.....none/一般值.underline/加底線.
.....overline/上標線.line-through/加註取消線.;
.....FONT-SIZE: 14px; --/*???的字體大小*/--
.....FONT-COLOR: #6666CC; -/*???的文字顏色*/-
.....FONT-WEIGHT: normal,100,400,700,900; -/*???的文字粗細*/-
.....FONT-FAMILY: Georgia, arial,helvetica,sans-serif
..... -/*???的文字字型*/--
.....FONT-STYLE: italic,normal,; -/*???的文字斜體*/-
.....VERTICAL-ALIGNT:-/*???的文字的垂直位置可設定值*/-
.....BASELINE/底線為準.TEXT-TOP/向上對齊.TEXT-BOTTOM/向下對齊.
.....SUPER/上標字.SUB/下標字.TOP/上層字.MIDDLE/中層字.BOTTOM/下層字.
.....LETTER-SPACING: 6px; -/*???的文字間距*/-
.....LINE-HEIGHT: 150%; -/*???的文字行距*/-
透明濾鏡效果的問題.
.....有時我魔羯的發現隨著瀏覽器所預設項目容許的不同.通常較大區塊才有用.
.....它會將整個區塊的字.圖.框.全部透明化.文字淡了.可以加深色度.
.....語法中的形式1-10是隨瀏覽器的預設而定.有空可以玩玩看特效.
.....FILTER: Alpha(opacity=75,enabled=10);
.....-/*???濾鏡效果透明度75%及形式第10項*/-
隱藏或顯示的問題.
.....有時我會水瓶的把某個項目刪除.試試看它會不會不見了.
.....因為繼承性的特性仍會使它以一般未變更原貌出現.
.....所以我必須特別在指定項目內注明不顯示.
.....語法是DISPLAY: none; -/*???完全不顯示*/-
.....一般使用DISPLAY: none.是用來做--不顯示.
.....而---要顯示.那就直接把DISPLAY: none---不顯示.的字串刪掉就好了.
.....如果有使用了DISPLAY-list-style:--要顯示--那麼需要設定顯示什麼呢....
..............天靈靈.地靈靈.各方高手來顯靈...
.....基本上.list(清單)-style(樣式):指定item(原設定值的繼承).
.....是指原瀏覽器上已設定並容許的style字樣.
.....例如:visibile-使顯示.auto-自動值.normal-一般值.disc-實心圓點.
.....circle-空心圓點.square-空心方圓......要翻字典了
.....而我的朋友的瀏覽器是新是舊或是他牌還不保證看得到喔.
.....我好期待有喜歡飆CSS的金牛能跳出來說..
.....不用........ ul {list-style:???????=01;}..0幾自己選.
不顯示文字的小秘方.
.....我將文字設成與背景同色.再禁用右鍵反白.就OK了.
.....另外文字設成1PX或極小值.再禁用右鍵COPY.也行.
捲軸加設時的問題.
.....當我很獅子的希望我那美麗的大背景.或是可愛的橫幅都不要捲走時.
.....我就必須將我的文章和連結列加設捲軸.讓它們自己走.
.....語法是overflow: auto;-/*???捲軸語法*/-
.....另外我必須補充一個高度HEIGHT: 300px; -/*???的高度..框線內的*/-
.....大畫面還是會上下微動.將下留白減少(有一堆東西可以減)
.....#container1{-/*設定內容區塊一*/-
.....HEIGHT: 500px; -/*內容區塊一的高度..框線內的*/-
自訂軸捲的語法是
.....SCROLLBAR-FACE-COLOR: #FFCCCC;-/*捲軸滑動版的顏色*/-
.....SCROLLBAR-HIGHLIGHT-COLOR: #FFF6F2; -/*捲軸滑動版左上邊框的顏色*/-
.....SCROLLBAR-SHADOW-COLOR: #EBD5C0; -/*捲軸滑動版右下邊框的顏色*/-
.....SCROLLBAR-3DLIGHT-COLOR: #EBD5C0; -/*捲軸左上邊框的顏色*/-
.....SCROLLBAR-ARROW-COLOR: #EBD5C0; -/*捲軸上下指標的顏色*/-
.....SCROLLBAR-TRACK-COLOR: #ffeeee; -/*捲軸軌道底部的顏色/-
.....SCROLLBAR-DARKSHADOW-COLOR: #FFF6F2; -/*捲軸右下邊框的顏色*/-
.....SCROLLBAR-BASE-COLOR: #FFF6F2;-/*捲軸基本的顏色*/-
軸捲的顏色取材搭用你網誌色彩例如#body{}裡的背景底色來換#------也不錯看喔.用你文章的雙框色 border: 5px double #------來換#FFF更有整體感了.
網址的連結如何放在我發表的文章中變成點下就能連結呢?
.....很簡單.在寫文章框框的上緣有個"使用進階編輯器"
.....先點下去.變成進階編輯表格型態後再發文.就可以了.
.....舊文章要改呢.我用比較處女座的方法.先複製起來.另外用進階器發表一次.
.....有了備份.再複製一份回來.在修改時.先改成進階編輯.
.....舊的全部刪掉.然後將備份從新貼上.看到網址會反紅就對了.
.....如果字體變小.全選反白後.上方可以改字體喔.
html {
}
BODY {-------------------------/*設定整個網頁的*/-----------------
cursor:url("游標網址");
-/*游標網址*/--
FONT-SIZE: 14px; --/*一般未設定時繼承的字體大小*/--
FONT-COLOR: #6666CC; -/*一般未設定時繼承的文字顏色*/-
FONT-WEIGHT: normal,100,400,700,900; -/*???的文字粗細*/-
FONT-FAMILY: Georgia, arial,helvetica,sans-serif -/*一般未設定時繼承的文字字型*/--
LETTER-SPACING: 6px; -/*一般未設定時繼承的文字間距*/-
LINE-HEIGHT: 150%; -/*一般未設定時繼承的文字行距*/-
BACKGROUND-ATTACHMENT: fixed; -/*網頁背景不捲動.若要捲動就設SCROLL*/-
BACKGROUND-POSITION: 100% 100%; -/*網頁背景的上下左右位置*/-
BACKGROUND-COLOR: #FFFFFF; -/*背景的顏色*/-
BACKGROUND-IMAGE: -/*網頁整體背景*/-
url(http://www.wretch.cc/blog/TWOHAND2012);
-/*網頁整體背景網址*/-
HEIGHT: 500px; -/*網頁的高度..框線內的*/-
WIDTH: 800PX; -/*網頁的寬度..框線內的*/-
PADDING-TOP: 0px; -/*網頁的上留指定空間*/-
MARGIN-BOTTOM: 0px; -/*網頁的下指定邊界*/-
}
#blog_main {------------------/*設定主要整體的*/----------------------
TEXT-ALIGN: center -/*主要整體的水平位置對齊*/-
HEIGHT: 500px; -/*主要整體的高度..框線內的*/-
WIDTH: 800PX; -/*主要整體的網頁的寬度..框線內的*/-
PADDING-TOP: 0px; -/*主要整體的上留指定空間*/-
MARGIN-BOTTOM: 0px; -/*主要整體的下指定邊界*/-
}
#container1{---------------/*設定內容區塊一*/------------
BACKGROUND-COLOR: transparent; -/*內容區塊一的背景顏色*/-
TEXT-ALIGN: center -/*內容區塊一的水平位置對齊*/-
HEIGHT: 500px; -/*內容區塊一的高度..框線內的*/-
WIDTH: 800PX; -/*內容區塊一的網頁的寬度..框線內的*/-
PADDING-TOP: 0px; -/*內容區塊一的上留指定空間*/-
MARGIN-BOTTOM: 0px; -/*內容區塊一的下指定邊界*/-
}
引用：http://tw.myblog.yahoo.com/jw!CKNB6J2BERppujL92n13CSpftnQHQQ--/article?mid=436
全站熱搜
留言列表
