水平menu

網址：http://css.maxdesign.com.au/listutorial/horizontal_master.htm

CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}


HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

Twitter Bootstrap 網頁美化工具

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

• 工具名稱：Twitter Bootstrap
• 官方網站：http://twitter.github.com/bootstrap/
• 工具授權：免費使用（CC By 3.0）
• 工具類型：Framework（框架）

     

Q：怎麼對select 或input 標籤做寬度(width)設定?

.input-small-mini 30px,
.input-mini .... 60px, 
.input-small  .... 90px,
.input-besmall.....110px(個人新增)
.input-medium  .... 150px,
.input-large  ....210px,
.input-xlarge  .... 270px,
.input-xxlarge  .... 530px,

Q:怎麼對button或input 加入顏色?

class加入btn ，這是基本的
加入顏色可以指定"btn btn-primary" 可以有藍色且立體的視覺感。

如果要加入其他顏色的，必需在bootstrap.css加入客製的CSS，可以利用下面網頁方便完成。
http://charliepark.org/bootstrap_buttons/

Q:BUTTON怎麼加入小圖案icon

參考：http://www.plugolabs.com/twitter-bootstrap-button-generator/
http://twitter.github.io/bootstrap/base-css.html#icons
語法： class="icon-white icon-heart"

Q:在瀏覽器IE 可以使用嗎?

  無法在 IE 7 8 9 (俗稱的舊版 IE)完整顯示。因為舊版IE末完整支援HTML5

input加入灰色提示文字

<input type='text' name='e_title' size='40' style="color:#999999" value='請填入含年度的考古題標題' onfocus="if (this.value=='請填入含年度的考古題標題') this.value='';this.style.color='#000';" onblur="if (this.value==''){this.value='請填入含年度的考古題標題';this.style.color='#999';}">(範例：<b>一零一學年度碩士班招生考試試題 </b>)<br>

IE8 相容性檢視

Q：使用者 切換到ie 的相容性環境，使得版面 跑版

http://audi.tw/Blog/window/IEMode.asp

解決方式：出現提示，讓使用者切回非相容性環境。

同場加映..

針對某個瀏覽器做css的調整(瀏覽器視窗高度)

css span 排版

<style type="text/css"> 
    .fixed{float:left;width:105px;text-align:right;}
   p{margin:5px;}
   </style>

<p/><span class="fixed">姓名：</span><input name="teacher_name" type="text"  /></p>
<p/><span class="fixed">姓名(english)：</span><input name="teacher_ename" type="text"  /></p>
   

Text Box 美化

css:
行內 style
style="border-bottom: #27b3fe 1px solid; border-left: #27b3fe 1px solid; margin-top: 2px; width: 105px; margin-bottom: 3px; background: url(../images/store/login_6.gif) #ffffff repeat-x; height: 20px; border-top: #27b3fe 1px solid; border-right: #27b3fe 1px solid;"

---

-moz、-ms、-webkit代表什麼意思呢?

-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari瀏覽器私有屬性
,,,,,
class宣告方式為 .classname
id 宣告方式為 #idname
tag 宣告方式為 tagname
,,,,,
ID 選擇器在一個 HTML 文件中只能被使用一次
Class 選擇器在一個 HTML 文件中可以被使用多次
Tag 選擇器只的是HTML文件中所有的標籤 

lession1 
lession2
lession3

滑鼠滑過去(文字)就變色

  a:link, a:visited, a:hover, a:active{
    text-decoration:underline;
    color:#6a5acd;
    background-color:transparent;
  }

另一個範例：

  a:link, a:visited{
    text-decoration:underline;
    color:#6a5acd;
    background-color:transparent;
  }
  a:hover, a:active {
    text-decoration:underline overline;
    color:#191970;
    background-color:#c9c3ed;
  }

css 下拉式水平選單教學

http://www.minwt.com/css/831.html
預覽

Style a Select Box Using Only CSS

http://bavotasan.com/2011/style-select-box-using-only-css/
預覽

文字 靠左 置中 靠右

靠左
text-align:left;
置中
text-align:center;
靠右
text-align:right;

常用顏色

http://www.csie.nctu.edu.tw/~jglee/teacher/color.htm

背景：

background-color : #ffffff             //背景色彩
background-image :  url(bg.jpg)        //背景圖片
background-repeat : repeat-x           //水平並排
background-repeat : repeat-y           //垂直並排
background-attachment : fixed          //固定背景
background-repeat : no-repeat          //單張固定
background-repeat : repeat             //重複排列
background-position : 50% 50%          //背景圖與X、Y軸距離

原色大辭典 http://www.colordic.org/

font運用：

