Blog 這次修改版面CSS筆記

筆記一下以防下次要修改找不到地方

* 頂尖企業模版

* 移除預設的照片自動白邊與陰影

.post-body img {   padding: 0px   background: $(image.background.color);   border: 0px solid $(image.border.color);   -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);   -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);   box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);

* 內文離邊線遠一點

.post-outer {   padding-left: 6px;   padding-right: 6px;   padding-bottom: 20px; }

* 改變內文行高以及文字左右對齊

.post-body {   line-height: 1.6;   text-align:justify;   }

* 安裝 Blogger 數字分頁工具

* 安裝 Blogger 文章分類工具
　然後調整收合 + 和文字位置

a. Bullet Point 無法顯示問題，語法錯誤
原語法：

function draw_obj(obj)
{
    document.write("<li style='padding-left: 0px'>");
    document.write("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquzvN3QYaI5nC0R4SL8uj_Ljr_yTdBYHIyDx3titiUcOXtyzei3VvborClotFqMWPzs8gkOYB8WSF1vJxxFNdkJ17aWHFbOJ3sMLbovmwMqQVk8_xM-52xidWLY1geACz4gYOTTN3Hco/s1600/icon-yellow-bullet.png' /><a dir='"+obj['dir']+"' href='"+obj['url']+"'>"+obj['tag']+"</a>");
    document.write("<span dir='"+obj['dir']+"'>("+obj['cnt']+")</span>");
    document.write("</li>\n");
}

修正語法，參考 html 特殊字元：

function draw_obj(obj)
    {
    document.write("<li style='padding-left: 0px'>");
    document.write("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquzvN3QYaI5nC0R4SL8uj_Ljr_yTdBYHIyDx3titiUcOXtyzei3VvborClotFqMWPzs8gkOYB8WSF1vJxxFNdkJ17aWHFbOJ3sMLbovmwMqQVk8_xM-52xidWLY1geACz4gYOTTN3Hco/s1600/icon-yellow-bullet.png' /><a dir='"+obj['dir']+"' href='"+obj['url']+"'>"+obj['tag']+"</a>");
    document.write("<span dir='"+obj['dir']+"'>("+obj['cnt']+")</span>");
    document.write("</li>\n");
    }

b. 移動整體標籤左右位置

function draw_obj(obj) 內
padding-left: 0px (數值依喜好增減)

c. 移除粗體
function draw_tree(tree) 內
style='font-weight:bold;....
把 font-weight:bold 拿掉即可

d. 第一階層和第二階層間距(行高)不一致
function draw_tree(tree) 內
document.write("<ul id=ul_"+rid+" style='display:none; padding-top: 7px;
加上 padding-top (數值依喜好增減)


e. 移動第一階層和第二階層文字左右位置
function draw_tree(tree) 內

調整 padding-left

第一階層：

document.write("<li class=submenu id=li_"+rid+" onclick=menu_exp('"+rid+"'); style='color:#993333; padding-left: 23px

第二階層

document.write("<ul id=ul_"+rid+" style='display:none; padding-top: 7px; padding-left: 33px'>");


f. 移動縮放的 + 位置
function draw_tree(tree) 內
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPCphKO3yoBe42Pa819kwY1NK7NAYkuOi8rIWXMJymZG66EFHN0sSzJlhV3C20PIpKHdqGtRmC5MfmYlh5ChQtBJEfzDMFGydy_MjvMwVGrLcj8Pqv-9AjVooKjearhVLTvMYZQpm1To/) no-repeat left 5px  top 0px


個人目前樣子...

function draw_tree(tree) {     for(var tag in tree){         if(tag!='_item'&& tag!='_cnt'){             var rid = Math.random();             document.write("<li class=submenu id=li_"+rid+" onclick=menu_exp('"+rid+"'); style='color:#993333; padding-left: 23px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPCphKO3yoBe42Pa819kwY1NK7NAYkuOi8rIWXMJymZG66EFHN0sSzJlhV3C20PIpKHdqGtRmC5MfmYlh5ChQtBJEfzDMFGydy_MjvMwVGrLcj8Pqv-9AjVooKjearhVLTvMYZQpm1To/) no-repeat left 5px  top 0px;cursor: pointer'>");             document.write(tn(tag));             document.write("("+tree[tag]['_cnt']+")");             document.write("</li>");             document.write("<ul id=ul_"+rid+" style='display:none; padding-top: 7px; padding-left: 33px'>");             draw_tree(tree[tag]);             document.write("</ul>\n");         }

註：內文程式碼區塊生產器：http://formatmysourcecode.blogspot.tw/