創作內容

29 GP

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

作者:藏鏡咪咪│2007-09-03 23:00:56│贊助:0│人氣:5716
阿咪的教學是非常簡單的,加上自己先天不足,後天又失調,

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

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

我的教學是適合初學者,請大家多多包函^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都是從 凱哥 這裡學來的,

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








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

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

相關創作

同標籤作品搜尋:|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
不能吃的小M凍
就在昨天下午,我自己摸索了半天(頭昏眼花)
用插入圖片的語法找到這個位置..

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


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

09-04 06:30

藏鏡咪咪
歡迎引用喔^_^09-04 08:38
世界末日
喔!

09-04 09:55

南無阿彌陀佛
頭痛…

應該是懶吧…(炸..

09-04 10:04

風的名字
好棒喔!

哪天來試試@@+

09-04 10:14

藏鏡咪咪
有任何問題可以回來留言^^09-04 14:40
我叫托比歐
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

幸福御守
抱歉~學習中(推推

02-12 23:40

大和瑰娃
好食!

02-26 01:28

╭★ OωO香草
( ̄▽ ̄)

04-25 22:49

雪飄影
CSS救世主QXQ

04-30 00:01

玖玖
謝謝你喔
真的對我幫助很大>w<

03-11 02:12

小萍
謝分享

05-01 06:45

我要留言提醒:您尚未登入,請先登入再留言

29喜歡★gn6824 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【 小屋首圖大小設定 】... 後一篇:【 更換主題選單背景 】...

追蹤私訊

作品資料夾

zensince2020給大家
Z3繪圖更新~原創沙漠聖壇護衛(含草稿)歡迎逛逛看更多我要大聲說昨天17:43


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】