奧莉薇
11 位追蹤者
奧莉薇
11 位追蹤者
全部內容
由新到舊
※ 英文原則：
※ 編碼宣告：
※ 文件開頭：
※ 文件開頭範例：
※ 註解範例：
※ 註解原則：
※ 元件權重原則：
※ 元件權重範例：
※ 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.建立
※ 微互動範例：
1.建立btns_example專案：
2.建立HTML結構：index.html
<body>
<div class="section section1"></div>
<div class="section section2"></div>
<div class="
※ 偽元素：
針對某個元素的特定部分進行樣式設定，而不需要在 HTML 中新增額外的標籤。
常見的區塊元素像 <div>, <p>, <span>, <button>, <section> 等都可以使用。
偽元素常用於加上裝飾、圖示、引號等視覺效果，並常搭配 content 屬性與定位（pos
※ Can I use：超實用的前端開發工具網站
網址：https://caniuse.com/
功能：查詢各種 HTML、CSS、JavaScript 等語法或功能在不同瀏覽器上的支援情況。
使用方式：
加上前綴：解決部分支援的問題
.box {
position: absolute;
