創作內容

11 GP

css - 超級新手教學

作者:小角落..│2008-03-25 21:36:18│贊助:0│人氣:3174
給只會26個英文字母的人學的@@"
或是..完全不懂英文~_~
這篇需要很大的耐心+毅力!!
全部看完才會懂喔=口=?



第1步驟: 基礎認識


  background  
→ 背景
  border  
→  邊框
  color  
→  文字顏色


  ↑以上英文謹記!!!(不用死背!!看的懂就好..)



*好的開始,是成功的第一步^^*


  另外 , 如果你記不住 ,可以寫↓

  /* */  
→ 註解 (將你想說的文字寫進去,程式不會執行)

  ex: /* 這個單字是背景喔!! */  →  用註解把『這個單字是背景喔!! 』包夾起來。
   ﹥如果你比較喜歡這種文字說明的,可以參考如語娃娃(indream228) - 【小屋】CSS自訂版面
    ﹥我家是看圖說故事啦=口=||| (搞狗仔@O@?)



*努力做筆記,才能學的更快唷^^*





  然後你打開css..
  看到....

  什麼鬼~
  怎麼border 後面還有-top  -right  -bottom  -left
  老子英文真的非常不好!!!



*加油,css的英文不難^^*



第2步驟: 認識邊框


  border
-top   →  面框線
  border-right  → 邊框線
  border-bottom  → 面框線
  border-left  → 邊框線


  用你最大的想像力去記住後面那四個英文
  




*加油,已經學會一半囉*




第3步驟: 邊框的設定

  
  border-top:#FFF 1px dashed;
→  邊框上方 : 顏色    線條粗細   虛線

  border-top:#FFF 1px solid;
 →  邊框上方 : 顏色   線條粗細   實線



*加油,讓你的小屋顏色更豐富^^*



第4步驟: 顏色

  好~以上都記住以後~
  來開始填顏色
  
  background:#000000;
←背景色 : #000000 顏色的代碼

  可以到 色碼表選擇你喜歡的顏色 , copy過來

  




*讓小屋變的很有個人風格的重要步驟=ˇ=趕快繼續看下去!!*


