2009-12-22

CSS 部屬經驗-圖文列表樣式

樣式



HTML 結構

<ul class="Img2HList ClearIt">
<li class="List Odd">
<div class="Container">
<strong class="Title">
<a><span class="Image"><img src="圖片網址" /></span>標題文字</a>
</strong>

<!--其他相關資訊-->
<p class="Info">描述文字</p>
<div class="Meta">文字</div>
<blockquote>文字</blockquote>
</div>
</li>
<li class="List">
<div class="Container">
<strong class="Title">
<a><span class="Image"><img src="圖片網址" /></span>標題文字</a>
</strong>

<!--其他相關資訊-->
<p class="Info">描述文字</p>
<div class="Meta">文字</div>
<blockquote>文字</blockquote>
</div>
</li>
</ul>



CSS 設定

ul.Img2HList {
margin: 1em 0;
overflow: hidden;
}
ul.Img2HList li.List {
position:relative;
display: block;
float: left;
width: 49%;
margin: 0 0 30px 0;
font-size: 11px;
}
ul.Img2HList .Container {
padding: 0 0 0 79px;
}
ul.Img2HList li.Odd {
clear: left;
}
ul.Img2HList li.Odd .Container{
margin-right: 30px;
}
ul.Img2HList strong.Title {
display: block;
font-size:1.1em;
border-bottom: 1px solid #ccc;
}
ul.Img2HList strong.Title span.Image {
float: left;
margin: 0 0 0 -79px;
cursor: pointer;
}



參考頁面:
Last.fm
Wacanai.com

HTML 與 CSS 觀念上的區別

HTML:在定義網頁的 結構語意
  • h1:第一標題
  • h2:第二標題
  • p:段落
  • li:清單條目
  • em:強調
  • strong:更強調
  • blockquote:引言

CSS:在定義網頁的呈現 樣式
  • color:文字顏色
  • text:文字
  • font:字體
  • margin:邊界距離
  • padding:內緣距離
  • background:背景底色
2009-12-21

Blogger 文章匯入的格式

Blogger 可以接受 Atom 的格式匯入
至於 RSS 的格式就要去找轉換器轉成 Atom 才可以匯入

以下是 Blogeer 匯入時的最簡化的格式

<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet
href="http://www.blogger.com/styles/atom.css"
type="text/css"?
>
<feed xmlns='http://www.w3.org/2005/Atom'
xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/'
xmlns:georss='http://www.georss.org/georss'
>
<id>tag:blogger.com,1999:blog-4</id>
<generator version='7.00' uri='http://www.blogger.com'>Blogger</generator>

<entry>
<id>tag:blogger.com,1999:blog-4.post-2</id>
<published>2009-12-19T23:39:20.281+08:00</published>
<title type='text'>標題</title>
<content type='html'>文章內容</content>
<category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/>
<category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/>
</entry>

<entry>
<id>tag:blogger.com,1999:blog-4.post-2</id>
<published>2009-12-19T23:39:20.281+08:00</published>
<title type='text'>標題</title>
<content type='html'>文章內容</content>
<category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/>
<category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/>
</entry>

</feed>
  • generator:產生器識別,Blogger 只接受自己的標示
  • id:可以重複,但必須符合格式
  • published:發佈時間,格式為 ISO8601
  • title:文章標題
  • content:文章內文,可以允許換行符號"\n",內文的 HTML 必須實體逸出
  • category:標籤
2009-12-18

[HTML] 規劃延生屬性

之前在玩 Firefox 的外掛時,在 XUL 的定義中學到其他屬性設定,當中有些定義還蠻常用到的
如:empty, emptytext, max, min...等

這裡我只是要說明一個簡化開發的 solution,並沒有完整的應用規劃,為了瞭解這個 solution 可以先看看一個簡單的範例 html_extension.zip

其實最近看到 HTML5 已經將很多常見的介面應用加入定義中,但還是可以將系統架構中常用的功能做成延伸屬性,在 HTML5 普及之前這是一個很好的 solution。


在之前的專案中,我做了一下的規劃:
element [延伸屬性]{所有元素共用}
removeDelay="sec" {設定幾秒鐘後自動[移除]此元素}
pulsate="sec" {設定幾秒鐘後自動結束元素[閃爍]}

