金魚都能懂的網頁設計-雜記 - Medium

基礎常常最容易被忽略，趁著剛看完Amos 的鐵人賽- 金魚都能懂的網頁設計入門 教學影片，寫個重點整理，補充自己忽略掉的小細節。

CSS 可以放在head 內，外部或是行內， ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinchloelo925金魚都能懂的網頁設計-雜記筆記30天影片教學重點PhotobyTrevorClevelandonUnsplash基礎常常最容易被忽略，趁著剛看完Amos的鐵人賽-金魚都能懂的網頁設計入門教學影片，寫個重點整理，補充自己忽略掉的小細節。

CSS可以放在head內，外部或是行內，行內主要是給JavaScript去做控制，而且權限最高，平常撰寫盡量不要寫在行內。

figure和figcaption—html5用於上的新標籤figcaption可以當作是圖片的標題或是敘述，建議放在figure標籤內的第一行或是最後一行，如果有需要，一個figure標籤內圖片可以放多張，figcaption也可以加入標題(h1..h6)和段落(p)標籤做詳細說明。

用xmind心智圖去建立筆記，更清楚架構先建立子主題再使用滑鼠拖拉來做分類使用Enter鍵建立主題使用Tab鍵建立子主題分類不用吝嗇盡量建立，後面再歸納跟增減不用拼命的一次筆記完所有的項目，持續筆記才是重點問題可以做一個獨立分類看到不認識的CSS屬性可以先記錄到心智圖，後面再找時間研究跟修改筆記英文網站看不懂可以用瀏覽器內建的翻譯功能試著翻譯看看，多少有點幫助區塊尺寸(boxmodule)計算整體寬度指的是內容的寬度width加上padding、border和margin的寬度，其中margin是看不到尺寸，其他三個是可視尺寸。

CSSmargin、padding等撰寫位置依順序分別代表了什麼？舉例來說：margin:20px(上下左右)margin:0px20px(上下左右)margin:0px20px30px(上左右下)margin:0px20px30px15px(上右下左)製作版面時，想先有個簡易的畫面呈現，卻又沒有圖片怎麼辦？可用假圖產生圖片，尺寸大小或是隨機出圖都可以在網址上設定。

假圖產生網址1：https://fakeimg.pl/假圖產生網址2：https://picsum.photos/比較推薦這個，sublime或vscode都可以安裝套件直接使用。

用float呈現的版塊，下方一定要用clear做清除浮動，常用的命名為clearfix網頁兩大主角block,inline特性分別是什麼？block是有面積的，可以設定寬跟高inline設定寬高無效，可以設定padding的左右值，上下值無效，無法被撐開。

inline-block同時擁有兩種display的特性，可以設定寬高，但也可以與其他元素並排**重要小細節—inline-block會產生空白字元當編排版面時，如果使用inline-block(像是a或li設定)，標籤之間會有空白字元約4~5px，清除空白字元的方法如下方說明：box-sizing屬性是什麼？box-sizing把寬度這個屬性指定給哪一個範圍box-sizing:content-box;//把寬度範圍指定給內容物的空間box-sizing:border-box;//把寬度範圍指定給邊框到邊框之間的空間所以在block元素中只要設定box-sizing:border-box;就不用另外再計算padding、border的寬度造成width賦予的值不直覺。

假設width:300px,padding就算加了20px,border加了4px，寬度依舊是300px。

cssreset與normalize不同瀏覽器顯示的畫面與預設的樣式皆不盡相同，為了要讓css樣式統一看起來一樣，有兩種做法，一個是將css預設樣式全部重置，也就是reset，另一個常用的是normalize，將一些設定做修正，沒有全部拿掉，可以依專案需求或是自己習慣去選擇使用。

**補充說明兩者差異之好文：小事之CSSReset與CSSnormalize排版聖品flex:參考flex直播教學影片屬性中，只要看到content就是多個，item就是單一個，align就是指次軸(相對於主軸的另一個軸)order預設值每個item都是0，當其中一個變成item變成1，那個1就會跑到最右邊(其他都是0)，如果設定是-1就會到最左邊(因為其他都是0)。

