採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
March 8, 2015
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 4, 2015
Bo-Blog 2.0 template 由以下幾個檔案夾組成
template/
可於文件夾下找到
|- 風格之 style.css；
|- 風格之images 圖片文件夾；
|- 風格之信息文件info.php；
|- 風格之結構定義文件 element.php；
|- 風格之定義縮圖；
註：風格＝主題＝template
CSS详解
template/
可於文件夾下找到
|- 風格之 style.css；
|- 風格之images 圖片文件夾；
|- 風格之信息文件info.php；
|- 風格之結構定義文件 element.php；
|- 風格之定義縮圖；
註：風格＝主題＝template
CSS详解
January 2, 2015
template/主題/elements.php
找出下面這一段
// 評論數量 所有評論
$elements['comment']=<<<eot
<div class="commentbox">
<div class="commentbox-title">
<img src="{$template['images']}/comments_li.gif" /> <strong>{replier}</strong> {replierhomepage} {replierip}
<div class="commentbox-label">{replytime} {addadminreply} {deladminreply} {delreply} {blockreply}</div>
</div>
<div class="commentbox-content">
{replycontent}
<div style="display: {ifadminreplied}" id="replied_{commentid}">
<div class="reply-content"><span class="reply-content_title">回覆內容</span> {adminreplycontent}</div>
</div>
</div>
<div id="{commentid}" style="display: none">{adminreplybody}
</div>
</div>
eot;
$elements['comment']=<<<eot
<div class="commentbox">
<div class="commentbox-title">
<img src="{$template['images']}/comments_li.gif" /> <strong>{replier}</strong> {replierhomepage} {replierip}
<div class="commentbox-label">{replytime} {addadminreply} {deladminreply} {delreply} {blockreply}</div>
</div>
<div class="commentbox-content">
{replycontent}
<div style="display: {ifadminreplied}" id="replied_{commentid}">
<div class="reply-content"><span class="reply-content_title">回覆內容</span> {adminreplycontent}</div>
</div>
</div>
<div id="{commentid}" style="display: none">{adminreplybody}
</div>
</div>
eot;
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>
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
