goTOP
December 26, 2014
兩張圖檔方式 w224 x h152 px

點擊在新視窗中瀏覽此圖片 點擊在新視窗中瀏覽此圖片

範例連結:
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>

December 11, 2014
在CSS中指定
<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>


文章來源:
http://www.tagindex.com/stylesheet/form/background_color.html
December 3, 2014
固定在上方的寫法

<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;    
    }
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;
}


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
分頁: 5/6 第一頁 上頁 1 2 3 4 5 6 下頁 最後頁 [ 顯示模式: 摘要 | 清單 ]