六十天前端強化訓練之第一天到第七天——綜合案例：響應式個人博客項目

=====歡迎來到編程星辰海的博客講解======

目錄

前言回顧

HTML5與CSS3基礎

一、知識講解

1. 項目架構設計（語義化HTML）

2. 響應式布局系統（Flex + Grid）

3. 樣式優先級與組件化設計

4. 完整響應式工作流

二、核心代碼示例

完整HTML結構

Sass樣式實現

三、實現效果展示

四、學習要點總結

五、擴展閱讀推薦

前言回顧

HTML5與CSS3基礎

  1. HTML5語義化標簽
    案例：使用article/section/nav等標簽搭建博客結構
  2. CSS選擇器與盒模型
    案例：實現不同選擇器優先級樣式覆蓋效果
  3. Flex布局實戰
    案例：實現響應式導航欄布局
  4. Grid布局入門
    案例：創建雜志風格的多列布局
  5. 響應式設計原理
    案例：使用媒體查詢實現移動端適配
  6. CSS過渡與動畫
    案例：制作按鈕懸停動畫效果
  7. CSS預處理器（Sass）
    案例：使用變量和嵌套編寫樣式表

這幾天給大家講解了HTML5與CSS3基礎，可能不止七天，因為這段時間有點忙，我準備刷一下六級分數，所有在準備六級，一方面是藍橋杯比賽，其次是競選上了班長，有點累，希望大家體諒體諒，后面爭取給大家每天更新。

大家可以先不看下面的內容，想想這幾天學了什么，哪些知識點自己掌握了，哪些忘了。

一、知識講解

1. 項目架構設計（語義化HTML）

HTML

<!-- 使用HTML5語義標簽構建骨架 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>技術博客 | 前端之旅</title><link rel="stylesheet" href="styles/main.css">
</head>
<body><nav class="main-nav">...</nav><header class="page-header">...</header><main class="content-area"><article class="blog-post">...</article><section class="related-posts">...</section></main><aside class="sidebar">...</aside><footer class="page-footer">...</footer>
</body>
</html>

設計要點：

  • 使用<article>包裹獨立博文內容
  • <section>劃分內容區塊
  • <nav>包含主導航鏈接
  • 通過<main>與<aside>實現主內容/側邊欄分離

2. 響應式布局系統（Flex + Grid）

SCSS

// Sass變量定義
$breakpoints: (mobile: 480px,tablet: 768px,desktop: 1200px
);.content-area {display: grid;grid-template-columns: 1fr;gap: 2rem;@media (min-width: map-get($breakpoints, tablet)) {grid-template-columns: 3fr 1fr;}
}.main-nav {display: flex;flex-wrap: wrap;justify-content: space-between;@media (max-width: map-get($breakpoints, mobile)) {flex-direction: column;}
}

布局系統解析：

  • 移動優先原則：基礎布局為單列，逐步增強為大屏布局
  • 使用Grid創建自適應內容區（主內容+側邊欄）
  • Flex實現導航欄的彈性布局
  • 通過Sass變量管理斷點值

3. 樣式優先級與組件化設計

SCSS

// 使用BEM命名規范
.card {// 基礎盒模型padding: 1.5rem;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);&__title {// 選擇器特異性控制color: var(--primary-color) !important;}// 狀態變化&:hover {transform: translateY(-3px);transition: transform 0.3s ease;}
}

樣式設計原則：

  • 通過嵌套選擇器控制作用域
  • 使用CSS變量實現主題化管理
  • !important的正確使用場景
  • 組件狀態動畫設計

4. 完整響應式工作流

  1. 視口meta標簽配置
  2. 流體圖像處理：

CSS

img {max-width: 100%;height: auto;
}

  1. 媒體查詢斷點設置
  2. 使用<picture>元素實現響應式圖片
  3. 使用rem單位保持比例關系

二、核心代碼示例

完整HTML結構

HTML