h4 { color: red; }
h5 { color: #9000A1; } 
h6 { color: rgb(0, 220, 98); }

h4 { font-family: sans-serif; }
h5 { font-family: serif; }
h6 { font-family: arial; }

p { font-size: 120%; } 
ol{ font-size: 10px; } 
ul{ font-size: x-large; }

p { font-style: italic; }
h4{ font-style: oblique; }

p { font-weight: 100; } 
ul{ font-weight: bolder; }

8個簡單和實用的CSS技巧

1. 使用line-height來達到垂直居中
   line-height:24px; 當你有一個固定高度的區域，你可以通過把line-height和區域的高度設為相同的數值而達到垂直置中。
2. 使用overflow防止内容溢出 #main{ overflow:hidden; } 這個應該基本都知道了。可以在限制內容塊的寬度的前提下，隱藏那些有可能溢出的文本或圖像。雖然會導致一些內容被隱藏，但總比溢出撐開影響頁面佈局要好。
3. 強制在同一行內顯示所有內文 a{ white-space:nowrap;} 強制在同一行內顯示所有內文，直到內文結束或者< br>。
4. 始終顯示Firefox垂直捲軸 html{ overflow:-moz-scrollbars-vertical;} Firefox默認是不顯示垂直捲軸的，而這個參數設置將能讓它始終顯示垂直捲軸。
5. 内容置中 margin:0 auto; 這個大家都應該知道了，但是這個設置並不是在所有流覽中都有效。並且，在相同的流覽器中，如果受其他影響，也很可能會失去效果。
6. 移除IE的默認捲軸 textarea{ overflow:auto;} IE默認是顯示內文框的垂直捲軸，這個參數將移除這個捲軸，除非輸入的內容超過內文框的高度。
7. 強制列印時自動分頁 h2{ page-break-before:always;} 這個屬性參數可以「始終在物件之前插入頁分割符」，主要用於需要列印的頁面設置。
8. 移除點擊鏈結時的虛線框 a:active, a:focus{ outline:none;} 大家都知道，點擊鏈結時，通常會出現虛線框，影響美觀。這個屬性設置可以移除點擊時的虛線框。

posted by Jackson

轉貼自：http://takeasy-takeasy.blogspot.com

定位、間距與內襯

■position:
定位規則有absolute | relative | static(預設值)分別表示絕對位置、相對位置和靜態位置
■top:數值;right:數值;bottom:數值;left:數值;
這是指元素各邊緣與定位點的偏移量，就絕對定位而言定位點是包含元素的區塊；就相對定位而言定位點是元素原本的位置。
參考資料：必學的部落格CSS語法(二)-定位、間距與內襯

border 邊框

以下為常見邊框：
border-style 屬性指定邊框的樣式 solid實線、dashed虛線、 double雙線、 點線
border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字。
border-color 屬性是用來設定邊寬的顏色。
border-top-, border-left-, border-bottom-, border-right-
border 若四邊的邊框屬性都一樣，那我們可以用一個 border 屬性來描述，而不必四個邊都描述一次。另外，我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。

CSS width height 屬性

width: 这個属性定義元素内容區的宽度，在内容区外面可以增加内邊距、邊框和外邊距。
height: 這個属性定義元素内容區的高度，在内容区外面可以增加内边距、边框和外边距。
默認值：auto

JavaScript 語法:object.style.width="50px"
行內語法:style="width:20px"
p
  {
  height:100px;
  width:100px;
  }

段落屬性的設定

段落屬性的設定

利用這些設定可以輕易的控制字距、行高、縮排、凸排、水平對齊、垂直對齊等。這些性質對網頁設計的排版非常有用！

功能 : 設定文字行列高度 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 :  { LINE-HEIGHT : NORMAL︱( number )︱( length )︱( percentage ) }
範例 :  {LINE-HEIGHT:10pt}

此性質可設定列高，可指定特徵字normal設為預設值，或指定含單位的長度值，或百分比（參照於父元件）均可。如line-height:3px，則設定列高為3px。 

FONT

p.ex1
{
font:15px arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px Georgia, serif;
} 

CSS hack 慎用

為了解決ie6的css 問題，用了css hack。
如果只有少量，倒是無所謂，但又有新的寫法可以選擇了。

  
      

 


 



   1.  除IE外都可识别 
   2. 
   3. 
   4. 
   5. 
   6. 
   7. 
   8. 
   9. 
  10. 
  11. 

CSS Sprites 減少對伺服器的圖片需求

有效減少對伺服器的請求。
製作網址：
http://spritegen.website-performance.org/
參考寫法：
http://demo.tc/Post/477
下圖上傳三張圖片後(合併成一張大圖,大圖要丟到FTP喔)，系統給你的指示：

在用紅色圈起來的地方，因為看不懂，所以我就只好參考一下別人的寫法囉：
下面是我寫的語法：

　
水族館

css 版面置中

html, body {height: 100%; text-align: center;}
#container {
position: relative;
width:960px; height:100%;
margin:0 auto;/*ff 置中*/ *margin:0;/*ie 置中*/
text-align:left;
}
body > #container {height: auto; min-height: 100%;}
----------------------------------------------------------------------------
#container是最外層的div

CSS 分享 (2) CSS 基本概念與語法

View more presentations from 知世‧安索帕 台北 (使用經驗設計中心)

mail template

有關於 mail裡面放css 需要 下註解，免得收件人看不到正確內容。
範例：

$body=""

參考：

http://www.freegroup.org/2010/11/100-free-html-email-templates-with-psd-sources/

CSS版面設定

html引入css檔案

---

header底下的一個空白區格

<body></body>

studies

CSS碼為：

#pageheading {
font-size:3.25em;
font-weight:bold;
padding-top:20px;
color:#fff;
padding-bottom:20px;
}

#headingspacer{
margin:0 0 0 0;
height:22px;
background: url('images/XXX.gif') repeat bottom;
}

CSS樣式：
1.內嵌樣式

2.利用 標籤

3.@import 表示法

@import url(mysite.css);

4.行內樣式-直接利用元件的 STYLE 屬性(缺點:無法被重複利用)