語法元件庫: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
ul {
 background-color: #F00;
 width: 195px;
 list-style: none;
 margin: 0px;
 padding:5px;
 overflow: hidden;
}
li {
 float:left;
 display: block;
 width:50px;
 height: 60px;
 margin:5px;
 border: 1px solid #FFF;
}
</style>
</head>

<body>
<ul>
  <li>111<br />111<br />111</li>
  <li>111<br />111<br />111</li>
  <li>111<br />111<br />111</li>
  <li>111<br />111<br />111</li>
</ul>
</body>
</html>

2011年3月29日

在Blogger中置入程式語法

通常語法會讓部落格的畫面亂掉，使用syntaxhighlighter可以把語法包起來，而且還有行碼喔~
>>syntaxhighlighter網站
>>這裡是網友寫的搭配各式部落格的教學

在blogger中的用法
1. 到設計 > 修改HTML > 找到語法中<head>的位置，在<head>之下置入語法

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script type='text/javascript'>SyntaxHighlighter.all();</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

2. 編寫文章的時候在語法部份改用HTML編輯，將語法用<pre></pre>包起來(可能會要常切換面板就是了)

<pre class="brush: html">
把語法放在這~!
</pre>

附帶說明：
1. 後面的class需要指定目前使用的語法是哪一種，才會有顏色變化喔~
>> 語法對照表
2. 可以替換畫面的樣板
>>樣版DEMO

2011年3月28日

直式主選單HTML和CSS

其實主選單就是一串連結清單

HTML：

Home
News
Contact
About

CSS：

ul {
list-style-type:none;
margin:0;
padding:0;
}
a {
display:block;
width:60px;
}