<body><nav class="main-nav"><ul class="nav-list"><li class="nav-item"><a href="#">首頁</a></li><li class="nav-item"><a href="#">歸檔</a></li><li class="nav-item"><a href="#">關于</a></li></ul><div class="nav-toggle">?</div></nav><main class="content-area"><article class="blog-post"><header><h1>Flex布局深度解析</h1><time datetime="2024-03-01">2024年3月1日</time></header><section class="post-content"><p>Flex布局是現代Web開發的核心技術之一...</p><div class="demo-box"><div class="box"></div><div class="box"></div><div class="box"></div></div></section></article><aside class="sidebar"><div class="card"><h2 class="card__title">最新文章</h2><ul class="post-list"><li>Grid布局入門指南</li><li>CSS動畫原理</li></ul></div></aside></main>
</body>

Sass樣式實現

SCSS

// variables.scss
$primary-color: #2c3e50;
$secondary-color: #3498db;:root {--primary-color: #{$primary-color};--secondary-color: #{$secondary-color};
}// mixins.scss
@mixin flex-center {display: flex;justify-content: center;align-items: center;
}// main.scss
.main-nav {background: lighten($primary-color, 70%);padding: 1rem;@include flex-center;.nav-list {display: flex;gap: 2rem;@media (max-width: 480px) {display: none;&.active { display: flex; }}}
}.blog-post {background: white;padding: 2rem;border-radius: 8px;box-shadow: 0 2px 6px rgba(0,0,0,0.1);header {border-bottom: 2px solid $secondary-color;margin-bottom: 1.5rem;}
}.demo-box {display: flex;justify-content: space-around;.box {width: 80px;height: 80px;background: $secondary-color;transition: transform 0.3s;&:hover {transform: rotate(15deg);}}
}

三、實現效果展示

  • 桌面端：兩欄布局，導航欄水平排列，卡片帶有陰影和懸停動效

  • 移動端：導航折疊為漢堡菜單，內容轉為單列布局
  • 交互效果：按鈕懸停旋轉動畫，導航欄滑動出現
  • 響應式圖片：根據屏幕尺寸加載合適圖片

這是移動端效果，用電腦顯示而已

四、學習要點總結

  1. 語義化結構：合理使用HTML5標簽增強可訪問性
  2. 布局系統：Flex處理一維布局，Grid應對二維復雜布局
  3. 響應式策略：移動優先 + 漸進增強
  4. 樣式管理：Sass變量/嵌套提升代碼可維護性
  5. 動畫原則：使用transition實現平滑狀態變化
  6. 調試技巧：瀏覽器開發者工具審查布局

五、擴展閱讀推薦

  1. 官方文檔：

    • MDN HTML元素參考
    • Sass官方文檔
    • CSS Grid規范

  2. 優質文章：

    • 現代CSS解決方案
    • Flex布局完全指南
    • 響應式圖片最佳實踐

  3. 工具推薦：

    • Autoprefixer自動補全CSS
    • Grid布局生成器
    • Sass在線編譯器

建議在Codepen創建項目實際演練。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/72365.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/72365.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/72365.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

測試的BUG分析

測試的BUG分析

在了解BUG之前,我們要先了解軟件測試的生命周期,因為大多數BUG都是在軟件測試的過程中被發現的 軟件測試的生命周期 在了解 軟件測試的生命周期 之前,我們要先了解 軟件的生命周期 ,雖然他們之間只差了兩個字,但是差距還是很大的 首先是 軟件生命周期 ,這個是站在 軟件 的角…
閱讀更多...
【洛谷貪心算法題】P1094紀念品分組

【洛谷貪心算法題】P1094紀念品分組

該題運用貪心算法&#xff0c;核心思想是在每次分組時&#xff0c;盡可能讓價格較小和較大的紀念品組合在一起&#xff0c;以達到最少分組的目的。 【算法思路】 輸入處理&#xff1a;首先讀取紀念品的數量n和價格上限w&#xff0c;然后依次讀取每件紀念品的價格&#xff0c;…
閱讀更多...
[STM32]從零開始的STM32 BSRR、BRR、ODR寄存器講解

[STM32]從零開始的STM32 BSRR、BRR、ODR寄存器講解

一、前言 學習STM32一陣子以后&#xff0c;相信大家對STM32 GPIO的控制也有一定的了解了。之前在STM32 LED的教程中也教了大家如何使用寄存器以及庫函數控制STM32的引腳從而點亮一個LED&#xff0c;之前的寄存器只是作為一個引入&#xff0c;并沒有深層次的講解&#xff0c;在教…
閱讀更多...
SQL分組問題

