March 13, 2015
直接指定span的方法
範例:淺灰背景 text
經由style >span 指定的方法
範例:淺黃色背景 text
經由style > span 之下> class 指定的方法
範例:淺藍色背景,灰色 text
範例:淺灰背景 text
<span style="background:#CCC; ">text</span>
經由style >span 指定的方法
範例:淺黃色背景 text
<style type="text/css">
span{background:#FBFEBA;}
</style>
span{background:#FBFEBA;}
</style>
經由style > span 之下> class 指定的方法
範例:淺藍色背景,灰色 text
<style type="text/css">
span.bText{background:#3FF;}
</style>
span.bText{background:#3FF;}
</style>
March 12, 2015
[文字方式] 點擊連結隱藏或顯示DIV
網頁語言 » JavaScript | by apao
CSS部分
javascript 部分
html 部分
<style type="text/css">
span{border:#999 solid 1px; padding:3px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>
span{border:#999 solid 1px; padding:3px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>
javascript 部分
<script type='text/javascript'>
function show(obj, id)
{
var o=document.getElementById(id);
if( o.style.display == 'none' )
{
o.style.display='';
obj.innerHTML='隱藏';
}
else
{
o.style.display='none';
obj.innerHTML='顯示';
}
}
</script>
function show(obj, id)
{
var o=document.getElementById(id);
if( o.style.display == 'none' )
{
o.style.display='';
obj.innerHTML='隱藏';
}
else
{
o.style.display='none';
obj.innerHTML='顯示';
}
}
</script>
html 部分
<span onclick='show(this, "show")'>顯示</span><br>
<div id='show' style="display:none;">按下文字按鈕後呈現內容</div>
<div id='show' style="display:none;">按下文字按鈕後呈現內容</div>
March 8, 2015
[checkbox] 隱藏 顯示
網頁語言 » JavaScript | by apao
css部分
javascript部分
html部分
註:show可以任意改為其他文字
<style type="text/css">
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>
javascript部分
<script type="text/javascript">
<!--
function show(obj,item){
document.getElementById(item).style.display = obj.checked?"block":"none";
}
//-->
</script>
<!--
function show(obj,item){
document.getElementById(item).style.display = obj.checked?"block":"none";
}
//-->
</script>
html部分
<input type="checkbox" onclick="show(this,'show');" />
<div id="show" style="display:none">這是顯示的內容</div>
<div id="show" style="display:none">這是顯示的內容</div>
註:show可以任意改為其他文字
January 1, 2015
CSS ARROW PLEASE! http://cssarrowplease.com
Size: ▲大小指定
Color:▲ 顏色指定
Border width: 邊框線的寬度
Border color: 邊框線的顏色
參考 CSS內說明:
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>