December 26, 2014
兩張圖檔方式 w224 x h152 px
範例連結：
http://goo.gl/iw2C8F
註：開啟後，檢視原始碼。
範例連結：
http://goo.gl/iw2C8F
註：開啟後，檢視原始碼。
<style type="text/css">
#bButton a {
display: block;
overflow: hidden;
height: 0px;
width: 224px; /*圖檔寬度*/
background-image: url(img/a.png);
padding: 152px 0 0 0; /*圖檔高度 將圖檔移至顯示框外*/
}
#bButton a:hover {
background-image: url(img/b.png);
}
</style>
#bButton a {
display: block;
overflow: hidden;
height: 0px;
width: 224px; /*圖檔寬度*/
background-image: url(img/a.png);
padding: 152px 0 0 0; /*圖檔高度 將圖檔移至顯示框外*/
}
#bButton a:hover {
background-image: url(img/b.png);
}
</style>
December 11, 2014
在CSS中指定
在HTML中自動會呈現改變的顏色 (註：<p>無相關)
文章來源：
http://www.tagindex.com/stylesheet/form/background_color.html
<head>
<style type="text/css">
input.example, select {
width: 300px;
}
textarea {
width: 300px;
height: 7em;
}
input:focus, select:focus, textarea:focus {
background-color: #bde9ba;
}
</style>
</head>
<style type="text/css">
input.example, select {
width: 300px;
}
textarea {
width: 300px;
height: 7em;
}
input:focus, select:focus, textarea:focus {
background-color: #bde9ba;
}
</style>
</head>
在HTML中自動會呈現改變的顏色 (註：<p>無相關)
<form method="post" action="目標URL">
<p><input type="text" name="name" size="40" class="example"></p>
<p><select name="select">
<option value="選擇1">選擇1</option>
<option value="選擇2">選擇2</option>
<option value="選擇3">選擇3</option>
</select></p>
<p><textarea name="msg" cols="40" rows="7"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>
<p><input type="text" name="name" size="40" class="example"></p>
<p><select name="select">
<option value="選擇1">選擇1</option>
<option value="選擇2">選擇2</option>
<option value="選擇3">選擇3</option>
</select></p>
<p><textarea name="msg" cols="40" rows="7"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>
文章來源：
http://www.tagindex.com/stylesheet/form/background_color.html
December 3, 2014
固定在上方的寫法
備註：上方會有少了與#bHeader 相同空間。
<html>
<head>
<style type='text/css'>
#bTop{ position:fixed; top:0px;}
</style>
</head>
<body>
<div id="bTop">
這裡是 bTop !!!
</div>
</body>
</html>
<head>
<style type='text/css'>
#bTop{ position:fixed; top:0px;}
</style>
</head>
<body>
<div id="bTop">
這裡是 bTop !!!
</div>
</body>
</html>
備註：上方會有少了與#bHeader 相同空間。
April 10, 2014
December 14, 2013
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baselinebaseline;
background: transparent;
}
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baselinebaseline;
background: transparent;
}
January 15, 2013
CSS3中似乎只有一個寫法是不對應所有瀏覽器的...
已下為參考寫法...
.test {
width: 300px;
height: 1.4em;
text-overflow: ellipsis; /* Safari 用 */
-o-text-overflow: ellipsis; /* Opera 用 */
overflow: hidden;
white-space: nowrap; /* 文字不折行功能。一定要寫入，否則不會出現效果 */
border: 1px solid #666666;
}
.test:hover {
text-overflow: inherit; /* Safari 用 */
-o-text-overflow: inherit; /* Opera 用 */
overflow: visible;
}
width: 300px;
height: 1.4em;
text-overflow: ellipsis; /* Safari 用 */
-o-text-overflow: ellipsis; /* Opera 用 */
overflow: hidden;
white-space: nowrap; /* 文字不折行功能。一定要寫入，否則不會出現效果 */
border: 1px solid #666666;
}
.test:hover {
text-overflow: inherit; /* Safari 用 */
-o-text-overflow: inherit; /* Opera 用 */
overflow: visible;
}
HTML BODY中寫入
<div class="test"> 如果你要呈現過長的文章，請用滑鼠確認一下喔 </div>
sample:
http://blog.apao.idv.tw/sample/CSS3/text-overflow.html
參考：
http://blog.flugel.biz/2009/07/css3-text-overflow.html
http://www.w3schools.com/cssref/pr_text_white-space.asp
