網路城邦▼
上一篇 回創作列表 下一篇   字體:
善哉!好用!!想試?請!!! 瀏覽1249|回應0|推薦12
2006/05/27 02:47:04

網誌文章「文字連接 hover 遇鼠色變」在 content 設定的方法
引用文章【 網誌風格CSS架構圖解

這篇文章的目的是講:上一行的「鏈結」和下一行的,滑鼠 hover 效果不同!
          怎麼作?怎樣「一勞永逸」在「網誌設定」裡作出來?
引用文章【 網誌風格CSS架構圖解
講的是整體架構,關於 content 是以首頁為例,因此沒提到文章區塊:

文章標題瀏覽0|回應0|推薦0
year/mm/dd 00:00:00
登入才看得到的 管理 鏈結 → 新增修改刪除文章管理

<span id="mainbody">
城邦「誌士」創作文章或貼入或上傳的內容
</span>

( 網誌分類文章群組 )

1)網誌「創作文章」區塊的標題和「右上|右下」設備細節
2)城邦「誌士」在預設的 mainbody 中自訂 css 屬性的區塊名稱
以上不詳,能在首頁玩設定,未必能在網誌玩文章。

現在,咱「喜歡玩耍」的,先不管那些需要「處心積慮」做的事!
動手 ∼∼ 讓滑鼠碰到有鏈結的文字 ── 就可看到隨之「色變」了。
嘿嘿! 【 網誌風格CSS架構圖解 】 和 ( 網誌分類文章群組 ) 居然也不同!
因為:這兩樣東西的屬性,是由不同名目的 css 管理的。


OK,本文嘗試分享的心得是:
   新功能》網誌風格大變身 + 網誌首頁自訂顯示 ← 用在 content 裡面!
   使咱所用 mainbody 區塊可因有這「自訂顯示」而發生上列的小小作用。


方法:做右圖所示第 3 項工作

也就是在右圖所示白色區域內,
把必要的設定「貼進去」就好。


必須特別指出

鏈引在此
所見右圖

尚未徵詢同意
屬於不法取用

如果圖片消失;請點擊圖塊位置,可到出處去看。
欲知詳情如何,也請造訪出處──以便深入了解。


那麼,「必要的設定」是什麼?又須「貼」在哪兒呢?
其實,很容易:「必要的設定」就是下列框內的那三行紅字罷了!
/* -----------------【內容區】(如需更改浮動定位應與直式導覽列區塊配合)--------------------- */

/* 內容區塊 */
#content {
float: left; /* 靠左浮動定位 */
}
/* 20060526 自加:網誌內文鏈結變色 */
#content .user a:link {color: #274D74; /* 連接文字的新色 */}
#content .user a:hover {color: #4180C0; /* 滑鼠碰到的變色 */}
#content .user a:visited {color: #274D74; /* 按過訪後的顏色 */}

/* 利用 <span class="user">整篇文章</span> 在原始檔追補這設定*/
/* 貼文《改用純文字版編輯》就是用上一行「包夾全文」即可 */
/* 若用 <div class="user">文章</div> 會使文字變小。 */



/* 對比色大標題 */
#content .main-topic {
貼用,也簡單 ── 先參考【 新功能》網誌首頁自訂顯示 】看明白── 然後:
進入「網誌設定」在「編輯自訂樣式」有連串符號和說明的區塊裡,
找到 /* 內容區塊 */ 這段落,在 #content {} 下方,把那三行
貼在 /* 對比色大標題 */ 這一行上面就行了。

建議:把上列「藍 & 紅」共七行,都貼進去。
原因:一旦忘記貼了什麼進去,或需檢視用途,可以看到記錄和說明。
提醒:
1)貼新文章前:
  先按 <>用《切換HTML原始碼》貼入以下標籤:
  <span class="user"><P>整篇文章貼此</P></span>
(首尾間整行貼入後,毋需存成草稿;逕回《改用HTML版編輯》寫作,無妨。)
  或用《改用純文字版編輯》貼入以上標籤
(首尾間整行貼入後,宜先存成草稿,再回《改用HTML版編輯》寫作,無妨。)

2)貼新文章時:
  把整篇文章放在其間,文章中的「文字連接」就會遇鼠色變了。
(只貼紅標籤在「做成連接的文字」前後也行,那可能一篇文章裡要貼很多次。)
  (而且,那幾個「做成連接的文字」若已在 div 標籤裡,這麼作,仍不會變色。)
  偷懶法:進入原始檔或純文字編輯器,只在文章的最前端貼
      首標籤 <span class="user"> 就好,不貼尾標籤。

3)也可以用 <div> </div> 包夾文章,但其間文字會變小。
(就像以上有寫 #content .user 設定的那個框,文字明顯小些;這行也是。)
  這,是和「遇鼠色變」不相關的 CSS 現象。
<div>就像這行,寫在 DIV 標籤裡面的文字,級數明顯變小。</div>
  只要填上 style="FONT-SIZE: 1em" 屬性就「恢復」了,像這行。

4)只要一句 ↓ 就OK!以上都不必看!!
  <a class="main-text" href="url">文字連接</a>
  內文「文字連接」效果和「文章分類」一樣,如下!


善哉!好用!!想試?請!!!
( 網路資訊網頁設計 )
回應 推薦文章 轉寄 列印 加入我的文摘
上一篇 回創作列表 下一篇  

引用
引用網址:http://blog.udn.com/article/trackback.jsp?uid=jannwu&aid=288190