付費限定

網頁設計架構介紹 (歡迎頁筆記)

更新 發佈閱讀 3 分鐘
  • 接下來會用顏色做區分


raw-image
  •   紅色框住的是透過<head></head>中加入或修改,主要影響的是整個網頁最底層的基礎設置,例:你的網頁是配顯示器設置、你的此網頁名稱、設置整面網頁字體照片統一尺寸….
  • 藍色框住的是透過<body></body>我們最主要要設計的地方,需要告訴客戶你這個網站是(賣服飾、雜誌、分享娛樂新聞….)


  • 那這邊說一下程式運作的邏輯:

閱讀次序<head>中的讀完>>>>閱讀你寫在<body>內的內容

最後讀到的會覆蓋你前面寫的喔!!!

同樣你在<body>內的內容也會分層級,最後覆蓋掉的通常是寫在單行中的

例:你在<div>設置整體大小,但你又在裡面的圖片又給了他一個尺寸,程式會當你最後要的是這個,所以他只會依據你在圖片給他的尺寸縮放


  • 所有程式開始前都要打的架構~(可以說是大框架)

在vscod比較貼心打驚嘆號!後按Tab鍵這個架構就會出來了

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. .
  5. <title>此頁面名稱/標題</title>
  6. .
  7. </head>
  8. <body>
  9. .
  10. </body>
  11. </html>
  • 那接下來說明一下我們歡迎面使用到的功能和一些設置是什麼
以行動支持創作者!付費即可解鎖
本篇內容共 1179 字、0 則留言,僅發佈於歐趴小精靈你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
留言
avatar-img
留言分享你的想法!
avatar-img
歐趴小精靈
0會員
2內容數
歡迎各位~你們是我的金主爸媽~
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
本章介紹了 CSS 中的顏色和背景屬性,包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置,以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
Thumbnail
本章介紹了 CSS 中的顏色和背景屬性,包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置,以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
Thumbnail
報價書需要具備的內容有哪些呢?關於設計報價書製作的二三事在這裡!
Thumbnail
報價書需要具備的內容有哪些呢?關於設計報價書製作的二三事在這裡!
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News