BenzHub

HTML & CSS RWD @media 使用介紹 | CSS

Thu, 01 Feb 2024 00:00:00 +0000

HTML和CSS中的Responsive Web Design（RWD）技術，特別是@media查詢，是用來製作具有響應式的網頁。讓我們一起來看看如何使用@media查詢在不同設備上呈現不同的風格和排版。

CSS 表單美化教學：打造好看的 Form 樣式

Tue, 02 Jan 2024 00:00:00 +0000

CSS 表單樣式通常會出現在用戶登入或是輸入資料的地方，對於用戶的使用體驗有很高的影響性。本篇文章將會跟你介紹 HTML&CSS 中表單的樣式設計。

display 屬性 (block & inline) | CSS

Tue, 02 Jan 2024 00:00:00 +0000

CSS display 屬性基本上分為兩個值： block 和 inline ，賦予開發人員控制HTML元素佈局和呈現的能力。

Float(浮動) | CSS

Tue, 02 Jan 2024 00:00:00 +0000

CSS 的 float 使開發人員能夠創建具有多個元素的布局。儘管現代佈局技術，如 Flexbox 和 Grid 越來越受歡迎，但理解並利用 float 仍然至關重要。

HTML 超連結按鈕：如何讓 Button 變成連結

Tue, 02 Jan 2024 00:00:00 +0000

網頁中有兩個重要的用戶互動元素——超鏈接和按鈕，我們將介紹使用CSS來增強它們的外觀和互動性。

定位屬性 position relative absolute | CSS

Tue, 02 Jan 2024 00:00:00 +0000

在Web佈局上， CSS 提供了一個強大的工具：position: relative 和 position: absolute。這兩個屬性在定位元素在文檔中的位置方面起著關鍵作用。

Background and Border(背景和邊框) | CSS

Tue, 26 Dec 2023 00:00:00 +0000

在前端工程師的日常工作中，最常使用的應該就是 background 和border ，不管是在切版或是在關於美感的調配畫面比例，幾乎是每天都會使用，對於前端工程師來說， background 和border 是一定要熟練掌握的。

Box Sizing Margin Padding(內容盒子與邊框盒子與內外距) | CSS

Tue, 26 Dec 2023 00:00:00 +0000

CSS 內容盒子與邊框盒子、外邊距和內邊距！這些基本屬性影響了你網頁中元素的大小、間距和位置。

Color(顏色) | CSS

Tue, 26 Dec 2023 00:00:00 +0000

CSS 在顏色上可以使用 Hex、RGB和文字，我們這邊會用案例介紹這3種的使用方式。

Font Property(字體屬性) | CSS

Mon, 25 Dec 2023 00:00:00 +0000

字體實際上很大程度的影響使用者對你的網站的好感度，因為如果使用錯誤的字體的話，網頁的可讀性太低，使用者可能會想要馬上就關閉你的網頁

Values and Units(計量單位介紹) | CSS

Mon, 25 Dec 2023 00:00:00 +0000

CSS 計量單位分為絕對單位和相對單位，許多人因為使用錯誤的單位，常常導致在RWD(響應式)中畫面發生顯示元素錯誤

CSS Basic Selector(基礎的CSS選擇器) | CSS

Sun, 24 Dec 2023 00:00:00 +0000

常見的 CSS 選擇器的使用方式

CSS Import(CSS引用方式) | CSS

Sun, 24 Dec 2023 00:00:00 +0000

3種 CSS 在 HTML 中引用的方式

div and span(常見塊級元素和內聯元素的搭配使用) | HTML

Sat, 23 Dec 2023 00:00:00 +0000

<div> 是塊級元素，<span> 是內聯元素因此常常互相搭配 <p> 標籤使用，讓文章不會有強制換行的問題

HTML Character Entity(字符實體和符號) | HTML

Sat, 23 Dec 2023 00:00:00 +0000

HTML 字符實體在顯示特殊字元方面非常的方便，且可以避免引用大量圖片，提升網頁的效能。

Block Element and Inline Element(塊級元素&內聯元素) | HTML

Fri, 22 Dec 2023 00:00:00 +0000

HTML 塊級元素和內聯元素！理解這兩者之間的差異對於打造結構良好的網頁非常重要。

Form and Input(表單和輸入框標籤) | HTML

Fri, 22 Dec 2023 00:00:00 +0000

HTML 表單和輸入框！常常是使用者與網站的互動的元件。清楚的認識這兩個HTML標籤是非常重要的。

HyperLink and Image(超鏈結和圖片) | HTML

Thu, 21 Dec 2023 00:00:00 +0000

探討了 HTML 的 <a> 和 <img> 標籤的基礎知識，揭示了它們的簡單性和重要性

List and Table(有序列表&無序列表&表格) | HTML

Thu, 21 Dec 2023 00:00:00 +0000

使用 HTML 中列表和表格！列表結構的內容，或用表格以邏輯方式條列資訊。

Paragraph-and-Tags(基礎標題段落排版標籤) | HTML

Thu, 21 Dec 2023 00:00:00 +0000

理解 HTML 的標籤和其他基本元素的強大之處是網頁開發的基礎。

Meta Tag & SEO(meta標籤和搜尋引擎) | HTML

Wed, 20 Dec 2023 00:00:00 +0000

學習撰寫描述、標題和其他，以提升你網站的可見性。無論你是網站所有者、開發人員還是 SEO 實踐者，了解這些 HTML 標籤策略對於優化你的網站存在、有效地觸及目標受眾至關重要。

前端常用開發工具

Wed, 20 Dec 2023 00:00:00 +0000

我們再進行前端開發的時候，利用工具可以幫助我們進行快速得開發而且還可以更加美觀

利用VS Code 快速創建並開啟HTML頁面 | HTML

Tue, 19 Dec 2023 00:00:00 +0000

新手在撰寫HTML頁面的時候，往往會不知道從哪裡下手，我們利用 VS Code，先快速創建簡易HTML模板，讓我們快速上手