成果展示：
這篇上面是分享語法。下面做了簡易教學，標出改這個版面最需要的知識，也是我這三天來努力Ｋ書的語法筆記。
我看了歐飛先生推薦的：《HTML&CSS網站設計建置優化之道》這本真的非常適合像我一樣零基礎的人。
之後遇到不懂的就上網查資料，看YT學習。(歐飛先生的連結我放的是它的部落格實戰系列，蠻有用的！)
－－－ＯＫ！我們開始－－
我是用下面這個版型去改，因為我喜歡粉紅色~大家可以選自己喜歡的顏色。
首先，選擇自己喜歡的版型顏色。
好了之後到「樣式管理」去看看CSS語法。有時候事情比我想像的還複雜，完全不像是教學書裡面會有的整齊語法！（如下圖）光是搜尋某個標籤(tag)要改它的「屬性」和「值」，就不知道要改哪個。後來我就想到「後面的指令會蓋過前面的指令」所以就直接在後面加上新指令!
▲點擊方框內按Ctrl+A全選複製。貼進CSS語法中。全部取代。
--
如果你想了解是怎麼修改的，請繼續看下去。
如果你不知道Html與Css的對應關係，就好比你想控制你的魔法牌卻叫不出他們的名字。這樣他們是不會乖乖聽話的喔。
是這樣請先看我的：【語法】痞客邦HTML及ＣＳＳ十分鐘看基本概念 (裡面有放痞客邦的html架構)
--
如果你真的很忙也沒關係，痞客邦已經考慮到了。它在架構表上把使喚他們的暗號和名字都告訴你了。
你會看到有三個部分被我框起來，這是我待會調整中會提到的重點。他們分別是#header #content #links 三個箱子。
你也可以點開連結看看原圖：痞客邦ｈｔｍｌ架構圖（因為上面被我ＰＳ過了）
接著 ，有個人它沒有標名子，但我等下會用到。不曉得你有沒有看到，在綠色的框下面還有一個透明的框，把粉紅色和藍色的框包住。
▲要非常注意看才看得到！這裡我用虛線把它標出來。它是#main
所以現在有四個重要名子分別是：#header #content #links #main，以下我會稱他們頭部、內容、連結、主要部分。
你先套用一個跟我類似的版型不同顏色沒關係，點一下CSS原始碼的中的樣式預覽，來對應剛才說的那些地方。
。
有頭緒了嗎？綠色是頭；黃色是主要部分；粉色是內容；藍色是連結（區）。
好，我的想法是這樣，你先聽聽我的邏輯，之後我在實際操作一遍：
1將「主要部分」變得跟「頭部」一樣寬，這樣待會我們比較好調整。不然你可能會覺得為啥會有莫名的空白，而我們不能突破……。這會使用width屬性。
２把「內容」和「連結」兩個漂浮的位置調換。我要連結在左，待會用螢幕尺會比較方便側量。先讓你看看螢幕尺長甚麼樣子。這步使用float屬性。
▲在前幾個步驟中，「內容」的粉色框不小心畫太短了，所以修正後變長了，大家別介意。另外，我把黃色框拿掉了，因為「主要區域」的任務已經完成。
３解放「連結」區域的寬度結界，讓它裡面的「連結一」、「連結二」待會可以並排。如果框被設定了寬度，它就會變成堅固的結界，限制住寬度。所以我們這步驟先讓它的框變得很像海砂屋，或是泡泡、橡皮筋、史萊姆……還有更好的比喻可以告訴我。
▲剛才我沒提到#links-row-1、#links-row-2 （我自己稱它連結一、連結二，因為三欄式第一欄我覺得這個稱呼太長）。你可以找一下，連結二在連結一下方。
４把連結下面的#links-row-1、#links-row-2 ，用float屬性變成幽浮使它可以併排。
５使出幻術，幻術是positon：relative也就是相對位置。有點像海市蜃樓，可以在其他地方看到它的幻象，可是本體卻還在原本的地方。那在這裡要提醒的是，使用相對位置後，原本的會隱形，而不是消失喔。我把連結二的幻象往右移，把內容的幻象往左移。
▲這樣就完成了
回過頭來，我們來實際操作一次：
０預備動作，按下樣式預覽，打開網頁後按Ｆ１２叫出網頁開發者助手。
▲你的開發工具視窗可能跟我不一樣，按上面的齒輪，可以選擇你喜歡的位置。
▲不要慌！左邊是html右邊是css語法。我們先前都有看過。
接下來我要詳細說明剛才操作的步驟：
1．把名為ｍａｉｎ的黃色的區域，放得和頭部一樣大。首先要找到ｍａｉｎ在ｈｔｍｌ的位置，因為我們要修改它的ＣＳＳ。推薦給你兩種我常用的方式：
（１）第一種，先開啟元素選取器，按照印象點在頭部和內容之間的位置，找出main，找不到也沒關係，現在是大略找個靠近的位置，等下在附近仔細找就容易多了。
（２）在你想知道元素的地方按右鍵，點檢查。它就會幫你檢查那裏是甚麼元素。
往上或往下找找看，應該很快就會找到了。接著就可以#main的寬度。
▲其實應該改在下面那個#main裡面！非常重要！（對不起我當時截錯圖）要取消的話就在前面勾勾點一下就會被劃掉了。width是寬度的屬性。
用尺量你的螢幕寬度，尺叫做JR ruler：JR ruler下載。把主要區塊設得跟螢幕一樣大，這是為了等下排版留更多寬度給內容，不然擠在一起，內容裡的文章如果有圖片會很小。
２內容和連結左右交換：#content #links (下圖已改好)
▲因為我覺得，「內容」的右邊不應該空白那麼多，所以把游標移動到content，它告訴我綠色和橘色中間是它的邊界，在邊界內的padding空間我不要，所以我要把它劃掉。並且先調整寬度為720px因為我已經自己做很多次了所以就一次調到位。
２把ｌｉｎｋｓ的結界破除（width劃掉），再把連結一、二變成幽浮，設成float:left。框度也順便設240px，不然它可是會霸道的占滿連結結界的一整列。(在html中<div>元素，本性是很霸道的，不喜歡跟其他人並排，後面來的元素一定會被它擠下去，所以才要轉換成幽浮。幽浮是甚麼呢？想像一下，原本大家都在地面，而幽浮是浮在同一個高度的天空。那為甚麼不會飛出「連結」的範圍？因為它是高到無法想像的結界呀，飛得在高都沒有用。我們現在做的是讓兩台幽浮並排。)
３施展幻術，這招叫做海市蜃樓。使用position:relative讓它的幻象出現在想要的位置。還會再加移動方向的指令去控制它。
先調整連結二，那個幻象的基準線是在你原本的位置，如果是left:780px就代表幻象在本體左邊780px處。
調整內容時，我是先想像幻象要在的位置，再量好之間的距離，這樣就可以知道幻象的右邊距離本體280px。有注意到嗎?relative都是用幻象去想要距離原本多少，其實跟margin、padding還蠻像的，只是基準線在本體的地方。
這樣就完成了唷。
接著改完以後要拿到我們剛剛改的全部CSS，再貼進痞客邦的CSS語法中。現在它會有兩個CSS表單，一個是它原本的，一個是後來我們剛才找不到名稱，按+的時候增加的。
分別打開這兩個連結，原本的preview甚麼，你按原本就有的元素甚麼都可以，不一定要跟我一樣選#conent。再來，我們在連結一和二有新增ＣＳＳ，所以要從那兩個裡面擇一找到新增加的表單。
表單長這樣，有畫藍色底線的是我們目前在的位置。
好了之後分別複製起來貼到語法中。
可以先點一下文字框再Ｃｔｉｌ＋Ａ全選刪掉，貼上之後大概長成這樣，按下儲存就可以了。
※我後來發現好像連結一左邊太靠牆，線都不見了，就在連結一加了margin-left: 2px;大家可以照著操作邏輯自己在微調成喜歡的模樣。
※再補充： 容器三要設寬度和至中。這樣它下面的header頭部才不會因為flex的適應屬性，視窗縮小時變成跟視窗一樣的長度，當將捲軸往右拉就會被看到空白。也就是直接讓header去適應包住它的容器3的結界，而不是視窗，如果是依照視窗變化的話會有問題。
div#container3 {
width: 1263px;
margin: 0 auto;
}
留言列表
食在生活：食記、旅行 (7)
