阿杰老師的部落格實驗室

標題前加上固定的小圖

Fri, 01 Sep 2006 11:49:08 +0800

如果要在文字前加上固定的小圖，可以利用如下的 CSS 技巧：

參考樂多的 CSS 檔

/* 文章標題 */
.title {
FONT-WEIGHT: bold;
FONT-SIZE: 18px;
BORDER-BOTTOM: #C3AC99 1px solid; /* 加底線*/
background-image: url(title4.gif);
background-repeat: no-repeat;
height: 20px;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 50px;
padding-left: 25px;}

上面的範例中紅字部份就是相關的程式碼
其中的 tilte4.gif 就是標題小圖。

[CSS] livedoor 模版修改參考 - 區塊標題上圖、區塊標題下圖

Wed, 08 Mar 2006 02:25:27 +0800

如果套用 livedoor 的兩欄式模版時，由於樂多的 CSS 沒有區塊標題上圖及下圖。可能會有如下的情形：

修改後 (如此就如同 livedoor 的設計了)

必須同時修改 roodo.css 及 links.template

roodo.css 加入或檢查有無如下程式碼 (有圖檔連結哦！)

.sidetitlebody{
background:url(titlebg_top.gif) no-repeat 50% 0;
padding:6px 0 0;
}
.sidetop{
background:url(titlebg_bottom.gif) no-repeat 50% 0;
padding:3px 0;
}

links.template 要加入兩行程式碼

<DIV class=sidetitlebody></DIV> 
<DIV class=sidetitle>作者資訊</DIV>
<DIV class=sidetop></DIV>

[CSS] livedoor 模版修改參考 - 文章頁首、文章頁尾

Tue, 07 Mar 2006 17:29:21 +0800

樂多的 CSS 一般都沒有文章的頁首及頁尾

改成有頁首及頁尾的設計

必須同時修改 roodo.css 及 main.template

roodo.css 要加入或檢查有無如下程式碼 (有圖檔連結哦！)

.datetop,#articletop{
background:url(2column_top.gif) no-repeat 50% 0;
padding:28px 0;
position:relative;
z-index:1;
}
.blogbodybottom{
background:url(2column_bottom.gif) repeat-y 50% 0;
padding:22px 0;
margin-bottom:10px;
}

main.template 要加入兩行程式碼

{else}
{foreach from=$posts item=post}

{assign var="postDate" value=$post->getDateObject()}
{if $prevDay != $postDate->getDay()}
<div class="datetop"></div> 
<H2 class=date>{$locale->formatDate($postDate,"%B %d, %Y")}</H2>
{/if}
{assign var="prevDay" value=$post->getDay()}
{include file="$blogtemplate/post.template"}
<div class="blogbodybottom"></div> 
{/foreach}

{/if}

[CSS] 如何利用 CSS 產生水平或垂直下拉選單

Tue, 28 Feb 2006 16:24:59 +0800

CSS 水平下拉選單

http://solardreamstudios.com/_img/learn/css/cssmenus/index-horiz.html

CSS 垂直下拉選單

http://solardreamstudios.com/_img/learn/css/cssmenus/index-vert.html

製作時要配合 CSS 及 Java Script 。網頁中使用 <ul id="navmenu"> 呼叫 CSS。

[CSS] 很棒的 CSS 範例站

Tue, 28 Feb 2006 15:36:16 +0800

想看到很多的 CSS 使用技巧嗎？請看

http://www.cssplay.co.uk/index.html

CSS 入門

Wed, 22 Feb 2006 00:31:00 +0800

傳統的網頁是採用 HTML 標籤語法來進行撰寫。但是早期受限於瀏覽器的功能，能進行的只有基本的排版。

隨著網路的發展，就制定了 CSS (Cascadeing Style Sheets) 堆疊樣式表 或簡稱「樣式表」來加強網頁在排版及呈現上的能力。

CSS 可以加強原有 HTML 標籤語法命令的功能。也可以透過自訂CSS屬性來加強功能。

教學請詳內文

壹、CSS的使用方式

外連 CSS 檔案

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>讀入一個外部CSS檔案</title>
<link href="sample.css" rel="stylesheet" type="text/css">
</head>

HTML 內含 CSS，使用<style>標籤

<title>HTML 內含 CSS</title>
<style type="text/css">
</style>

貳、CSS 基本語法

選擇器 { 屬性 : 設定值 }

例如

p{color: #ff0000 }
用分號分隔兩個屬性
p{color: #ff0000; background-color: #ffff00 }
多行的寫法
p{
color: #ff0000;
background-color: #ffff00
}
/* 註解 */
/*
多行
註解
*/

參、自訂 CSS

在自訂CSS 樣式表檔案中。分成兩大類

class 屬性 及 id 屬性 兩種寫法

注意名稱請不要使用特殊符號，建議使用英文就好。

.class { }

例如

.sample {
color: #ffffff;
background: #006600;
}
<p class="sample">class屬性</p>

#id { }

例如

#sample {
color: #ffffff;
background: #006600;
}
<p id="sample">id屬性</p>

肆：設定連結樣式

設定超連結的樣式

未點選超連結
a:link {
color: #339900;
background: #ffffff;
}
已點選超連結
a:visited {
color: #999999;
background: #ffffff;
}
滑鼠游標移上
a:hover {
color: #ff6600;
background: #ffffff;
}
按下滑鼠時
a:active {
color: #ff6600;
background: #ffffff;
}

伍、色彩的指定

是使用 RGB 的16進位碼來表示

例如

#ff0000
#f00 /* 相同於 ff0000 即兩位相同可以只寫一個 */

陸、CSS BOX

CSS 是作用於一個矩形的物件中，稱為「BOX (框盒)」。

由內而外，包含了四個要素 ─ 內容、內距、框線、邊界

它的結構如下圖：

[CSS ] z-index 的使用

Tue, 21 Feb 2006 15:46:22 +0800

要加入這個屬性的原因是，在HTML碼撰寫的時候，所有區塊的層序(Z軸深度)是按照撰寫的順序排列的，而後面的區塊會重疊在前面的區塊之上。而每個區塊(或元素)在瀏覽器當中的呈現順序都是由上而下、由左至右，所以中間欄的Z軸深度自然會比左欄高。可是儘管中間欄比較高又如何呢？那麼當你在DP1C中按下了主選單(Menu) 按鈕後，出現的主功能選單區塊會被中間欄給擋住(如果中間欄不是透明的話)，但就算中間欄是透明的還是會被文字檔住而操作困難。

z-index 的意義就是Z軸的深度，通常沒有特別指定的話，這個屬性預設的是 0 ，要是遇到兩個區塊的Z軸深度都一樣，那麼就會依照先後順序決定誰在上面。不過藉由把左欄的Z軸深度設為 1 ，那麼就會把左欄的深度強制提升到了中間欄之上(中間欄是預設的 0 )。