SQL分組問題

下列為電商公司用戶訪問時間數據 統計某個用戶連續的訪問記錄&#xff0c;如果時間間隔小于60s&#xff0c;就分為一組 id ts 1001 17523641234 1001 17523641256 1002 17523641278 1001 17523641334 1002 17523641434 1001 17523641534 1001 17523641544 1002 17523…
閱讀更多...
3月2日 C++日常習題測試一答案

3月2日 C++日常習題測試一答案

C測試題答案與講解 一、填空題答案及講解 答案&#xff1a;const 講解&#xff1a;在 C 中&#xff0c;const關鍵字用于定義常量&#xff0c;一旦定義&#xff0c;其值不能被修改。例如const int num 10;&#xff0c;這里的num就是一個常量。 答案&#xff1a;3 講解&…
閱讀更多...
2W8000字 LLM架構文章閱讀指北

2W8000字 LLM架構文章閱讀指北

? 大模型架構專欄已經更新了30多篇文章。完整的專欄內容歡迎訂閱&#xff1a; LLM 架構專欄 1、LLM大模型架構專欄|| 從NLP基礎談起 2、 LLM大模型架構專欄|| 自然語言處理&#xff08;NLP&#xff09;之建模 3、 LLM大模型架構之詞嵌入&#xff08;Part1&#xff09; 3、 LLM…
閱讀更多...
SP導入智能材質球

SP導入智能材質球

智能材質球路徑 ...\Adobe Substance 3D Painter\resources\starter_assets\smart-materials 放入之后就會自動刷新
閱讀更多...
網絡原理----TCP/IP（3）

網絡原理----TCP/IP（3）

核心機制七----延時應答 默認情況下&#xff0c;接收方都是在收到數據報的第一時間&#xff0c;就返回ack&#xff0c;但是可以通過延時返回ack的方式來提高效率&#xff0c;理論上不是100%提高效率&#xff0c;但還是有一定幫助的。 因為如果接收數據的主機?刻返回ACK應答,…
閱讀更多...
MacBook Pro使用FFmpeg捕獲攝像頭與麥克風推流音視頻

MacBook Pro使用FFmpeg捕獲攝像頭與麥克風推流音視頻

FFmpeg查看macos系統音視頻設備列表 ffmpeg -f avfoundation -list_devices true -i "" 使用攝像頭及麥克風同時推送音頻及視頻流: ffmpeg -f avfoundation -pixel_format yuyv422 -framerate 30 -i "0:1" -c:v libx264 -preset ultrafast -b:v 1000k -…
閱讀更多...
部署Joplin私有云服務器postgres版-docker compose

部署Joplin私有云服務器postgres版-docker compose

我曾經使用過一段時間 Joplin&#xff0c;官方版本是收費的&#xff0c;而我更傾向于將數據掌握在自己手中。因此&#xff0c;在多次權衡后&#xff0c;我決定自己搭建 Joplin 服務器并進行嘗試。 個人搭建的版本與數據庫直連&#xff0c;下面是使用 Docker Compose 配置數據庫…
閱讀更多...
SQL的select語句完整的執行順序

SQL的select語句完整的執行順序

SQL的SELECT語句的執行順序可以用"做菜流程"來類比理解。雖然我們寫SQL時按SELECT…FROM…WHERE…順序寫&#xff0c;但數據庫執行順序完全不同。以下是通俗易懂的講解&#xff08;附流程圖和示例&#xff09;&#xff1a; &#x1f527; 執行順序流程圖&#xff1a…
閱讀更多...
Spring Cloud LoadBalancer詳解

Spring Cloud LoadBalancer詳解

一、介紹 Spring Cloud LoadBalancer是Spring Cloud官方自己提供的客戶端負載均衡器,抽象和實現，用來替代Ribbon（已經停更）， 二、Ribbon和Loadbalance 對比 組件組件提供的負載策略支持負載的客戶端Ribbon隨機 RandomRule輪詢 RoundRobinRule 重試 RetryRule最低并發 Bes…
閱讀更多...
ubuntu中ollama設置記錄