flex-basis控制flexitems的主軸長度(如果主軸是橫的那就是等同寬度width，如果主軸是縱向的，那就等於高度height)，但flex-basis權重比width和height大。

flex-grow伸展—把剩下的空間作分配，預設是0。

bs4裡，在flexitem中設定flex-basis:0;(預設寬度0)，然後每個個別item的flex-grow:1(假設是要一行三個區塊，寫成flex:grow:4;也可以，因為12等份，每塊均分4分)用伸展的方式給每個內容寬度…用在單列可以，用在多列可能有問題。

flex-shrink收縮比，預設是1，可以用在類似像選單固定內容依照螢幕剩餘寬度時，總比值—各個子項目寬度*收縮值，並加總這所有子項目計算結果**補充:flex-shirnk設為0，寬度就以basis&grow來算了。

flex-shrink的計算公式：(很複雜XD)(子項目寬*收縮比/總比值)*超出值=扣除值flex如果搭配float,float就gg惹。

align-content針對多行，align-items針對一行,align-self針對單一個。

**補充網頁色彩概念。

**從學生問題補充flex觀念：現有兩個物件logo和nav，父層是flex，所以預設子層是不換列的，也就表示logo跟nav都會被強迫待在同一列，這時候因為兩個物件的寬度加起來超過父層寬度了，所以flex-item的flex-shrink屬性會產生作用，讓logo跟nav都自動縮減寬度至符合父層的寬度。

雖然flex-item屬性是屬於block的特性，但是我們還是要看一下他跟其他屬性之間的搭配。

**重要小細節—img的vertical-align要設定，只要不是baseline就可以(圖片下方會有白邊)，詳情看這裡。

常用的三種定位：fixed、relative、absolutefixed：依據瀏覽器視窗做定位，永遠固定在視窗範圍內top,left,right,left都設定為0,margin設定auto,會在瀏覽器正中間。

像是fixed、Absolute、float還有flex底下的element都是預設不會自動抓取空間寬的特性，因為這時不知道空間有多寬，所以設定了寬度之後他就會去取得空間寬度並與空間等寬。

relative：偏移顯示，保留本來的空間，但位置與本來的位置做偏移。

有定位的物件的z-index會優先於沒有定位的物件，如果兩個都有定位，原始碼後方的物件會蓋住前方的，z-index預設都是0。

absolute：與fiexd相似，都自己獨立一層。

當一個物件設定為絕對定位，會去父層找定位，只有父層有relative或是absolute或是fiexd，有定位的設定，上方第一個有定位的就會成為物件絕對定位位置的依據，但如果父層都沒有，預設會是在瀏覽器視窗上(注意，不是body也不是html)，但不像fixed，預設只會定位一次，拉動捲軸會跟著捲軸跑，不會固定在視窗上。

**補充—在選取多個標籤外新增一個標籤包覆的快捷鍵：sublime-先選取你想包裹的內容接著使用快速鍵MAC:control+W，PC:Ctrl+shift+G後輸入你要的標籤，接著按下enter就完成了。

vscode-使用ctrl+shift+p開啟命令面板之後，輸入wrap關鍵字，接著在列表中找到『WrapwithAbbreviation』，使用這個指令就可以做到跟Sublime一樣的功能了。

**補充--麵包屑常用命名breadcrumb也可以命名成path**補充--圖片不放背景也可以占滿寬的寫法transition轉場transition:屬性轉換時間延遲執行動畫的時間速度;Animation動畫@keyframes類似flash的關鍵影格，自行命名，影格可以設定很多個，css裡要呼叫這個影格的腳本必須要用animation:影格名；animation:動畫名稱播放時間延遲執行的時間速度次數方向填充模式播放狀態(要播放還是暫停)**補充--完整解析CSS動畫(CSSAnimation)媒體查詢mediaquery@media以便為不同媒體類型/設備應用不同的樣式**補充--用手機查看網頁字級與螢幕解析度RWD-Responsivewebdesign響應式網站設計以手機頁面呈現為優先設計，先在手機頁面中將圖片設定為100%;平板或桌機尺寸再用display:flex或其他方式做排版。

