奧莉薇
11 位追蹤者
奧莉薇
11 位追蹤者
全部內容
由新到舊
※ 首頁重點：
index.html：
<body>
<!-- 主結構 -->
<div class="wrapper">
<!-- Start main -->
<section class="main">
<!-- Start jumbotron -->
<div
※ 切版分析：
各區塊細節解析：
1. .header 頁首區
視覺焦點：Logo + 背景圖，營造品牌形象。
文字內容：包含「Rmoo Cafe」與中文標語。
設計重點：
背景圖可能使用 background-image 搭配 cover或 contain。
Logo 可用<img
※ contact內容：
index.html：
<!-- Start contact -->
<div class="hero hero-bg-grey">
<div class="container">
<!-- 區段介紹 -->
<div class="se
※ 英文原則：
※ 編碼宣告：
※ 文件開頭：
※ 文件開頭範例：
※ 註解範例：
※ 註解原則：
※ 元件權重原則：
※ 元件權重範例：
※ Class管理：
※ 語意化：
範例一：
範例二：
範例三：
範例四：
範例五：
範例六：
※ 開發人員工具：可以參考命名
※ 各式置中方法與複習：
※ 建立center_practice專案：
1. margin: 0 auto：
index.html：
<body>
<!-- margin: 0 auto; 的置中方式 -->
<h2>1. margin: 0 auto; 的置中方式</h2>
<div
※ 圖片放置結合商品卡範例：
商品成果範例：
建立product-card-2_example專案：
index.html：
<body>
<!-- 網頁的最外層 -->
<div class="wrapper">
<!-- 商品卡 -->
<div class="prod
※ 常見圖片放置方式介紹：
第一種：
第二種：
第三種：
第四種：
※ 討論圖片放置方式的目的：
※ Background屬性：
※ Background背景屬性設定：
※ Background使用時機：
※ Background標籤和Image標籤比較：
※ 圖片放置範例：
※ 成果範例：
※ 範例實作：
1.建立navbar_example專案：
2.建立navbar：index.html
<!-- Start header -->
<header class="header">
<div class="navbar">
<div clas
※ 成果範例：
※ 範例實作：
1.建立page-layout_example專案：
2.建立基礎結構：index.html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>Page La
※ Layout佈局介紹：網頁畫面整體的框架
設計稿解構：
佈局：
header：表頭
main：主要內容
footer：表尾
row：列
colum：行
元件：
欄位：
排版屬性：
※ Inline– Block範例：
1.建立layout_example專案：
2.建立
