March 13, 2015
直接指定span的方法

範例:淺灰背景 text
<span style="background:#CCC; ">text</span>


經由style >span 指定的方法

範例:淺黃色背景 text
<style type="text/css">
span{background:#FBFEBA;}
</style>


經由style > span 之下> class 指定的方法

範例:淺藍色背景,灰色 text
<style type="text/css">
span.bText{background:#3FF;}
</style>

March 12, 2015
CSS部分
<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>


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>


html 部分
<span onclick='show(this, "show")'>顯示</span><br>
<div id='show' style="display:none;">按下文字按鈕後呈現內容</div>

March 8, 2015
css部分
<style type="text/css">
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>


html部分
<input type="checkbox" onclick="show(this,'show');" />
<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 30, 2014
眾說紛紜
OGP imag圖檔的大小一直很難設定


點擊在新視窗中瀏覽此圖片
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>

分頁: 4/12 第一頁 上頁 1 2 3 4 5 6 7 8 9 10 下頁 最後頁
[ 顯示模式: 摘要 | 清單 ]