如果先寫桌機版再用複寫的設定到手機版，對手機耗電量大，效能比較不好，所以都建議先從手機尺寸設計版面。

**設計時盡量讓css模組化，不同區塊的架構一樣，有一定的規則也方便修改跟套用樣式css3新增了:checked的偽元素，搭配label標籤的for屬性，對應input的id，可以不用js就可以做到簡易點擊觸發事件。

**觀念補充—如果label的for屬性沒有寫，checkbox或是radio要點到input上才會有反應，如果for屬性有對應到input的ID，不管點到input還是label都會有連動反應。

手機nav設計步驟Step1：製作漢堡包老師製作漢堡包選單的寫法：Step2：將選單先移出視窗外e.g.方法1：left:-100%;(已設定絕對定位)..老師先用這種做法做示範方法2：用transform的位移去設定位置方法3：高度height先設定為0，點擊漢堡包之後再將高設定**方法3一定要加上overflow:hidden;不然內元素無法隱藏。

Step3：搭配:checked偽元素去設定#menu_check:checked~headernav{出現選單}//指漢堡包點擊到之後，後面的nav標籤裡要做什麼自己完成的rwd漢堡包選單練習**補充--checkbox的妙用**補充--css垂直置中的23種方法**補充--文字直排的寫法wirting-mode**補充--box-shadow的語法**補充--參考別人用css製作的漢堡選單**補充—sublime中文假字套件—ChineseLoremIpsum快捷鍵：clorem再alt+c(簡體)、ctlorem再alt+c(繁體)vscode目前只看到有簡體中文的，外掛名稱是「ChineseLoremIpsum」Bootstrap官網中的css檔案、js檔案都要複製進html裡container固定寬度container-fluid滿版row一個橫排col表columnbootstrap分五個尺寸，預設是將版面切分12個等分(欄)，佔欄數：佔據幾個等分預設.col-佔欄數手機橫向.col-sm-佔欄數(small)平板直向.col-md-佔欄數(median)平板橫向.col-lg-佔欄數(large)桌機.col-xl-佔欄數(extralarge)rwd圖片滿版的設定img-fluidmax-width:100%;意思是圖片最大不超過自己本身的尺寸組件入門：(官網中左邊components可以找到很多組件)Navbar導覽列Jumbotron大的bannerBreadcrumb麵包屑Listgroup一些olul列表(有的有包含連結)Pagination分頁Card卡片式版面Carousel幻燈片Modale.g.按鈕(可以改成連結樣式)點下，alert登入的頁面**補充—background縮寫的說明background-size:cover可以直接縮寫到background後方，前面要加(/)分開。

background:url()no-repeatcentercenter/cover**有些常用預設好的class可以記起來，像是text-center,justify-content-center…JQueryJQuery就是對DOM的操控老師建議可以從google提供的cnd抓取JQuery的連結，取來的連結建議放在

上，比放在head裡可以再多省一點點效能。

也可以直接將JQuery連結點開ctrl+s另存到本地端使用。

JQuery起手式**補充--attribute和property的差異attribute指的是HTML的屬性，property是JavaScript物件中的屬性JQuery事件以toggle作範例JQueryCSS控制用toggle的寫法hide或show，可以改成用css控制的寫法JQuery動畫像是slide滑入滑出slideDown()slideUp()…或是fade淡入淡出fadeIn()fadeOut()…Morefromchloelo925每天一小步，邁向前端路Readmorefromchloelo925AboutHelpTermsPrivacyGettheMediumappGetstartedChloeLo69Followers緩慢的走在前端的路上FollowMorefromMediumNicolaLandroCADSketcherBlenderpluginHeathrileyoCombiningCinemachineandTimelineforUltimateControlPetekSavaşHamitbeyliBoxShadow — CSSDipeshManandharSatelliteImageVisualizationusingTrueColour,FalseColourandNDVIclassificationHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable