Day8 | html網頁排版
![Day8](https://i.imgur.com/axBPWDg.jpg)
今天是鐵人賽的二週目第一天,昨天有提到二週目定調為網頁排版複習週,事不宜遲,讓我們快速進入正題吧!註1:其實這邊很多概念我都是上六角學院的課程學來的,為了避免文章劇透到六角課程的內容,以下我會用我的話跟整理方式呈現。註2:本週主題跟上週有落差?其實也不能這麼說,昨天文章有提到,本次挑戰有一個重要目標就是要交作業,所以除了JavaScript的語法,網頁排版也要會才行。正片開始前言:網頁排版?啊不就把html標籤擺一擺就好了嗎?嗯我不知道有沒有人會這樣想啦,但我要幫前言下個標題,所以就這樣下了XD試想,你現在買...
![Day8](http://pix2.agoda.net/hotelimages/595/5950711/5950711_18111512330069718344.jpg?s=800x)
今天是鐵人賽的二週目第一天,昨天有提到二週目定調為網頁排版複習週,事不宜遲,讓我們快速進入正題吧!註1:其實這邊很多概念我都是上六角學院的課程學來的,為了避免文章劇透到六角課程的內容,以下我會用我的話跟整理方式呈現。註2:本週主題跟上週有落差?其實也不能這麼說,昨天文章有提到,本次挑戰有一個重要目標就是要交作業,所以除了 JavaScript 的語法,網頁排版也要會才行。
正片開始 前言:網頁排版?啊不就把 html 標籤擺一擺就好了嗎?嗯我不知道有沒有人會這樣想啦,但我要幫前言下個標題,所以就這樣下了XD
試想,你現在買了人生第一棟房子,然後很高興的要趕快擺家具趕緊入住,但發現家具都擺進去房子後整個變得很凌亂不堪。因為你沒有好好規劃這些家具的特性,還有動線之類的。當你沒有考慮家具特性(佔不佔空間之類的)去對各個物品的擺設事先規劃設計,只是一股腦兒亂塞,就會造成像以下這張照片的悲劇,房間地板被所有東西充斥,根本沒有讓人走路的動線。
是的,網頁排版跟室內擺設是一樣的道理,網頁大概想得到一定會有 h1, h2, p, a, ul, li..... 等等這些標籤,如果你對這些標籤的特性不清楚,只是在 html 將這些標籤亂塞,網頁的呈現也會很悲劇。
好,引言結束,讓我們正式進入本日文章的內容吧~
欲練此功,必先自宮 不是啦,網頁設計第一步:CSS reset相信很多人都對這個不陌生,CSS reset 是什麼呢?就是各家瀏覽器對各個標籤其實都有自己預設的樣式,例如某C家的瀏覽器對 h1 標籤有以下預設樣式,上下都會留白之類的。
但問題來了,
你怎麼可能記得每個瀏覽器的每個標籤樣式長怎樣? 就算你記得,你也不可能對不同瀏覽器下不同樣式之類的,會起肖。 設計稿跟預設樣式衝突的時候要怎麼辦?所以為了符合前端設計師給你的設計稿的要求,第一步直接放大絕,CSS reset 直接用下去,它會將絕大部份的標籤樣式清零的概念,
這樣你後面才能開心的照著設計稿做~CSS Tools: Reset CSS - Meyerweb[1](應該大家都用 M...
取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
CSS DIV 三欄式網頁排版設計 | html網頁排版
CSS 排版教學– 4 欄式網頁版型– 範例下載 | html網頁排版
CSS 排版教學– 單欄式網頁版型設計 | html網頁排版
Day 5 | html網頁排版
Day 6 : HTML | html網頁排版
Day8 | html網頁排版
今天我們用CSS 來排版吧 | html網頁排版
網頁排版設計. 1. CSS DIV單欄式排版: | html網頁排版
網頁設計– HTML 基本排版 | html網頁排版
網頁設計愛用的HTML5三種元素排版 - 駭客任務 | html網頁排版
![](https://i.imgur.com/axBPWDg.jpg)
![](https://i.imgur.com/axBPWDg.jpg)
![](https://i.imgur.com/axBPWDg.jpg)
![](https://i.imgur.com/axBPWDg.jpg)