最新訊息

314 學習手札  浴火重生
網站內的資源  緣至各方達人
相互分享教學 請隨意取用分享
莫忘傳承情意 讓這份情意傳下去
此塊園地 僅是學習筆記
提供素材內容  或許有缺失
不盡理想地方 敬請見諒
我非高手達人 願虛心學習 不斷修正改進
若有尖酸刻薄或無理要求 都非座上客
僅求心境桃花源 願做鴕鳥呆瓜
莫擾我清幽 疏忽怠慢之處 敬請原諒


2止痛苦 讓明天有希望

 

自訂無名logo語法

效果圖:

 

/*自訂無名logo*/
.powerlogo{
display:block;
width:160px;
height:42px;
background: transparent url('http://sunny666.t35.com/A11.gif') no-repeat left top;
}

.powerlogo:hover{
display:block;
width:160px;
height:42px;
background: transparent url('http://sunny666.t35.com/A11.gif') no-repeat left top;
}

.powered img{
display:none;
}

語法說明:

/*自訂無名logo*/
.powerlogo{display:block;width:160px;height:42px;→寬 高尺寸
background: transparent url('http://sunny666.t35.com/A11.gif') no-repeat left top;}

自訂無名logo圖檔網址

.powerlogo:hover{display:block;width:160px;height:42px;→寬 高尺寸
background: transparent url('http://sunny666.t35.com/A11.gif') no-repeat left top;}

點選連結時logo變化 不怕麻煩可製作2款圖樣 讓此區塊更活潑

.powered img{display:none;}→很重要 此語法是要隱藏無名本身的logo

sunny 美 發表在 痞客邦 留言(2) 人氣()

/*無名網誌-訪客回應欄位加圖片語法*/

效果圖:

/*無名網誌-訪客回應欄位加圖片*/

.comments-head {font-size: 0pt;
background: url(http://圖檔網址.gif) no-repeat center 50%;

color: #ffffff;padding-top: 240px;font-family: 華康少女文字W3;}

語法說明

.comments-head {font-size: 0pt;→隱藏 (給各回應)4字

background: url(http://圖檔網址.gif)

no-repeat center 50%;→圖檔不重複 位置靠中

color: #ffffff;→(給各回應)4字顏色

注意:若要隱藏 請將顏色設跟背景同色

不然網誌上會出現一點點小痕跡出現 (給-的右上方會出現一點)

314教龜毛所以如此設定

padding-top: 240px;→圖檔高度

font-family: 華康少女文字W3;}→如要隱藏 (給各回應)4字 此處沒設定也沒差

也可使用下列語法隱藏我要回應(包含圖檔)

/*隱藏我要回應*/

.comments-head {DISPLAY: none}
 

 

如果無法呈現語法效果

請點選CSS區塊內→按CTRL+F檢查 是否有相同開頭語法.sidetitle並存於CSS中

請刪除或覆蓋 再測試預覽

修改無名CSS步驟:

sunny 美 發表在 痞客邦 留言(9) 人氣()

效果圖:

 

/*欄位標題小圖*/


.sidetitle {background-position: left center;padding-left: 35px;

font-weight: bold;font-size: x-small;

background-image: url(http://圖檔網址0.gif);

border-bottom-width: 2px;color: #333333;padding-top: 8px;

background-repeat: no-repeat;font-style: normal;

height: 30px;background-color: transparent;text-align: left;}

語法說明:
.sidetitle {background-position: left center;padding-left: 35px;

圖檔靠右 與欄位標題字的寬距離

font-weight: bold;font-size: x-small;

background-image: url(http://圖檔網址0.gif);

border-bottom-width: 2px;color: #333333;padding-top: 8px;

與欄位邊緣底部距離 字體顏色 與欄位邊緣頂部距離

background-repeat: no-repeat;font-style: normal;

圖檔不重複呈現

height: 30px;background-color: transparent;text-align: left;}

圖檔與下方距離高度 圖檔位置靠右

 

如果無法呈現語法效果

sunny 美 發表在 痞客邦 留言(6) 人氣()

效果圖:

 

/*無名文章標題前小圖語法*/

/*無名文章標題前小圖語法*/

.title {padding-left: 50px;font-weight: normal;font-size: x-small;

background: url(http://圖檔網址.gif) no-repeat left top;

color: #996600;font-family: 華康少女文字W3;font-size:16px;

height: 45px;}
 

語法說明:

padding-left: 50px→圖檔靠右 距離文章標題字 間隔距離位置

no-repeat left top→圖檔不重複呈現 靠右上位置

color: #996600;font-family: 華康少女文字W3;font-size:16px;

文字顏色  字體 大小

height: 45px→圖檔 與文章內容的高度距離

如果無法呈現語法效果

請點選CSS區塊內→按CTRL+F檢查 是否有相同開頭語法.title並存於CSS中

 請刪除或覆蓋 再測試預覽

修改無名CSS步驟:

注意:選取 CSS 範本 請選擇 可開放修改的範本 便利日後修改使用)

sunny 美 發表在 痞客邦 留言(1) 人氣()

效果圖:

 

/*無名首頁 相簿 網誌 留言 好友 圖樣語法*/

/*首頁  圖樣*/

#linkMypage {padding-left: 15px;background: url(http://圖檔網址.gif) no-repeat left 50%;}

/* 相簿  圖樣*/

#linkAlbum {padding-left: 15px;background: url(http://圖檔網址.gif) no-repeat left 50%;}

/* 網誌  圖樣*/

#linkGbook {padding-left: 15px;background: url(http://圖檔網址.gif) no-repeat left 50%;}

/* 留言  圖樣*/

#linkUser {padding-left: 15px;background: url(http://圖檔網址.gif) no-repeat left 50%;}

/* 好友  圖樣*/

#linkBlog {padding-left: 15px;background: url(http://圖檔網址.gif) no-repeat left 50%;}

 

語法說明:

#linkMypage {padding-left: 15px;background: url(http://圖檔網址.gif)no-repeat left 50%;}

#linkMypage→首頁 字樣

padding-left: 15px→圖檔靠左 離首頁的字距離

no-repeat left 50%→圖檔不重複呈現 靠左 中位置

如果無法呈現語法效果

請點選CSS區塊內→按CTRL+F檢查 是否有相同開頭語法並存於CSS中

例如:#linkMypage 請刪除或覆蓋 再測試預覽

修改無名CSS步驟:

   

注意:選取 CSS 範本 請選擇 可開放修改的範本 便利日後修改使用)

登入無名→點選 樣式管理

sunny 美 發表在 痞客邦 留言(7) 人氣()

Close

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

reload

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