目前日期文章:201007 (18)

瀏覽方式: 標題列表 簡短摘要

textarea ---------------
<textarea onFocus="if(this.value==this.defaultValue) this.value=''" onBlur="if(this.value=='') this.value=this.defaultValue"> 請輸入說明</textarea>
備註:<textarea></textarea>預填的文字前一定要留一個space,不然就不能起作用  << 待找人請問為什麼~

input -------------------
<input value="請輸入搜尋關鍵字" onMouseOver="this.focus()" onFocus="this.select()" onClick="if (this.value=='請輸入搜尋關鍵字') this.value=''" onblur="if (value ==''){value='請輸入搜尋關鍵字'}" type="text" />


Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

<img width="67" height="67" style="" onmouseover="window.document.getElementById('img_370_370').src='PROD_PIC/2010312164936620.jpg';" src="PROD_PIC/2010312164936620.jpg">

搭配:

<div>
    <img style="height: 370px; width: 370px; border-width: 0px;" src="PROD_PIC/2010312165015277.jpg" id="img_370_370">
</div>

參考25togo作法


Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

W3C 整理的顏色,超棒~
http://www.w3.org/TR/css3-color/

另一個顏色選擇器
http://rhinejo.myweb.hinet.net/home/color/color-cord.html


Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

直接變換背景圖片

<div><a onMouseOver="this.style.background='url(images/Store/Dele/BtnPICTraceGreen.jpg)';" onMouseOut="this.style.background='none';" href="">加入追蹤</a></div>

 

.PICTrace { display:inline-block; float:left; margin-left:10px; background:url(../images/Store/BtnPICTrace.jpg) no-repeat;}
.PICTrace a { display:block; width:68px; height:21px; text-indent:-5000px;}


Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

將只支援IE的樣式表寫在ie.css,
W3C測試網頁CSS時會忽略這個檔案,
你就能同時擁有標準與IE專屬樣式的雙重好處。

也可以針對IE瀏覽器版本來指定樣式,如下範例:

<!--[if IE 6]>
<h5>版本 6</h5>

Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

此效果不能使用在 IE 上
Safari 瀏覽器 :

::selection{background: #c00; color: white;}
Firefox 瀏覽器 :

::-moz-selection{background: #c00; color: white;}
使用以上寫法不符合 w3c 規範

Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

參考 Yahoo

@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
table {border-collapse: collapse;border-spacing: 0;}
fieldset,img {border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
ol,ul {list-style: none;}

Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

有趣的做法,可用在原本共用小圖,在特定幾個區塊想要換掉的問題
需搭配固定的大小

.visibility img {visibility: hidden;}
.visibility{ background: url('img/icon_1.png') }

 


Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

有趣的做法

#main {padding-bottom: 150px;background: #efefef;}
#footer {position: relative;margin-top: -150px;height: 150px;clear:both;}


Rita 發表在 痞客邦 PIXNET 留言(1) 人氣()

overflow:hidden; /*刪除捲軸*/

--------------------------------------------------

IE 專用樣式
overflow-x:hidden; /*刪除水平捲軸*/
overflow-y:hidden; /*刪除垂直捲軸*/

 

參考網址:
CSS 運用之刪除捲軸

Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

測試位置:http://jigsaw.w3.org/css-validator/

參考網址:測試 W3C 標準時常會發生的錯誤
http://www.hsiu28.net/style/article_detail.php?id=10

-------------------------------

字型要以一個類別的字型結束
例如:sans-serif在任何系統下都能保證被顯示
font-family:tahoma,sans-serif; 這樣才正確

選擇器名稱不可單用數字

Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

變換網頁樣式呈現不同風格(cookie):變更頁面所要引入的css檔,可應用在版面風格、顏色版面設計

head
-----------------------------
<link rel="stylesheet" type="text/css" href="style.css" title="default">
<link rel="stylesheet" type="text/css" href="style1.css" title="style_one">
<link rel="stylesheet" type="text/css" href="style2.css" title="style_two">
<script type="text/javascript" src="styleswitcher.js"></script>


Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

head
--------------------------
<style type="text/css">
.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;

}
.opacityit:hover img{

Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

 

設定多個css基本區塊位置,暫時用不到,可提供初學者參考
http://www.mycelly.com/
====================================


Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

For ie
a{blr:expression(this.onFocus=this.blur());}

For FF
a:focus { -moz-outline-style: none; }

-----------------------------------

way2 ..

Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

無障礙網頁單機版檢測程式 (Freego)
http://www.webguide.nat.gov.tw/wSite/ct?xItem=1087&ctNode=239

無障礙網頁概念
http://mis2.nkmu.edu.tw/90441060/final/freebook/index.htm




Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

待測試

陰影效果

http://www.hksilicon.com/kb/articles/4690/1/CSS3-box-shadow/Page1.html


Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

.className { word-wrap: break-word;}

ie7.8, FF 都可用


Rita 發表在 痞客邦 PIXNET 留言(0) 人氣()

找更多相關文章與討論