第4-1步驟: 放圖片
  
  background:url(http://你圖片的網址);
 ← 圖片重複

  background:url(http://你圖片的網址) no-repeat;
 ← 圖片不重複


  圖片要上傳喔!! 可以上傳到這裡..
   樂多日誌(這個可以上傳大大大圖,不過有時候會維修~_~)or
  photobucket←這英文的,不過比較穩定!!---這裡有詳細的潛艇C號(cyclops87) - 帳號申請教學


  ★注意:不能同時寫background:#000000; background:url(http://你圖片的網址); 有時候顏色會蓋過圖片。




*加油,讓小屋更有一整體性=ˇ=*



第5步驟: 文字


  color: #006699;  → 文字顏色

  font-weight: bold;   → 文字粗體

  text-align: center; 
  → 文字置中
  text-align: left; 
   → 文字置左
  text-align: right; 
  → 文字置右

  font-size: 12pt;  
  → 文字大小



*基礎語法都知道囉,要改哪裡呢 ?*




第6步驟: 修改


  有了以上的認識以後 ,
  就可以修改你想要的部分了!!
  到這篇css - 導引看你想要修改哪裡,就點哪張圖進去..

  進去後你會看到..
  .banner { background....
    border-top:.... }


  沒錯!!那張圖所修改的部位就是.banner{} ←把你想要的效果放在 { }

  而.banner就是那個部份的 標籤唷!!


*下面很重要喔!!免的小屋變的一片白@O@"*




第7步驟: 注意事項


  記得..
  每一句語法background : #000000 ;
  ﹥都會有冒號(:)開始 和分號(;)結尾

  每個標籤.banner { background....}
  ﹥都會有{ } 把語法包進去



*當你看到這,還想往下看,恭喜,你已經脫離初初初學者囉^^~*





第8步驟: 不滿足


  如果以上的設定無法滿足你的需求..
  請到css - 語法說明看..你想要的..語法..(不過還是簡化很多><)
  



*趕快動手改小屋吧~你也能變大師!!!*



(我不是大師啦..我還是初初學者) [ 比你少一個初=口=||| ]




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

相關創作

同標籤作品搜尋:|css|小屋|教學|

留言共 15 篇留言

貝貝
太讚了啊!!
要推上天的喔!!

03-25 21:38

小角落..
呃~有這麼好嗎~
我覺得好想笑..
感覺這篇好像KUSO文@@"
說明的好多餘~"~?03-25 21:42

最近很懶的改小屋~~
認識邊框...的圖表好可愛^^

03-25 21:41

小角落..
噗~~寫完這篇我也覺得很好笑XD03-25 21:42
皇羅
12月初的時候
如果當時就有小角落這些教學(改口叫漠...?
我想我就那時候就不用花20幾個小時才改好一點點
CSS對初學者是真的很難懂的( ̄▽ ̄)|||

03-25 21:44

小角落..
那是你沒看到淵大的教學吧XD
淵大寫很好阿~!!!03-25 21:59
isabel
推推
我終於改好小屋了!
全部都是在這邊看的:P
角落大改暱稱了 改叫漠大嗎xD

03-25 21:45

小角落..
不不不用啦..
那我改回小角落好了~@@"
恭喜你小屋改好囉~
很可愛^^03-25 22:07
失心人
推~~
好的文章推~
加入精華區~

03-25 21:48

小角落..
呵呵~感謝您的推文@@"03-25 22:08
失心人
推~~
好的文章推~
加入精華區~

03-25 21:48

小角落..
呵呵~我剛發文也LAG..真討厭..>"<03-25 22:13
我夢
我還在摸索中
不過每次改好 忘了存檔
不過慢慢得了解什麼是css了
哈 多謝妳一直po新手文章

03-25 21:57

小角落..
感覺有點本末倒置XD
越寫越是新手教學~_~
這篇越寫越覺得好笑..
應該沒什麼人需要..
卻一堆人回我@O@"
---
你好好加油><
老實說..
我討厭看字啦~"~
覺得這篇實用性不大@@"
---
存檔阿!!
1.css →Ctrl+A 全選
2.Ctrl+C  複製
3.開啟『記事本』
4.Ctrl+V 貼上
---
如果真的不行就..
套用最原始的重新改過吧XD03-25 22:12
小角落..
對了~另外還有
Ctrl+Z 可以『復原』
如果你覺得改錯了~回到CSS按這個鍵~
他好像可以復原很多次!!!(5次以上應該有...)
'css - 無聊小技巧'03-26 10:25
皇羅
如語娃娃、淵、異、夏日薔葳、雪娘、藏鏡咪咪
這些我都看了...
可能是基礎的部分沒摸熟,所以我一開始改都進入不了狀況..就是這樣子。

03-25 22:11

小角落..
這篇是沒梗+有人一直說看不懂..
才會冒出來的~
我覺得寫的很好笑~_~
雪娘有寫教學阿@@?
我怎麼不知道@O@"
---
查英文阿XD
不過還是有很多語法我不懂..
所以我的語法教學也是..漏了很多東西...03-25 22:15
小角落..
我想大家應該都直接跳過『語法說明』吧..
因為太多字了~文字比不上直接套用試試看來的有心得
所以才會進入不了狀況@@"03-25 22:19
皇羅
雪娘沒寫教學,不過她當初有發文章,整理出上述那幾位專家,
我看到之後一家一家翻。一開始是先發現如語娃娃有提供可以套用
所以我邊改邊學,不過成果不大。
然後還在學校圖書館翻CSS的書看、上網找CSS教學。
才總算有懂一些CSS文字的意思..
真的,要不是小角落有說我把好看的背景圖都遮起來了,
我再看妳家的教學有改好,不然我一定是懶的再改的。

語法說明一定要看…不然會像我當初一樣,改哪是哪都不知道@@
小角落一語道中~!

03-25 22:34

小角落..
你..也太認真了吧!!!
還去翻圖書館的書~我輸了...
有這麼困難嗎@O@"
---
背景圖阿~
大家都只有寫div..
又想說之前就有寫其他的..所以就..
而且我當初要改的時候也看不太懂..
前面一堆框框擋住..
想說大家是不是也有跟我有這樣的情形..
就補上去..方便大家不用一篇篇找^^03-25 23:03
遙葉
總有一天會用到吧(遠目

感覺自己好懶散喔...

雖然會很羨慕別人家裡很有活力很漂亮
可是卻總是意興闌珊...

目前的計劃是等到長假才會動工
剛完小屋不久,連基本知識都還很欠缺貧乏~"~

03-26 03:44

小角落..
嗯~不急~
css很花時間的!!
當你開始改的時候,
就停不下來了XD..
會上癮!!小心!!!!03-26 08:53
男的辣
框框的教學:D

下次在改小屋的話
一定要來你這邊看xD!!

我只會用人家設定好的 :P

03-26 18:47

小角落..
呵呵..
這是給不會英文的人看的嘛ˊˋ
雖然我也覺得很好笑XD03-26 19:26
Freedom
喔~終於找到這種小屋佈置教學的文章了>"<

這對於初初初初初初學者來說是超有用的呢!

請容Freedom將您此類的文章收藏起來好好研究!

10-29 14:27

小角落..
呵呵~感謝您的喜愛>Q<
這是寫給看不懂英文的人的..XD
加油唷^^10-29 15:09
瓜吉拉(?)
要怎麼把所有的邊框透明
我想只用背景一張

01-31 14:30

小角落..
那就看看這篇吧!!'背景教學+透明化'
應該能解決您的問題XD?01-31 22:25
被打馬賽克
除了讚不知道還有什麼形容詞~!

07-22 23:48

Koek
我是新手 !!!謝謝~

09-19 13:46

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

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

前一篇:css - 右下圈圈... 後一篇:精華區的使用方法.....

追蹤私訊

作品資料夾

r1013610136各位巴友
小說更新 歡迎來看看~看更多我要大聲說昨天21:38


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

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