創作內容

29 GP

【最新文章底圖、外框設定】

作者：藏鏡咪咪│2007-09-03 23:00:56│巴幣：0│人氣：5906

阿咪的教學是非常簡單的，加上自己先天不足，後天又失調，

所以都是靠著慢慢摸索來改變我的小屋，

為了不讓大家看的頭昏眼花，我都是用局部性的來教大家

我的教學是適合初學者，請大家多多包函^O^

這篇教學的範本，就以我小屋部落閣最新文章的圖片來教學，

相信眼尖的朋友在上星期六，已經看到阿咪把底色改成一張的圖片了，

這裡就教你怎麼把他改成圖片。

《背景底圖設定》

1.打開CSS設定，找到以下的字串

}/*個人部落閣文章標題顏色*/
.articlebox{
background :#2FA8D0;
border:10px solid #2FA8D0;

2.將上面黃色的字改成下面的語法
background-image : url(插入圖片網址);

3.把找好的圖片插入位置欄裡面，就可以有漂亮的底圖了

《外框線條設定》

1.先從下面挑好你想要的邊框樣式

實心線：solid(這是原本的設定)
點：dotted(也就是虛線)
短線：dashed
雙實線：double
立體內凸框：doublegroove
立體浮凸框：ridge
凹框：inset
凸框：outset

2.選好要的樣式後，把英文字複蓋在上面語法裡solid上就完成了

舉例：如果你想要把"實心線"改成"點"那麼語法就變成

border:10px dotted #2FA8D0;

當你成功之後，許多地方都可以照這個方式來修改自己想要的樣式了，

相信大家一定都能把自己的小屋佈置的美美低。

我的css都是從凱哥這裡學來的，

裡面的教學非常清楚簡單，有興趣的人歡迎進去研究。

別忘了回文喔!歡迎大家一起來研究~*

喜歡 29 收藏 59 引用留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=302858
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：|css|語法|教學|

【回應備存】上傳功能說明、修改(橫幅/看板/背景)圖

【小屋】CSS自訂版面：進階─左邊、右邊，我幫你換邊

自訂面板CSS教學文章的小屋～各小屋連結 (不定期更新內容~)

【 CSS語法教學攻略篇】

【圖片上傳空間】

留言共 42 篇留言

可可鴨：
嘎喔~~~~
小屋功能變好複雜喔.....
看來我還得加緊學習.要不然會跟不上腳步

09-03 23:06

藏鏡咪咪：
跟著阿咪做就不會複雜了喔!
因為我的教學是初學者>Q<09-03 23:09

小剛使出喬伊小姐：
發現XDDDDDD

這次是底圖呢@ˇ@/

好棒~ 這下可以換了=ˇ=!!

謝謝咪姐教學>ˇ<!

09-03 23:06

藏鏡咪咪：
不客氣~快去找皮可丘喔!
話說....因為你皮卡丘都被我改名了>Q<
昨天經過你的提醒我才發現的....(羞
09-03 23:12

賣圍兜兜的麥兜：
咪咪的小屋越來越多采多姿了~
我會在"努力"研究看看...~"~
比初心者還心的人留~噗噗~

09-03 23:14

藏鏡咪咪：
噗!你不懂的話我可以電話教學...哈哈09-03 23:47

Secret：
很有用呢@@!
感謝分享^^~

09-03 23:29

杏仁PannaCotta：
杏仁我是電腦大白痴事也~
謝謝姊姊教學~
Let me practice !

09-04 00:57

藏鏡咪咪：
阿...不客氣喔~
但我是英文白吃說~最後那句是什麼意思0.009-04 08:38

Minnie：
就在昨天下午，我自己摸索了半天(頭昏眼花)
用插入圖片的語法找到這個位置..

不過沒想到教學出來啦>口</
(嗚嗚..教學發現的太晚了..昨天找的好辛苦)

感謝咪咪大的分享，是否能夠引用呢^_______^?

09-04 06:30

藏鏡咪咪：
歡迎引用喔^_^09-04 08:38

世界末日：
喔!

09-04 09:55

南無阿彌陀佛：
頭痛…

應該是懶吧…(炸..

09-04 10:04

風的名字：
好棒喔！

哪天來試試@@+

09-04 10:14

藏鏡咪咪：
有任何問題可以回來留言^^09-04 14:40

Doge To The Moon：
thx~~

09-04 11:25

電氣黃老鼠：
我放棄

09-04 13:46

昨日夢醒今日醉：
大人，這篇我要收藏♡>//0//<~推

09-04 14:11

藏鏡咪咪：
謝謝~^^09-04 14:34

白菊：
越來越多可改

學不完><

09-04 14:33

藏鏡咪咪：
是呀!不過我會盡量用最簡單的方式來教學09-04 14:35

千也紗：
唷唷~~
凱哥真滴粉讚!
謝謝你來到我滴小屋坐坐~~ ^^

09-04 15:29

藏鏡咪咪：
對呀!我最近都會跑取凱哥那裡晃晃09-04 20:04

心豚肥宅：
太棒了耶耶

09-04 18:02

RYO：
巴哈的能人真的很多~~~
算起來這裡真是個很良性的學習加競爭場所~
因為通常看到跌人用的每美的自己也會忍不住來用一下~哈~~
謝謝你的分享了~!

09-04 19:02

藏鏡咪咪：
噗!希望你的小屋也能變的很美喔^^09-04 20:05

RYO：
好東西~cl3zp vu;3

09-04 19:02

RYO：
好東西~好分享!

09-04 19:03

放空ing：
剛剛TRY了一下...

要找圖真困難= =""

09-04 20:34

＊氣質淑女熊吉妹＊：
感謝分享~^^
很棒的css教學喔!!

09-04 21:19

Forever：
這部分我還不太會用
.articlebox{
border:1px solid #7DC8D0;
background-image:url(http://photo.pchome.com.tw/_manage/my_pic.html?s=s07&n=asd80420&b=15&p=112950217946);
預覽圖沒變

09-06 19:03

藏鏡咪咪：
你使用的是PCHOME的相簿，基本上是無法顯示的喔!
建議你自行上傳圖片至空間09-06 20:04

路人喵：
又學到一樣東西了

謝謝妳^^

gp for you

09-07 03:12

美聲♀淚小喵：
本篇留言已被〔gn6824〕刪除

09-07 11:58

藏鏡咪咪：
不好意思~不小心刪錯了>_<
謝謝你的推文喔^^09-07 12:43

小剛使出喬伊小姐：
屋還是不會用冏......

09-07 18:28

藏鏡咪咪：
是框的地方不會用還是底圖的部份呢?!
底圖的話你把網址給我，
我幫你套好正確語法!09-07 18:44

七夜-PeaceCraft：
底圖好像只能放 gif 和 png @@?

09-08 01:48

七夜-PeaceCraft：
我倒 Orz ...
原來圖片還要副檔名是大寫才能顯示...

09-08 02:46

拉提沃☕：
解說好詳細喔
最重要的還是包回去（死）

09-08 18:25

㊣☆舒坦★㊣：
打包回家

研究中

感謝唷~~!

09-09 21:46

㊣☆舒坦★㊣：
我的背景藏在最下面看不到@@

怎麼搞透明工程呀

09-09 21:53

藏鏡咪咪：
這個工程很浩大，已經多位巴友在詢問了，
但我目前實在不知怎麼教學起，
畢竟要動用到整個css語法，
如果我有想到簡單的方式，一定會po出來分享的^^09-10 19:02

小Yan：
好文一枚>"<

09-12 15:36

ExclaiminG：
佩服佩服

09-18 15:15

紫苑：
謝謝分享

10-19 23:12

小漾：
幫助很大

10-26 14:34

微酸≠ⓛ ⓞ ⓥ ⓔ：
我又碰到瓶頸了囧"
這次是不管如何試,底圖的部份就是修改不出來
語法都正確的貼入,網址也都正常>"<
但是就是無法顯示>"<
咪大救命唷>Q<

10-26 17:06

綻放＊：
感謝您無私的奉獻 >\\\\<

12-25 20:06

綻放＊：
咪咪大人　我有個疑問
就是我文章外觀有圖　可是內文卻是空白一片
可以麻煩您告訴我是那裡出問題了嗎？

/*------------個人部落閣------------*/
/*--最新文章及GP值底色*/
.articlebox{
background-image : url(http://img267.imageshack.us/img267/3426/a20fj7.gif);
border:10px dashed #f2a0a1 ;
padding:10px;
width:100%;
}
/*--文章標題顏色*/
.article_t1{
color:#3eb370 ;
font-weight:bold;
}
.article_t1 a:link, .article_t1 a:visited{
color:#3eb370 ;
font-weight:bold;
}
/*--版主回應分色線*/
.article_hr{
border:none;
background-color:#D9ECF0;
height:1px;
color:#D9ECF0;
}
/*--選項連結樣式--*/
.box1 a:link,.box1 a:visited{color:#c9171e}
.box1 a:hover{color:#c9171e}

謝謝您　^^

12-25 20:56