input,textarea [延伸屬性]
emptyText="為空預設提示" {設定當輸入匡為空時的文字提示}

form > tr [延伸樣式]
class="NotNull" {檢查區塊內的元素是否有選項值}

form > input [延伸屬性]
format="" {表單送出前的格式檢查,但不會檢查是否為空}
  • 'tel':電話
  • 'mobile':行動電話
  • 'email':電子信箱
  • 'url':網路連結
jtype="" {資料輸入時的輔助}
(基本格式輸入)
  • 'uint':無符號整數
  • 'int':整數
  • 'float':浮點數
  • 'id':帳號格式
  • 'alnum':保留字母和数字及底線

(輔助日期輸入)
  • 'date':選擇日期
  • 'start_date':選擇起始日期
  • 'end_date':選擇結束日期

(輔助時間輸入)
  • 'time':選擇時間
  • 'start_time':選擇起始時間
  • 'end_time':選擇結束時間


在下面的 HTML 中可以看到程式碼都便得很簡單

<!--動態效果-->
<div pulsate="4">4秒閃爍</div>
<div removeDelay="10">10秒後消失</div>
<div pulsate="5" removeDelay="8">5秒閃爍&8秒後消失</div>


<!--表單-->
<form class="FormWidget" method="post" action="">
<table class="FormList" border="0">
<caption>輸入限制</caption>

<tr class="NotNull">
<th><label for="data_1">無符號整數 :</label></th>
<td><input type="text" jtype="uint" value="" class="Int" id="data_1" name="data_1"/></td>
</tr>

<tr class="NotNull">
<th><label for="data_2">整數 :</label></th>
<td><input type="text" jtype="int" value="" class="Int" id="data_2" name="data_2"/></td>
</tr>

<tr class="NotNull">
<th><label for="data_3">浮點數 :</label></th>
<td><input type="text" jtype="float" value="" class="Int" id="data_3" name="data_3"/></td>
</tr>

<tr>
<th><label for="data_4">帳號格式 :</label></th>
<td><input type="text" jtype="id" value="" class="Text" id="data_4" name="data_4" emptyText="請輸入帳號"/></td>
</tr>

<tr class="NotNull">
<th><label for="data_5">英數及底線 :</label></th>
<td><input type="text" jtype="" value="" class="Text" id="data_5" name="data_5"/></td>
</tr>
</table>


<table class="FormList" border="0">
<caption>時間 & 日期</caption>

<tr>
<th><label for="data_6">日期 :</label></th>
<td><input type="text" jtype="date" value="" id="data_6" name="data_6"/></td>
</tr>

<tr>
<th><label>日期區間 :</label></th>
<td>
<div class="OptionBar">
<label>起始<input type="text" jtype="start_date" value="" class="Text" name="start_date"/></label>
-
<label>結束<input type="text" jtype="end_date" value="" class="Text" name="end_date"/></label>
</div>
</td>
</tr>

<tr>
<th><label for="data_7">時間 :</label></th>
<td><input type="text" jtype="time" value="" id="data_7" name="data_7"/></td>
</tr>

<tr>
<th><label>時間區間 :</label></th>
<td>
<div class="OptionBar">
<label>起始<input type="text" jtype="start_time" value="" name="start_time"/></label>
-
<label>結束<input type="text" jtype="end_time" value="sdsfsdf" name="end_time"/></label>
</div>
</td>
</tr>
</table>


<table class="FormList" border="0">
<caption>格式檢查</caption>

<tr>
<th><label for="data_8">電話格式 :</label></th>
<td><input type="text" format="tel" value="" class="Text" id="data_8" name="data_8"/></td>
</tr>

<tr class="NotNull">
<th><label for="data_9">行動電話格式 :</label></th>
<td><input type="text" format="mobile" value="0912345678" class="Text" id="data_9" name="data_9"/></td>
</tr>

<tr class="NotNull">
<th><label for="data_10">E-mail 格式 :</label></th>
<td><input type="text" format="email" value="" class="Text" id="data_10" name="data_10"/></td>
</tr>

<tr>
<th><label for="data_11">連結格式 :</label></th>
<td><input type="text" format="url" value="" class="Text" id="data_11" name="data_11"/></td>
</tr>
</table>

<div class="Buttons">
<input type="submit" class="Button" value="儲存"/>
</div>
</form>