ubuntu中ollama設置記錄

自己同一臺電腦主機安裝3080和3090顯卡&#xff0c;測試發現ollama只默認跑在3090上&#xff1b;故查看一下設置&#xff0c;成功也把3080也運行起來了。 原因如下&#xff1a; 開始設置記錄&#xff1a; Environment Variables: OLLAMA_DEBUG 作用&#xff1a;顯示額外的調試…
閱讀更多...
RabbitMQ系列（四）基本概念之Exchange

RabbitMQ系列（四）基本概念之Exchange

在 RabbitMQ 中&#xff0c;Exchange&#xff08;交換機&#xff09; 是消息路由的核心組件&#xff0c;負責根據規則將生產者發送的消息分發到對應的隊列&#xff08;Queue&#xff09;中。以下是其核心功能與分類的詳細說明&#xff1a; 一、Exchange 的核心作用 消息路由樞…
閱讀更多...
有沒有什么免費的AI工具可以幫忙做簡單的ppt？

有沒有什么免費的AI工具可以幫忙做簡單的ppt？

互聯網各領域資料分享專區(不定期更新)： Sheet 正文 1. 博思AIPPT 特點：專為中文用戶設計，支持文本/文件導入生成PPT，內置海量模板和智能排版功能，涵蓋商務、教育等多種場景。可一鍵優化布局、配色，并集成AI繪圖功能（文生圖/圖生圖）。適用場景：職場匯報、教育培訓、商…
閱讀更多...
【Python · PyTorch】循環神經網絡 RNN（基礎應用）

【Python · PyTorch】循環神經網絡 RNN（基礎應用）

【Python PyTorch】循環神經網絡 RNN&#xff08;簡單應用&#xff09; 1. 簡介2. 模擬客流預測&#xff08;數據集轉化Tensor&#xff09;3.1 數據集介紹3.2 訓練過程 3. 模擬股票預測&#xff08;DataLoader加載數據集&#xff09;3.1 IBM 數據集3.1.2 數據集介紹3.1.3 訓練…
閱讀更多...
【JSON2WEB】15 銀河麒麟操作系統下部署JSON2WEB

【JSON2WEB】15 銀河麒麟操作系統下部署JSON2WEB

【JSON2WEB】系列目錄 【JSON2WEB】01 WEB管理信息系統架構設計 【JSON2WEB】02 JSON2WEB初步UI設計 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代碼前端框架介紹 【JSON2WEB】05 前端開發三件套 HTML CSS JavaScript 速成 【JSON2WEB】06 JSO…
閱讀更多...
地基簡識Spring MVC 組件

地基簡識Spring MVC 組件

Spring MVC 是一個基于 MVC 設計模式的框架&#xff0c;其核心組件協同工作以處理 HTTP 請求并生成響應。以下是各組件的詳細說明及其協作流程&#xff1a; 一、?核心組件 ?DispatcherServlet&#xff08;前端控制器&#xff09;? ?作用&#xff1a;接收所有請求并協調其他…
閱讀更多...
Spring Boot（七）：Swagger 接口文檔

Spring Boot（七）：Swagger 接口文檔

1. Swagger 簡介 1.1 Swagger 是什么&#xff1f; Swagger 是一款 RESTful 風格的接口文檔在線自動生成 功能測試功能軟件。Swagger 是一個規范和完整的框架&#xff0c;用于生成、描述、調用和可視化 RESTful 風格的 Web 服務。目標是使客戶端和文件系統作為服務器以同樣的…
閱讀更多...
cursor 彈出在簽出前，請清理倉庫工作樹 窗口

cursor 彈出在簽出前，請清理倉庫工作樹 窗口

問題出現的背景&#xff1a;是因為我有兩臺電腦開發&#xff0c;提交后&#xff0c;另一個電腦的代碼是舊的&#xff0c;這個時候我想拉取最新的代碼&#xff0c;就會出現如下彈窗&#xff0c;因為這個代碼暫存區有記錄或者工作區有代碼的修改&#xff0c;所以有沖突&#xff0…
閱讀更多...
最新文章

Copyright @ 2022~2023