簡介在線黑色響應式全屏滾動主頁HTML源碼是一套可直接運行的整站主頁模板適合前端學習者、UI設計師及需要快速產出落地頁的開發(fā)者。源碼基于響應式設計思路利用媒體查詢適配桌面、平板與手機結合全屏滾動效果呈現黑色主題的品牌頁面包內共37個文件以HTML、CSS、JavaScript為核心輔以圖片、字體圖標及少量MP4素材整體壓縮包僅2.72MB結構簡潔便于二次修改。已有187人學習下載。解壓后可見首頁與錯誤頁模板、樣式文件、腳本文件及字體與圖片目錄開發(fā)者可依據目錄名快速定位并替換內容調整配色、斷點或滾動動畫適配個人作品集、產品發(fā)布頁等場景。資源體積小巧、依賴少適合作為學習響應式布局和滾動交互的參照樣例也可直接改造成獨立站點的落地頁。1. 項目核心拆解與方案選型先把這個標題拆開看黑色、響應式、全屏滾動、html源碼。這四個詞幾乎是目前個人作品集、產品落地頁、品牌官網里最主流的一套組合拳。黑色打底能讓內容聚焦全屏滾動能給用戶一種“翻頁讀故事”的儀式感響應式則保證你在電腦上做完的東西到手機和平板上不至于垮掉。我最初接觸這類頁面是因為給自己搭作品集當時找了一圈現成模板要么太重、引入一堆用不上的組件要么交互太花哨、光鮮但不好改。后來干脆自己寫慢慢養(yǎng)成了“一切從源碼層面可控”的習慣。這篇就把整個構建過程拆開講從設計語言的確定、交互方案選型到每一塊代碼怎么寫、上線后踩到哪些坑全部過一遍。1.1 黑色風格的設計語言與選色邏輯很多人以為黑色頁面就是把背景設成#000000文字設成白色就完事了。實際做出來往往發(fā)悶、刺眼深色區(qū)域糊成一片根本看不清層級。我做這類頁面時一般不用純黑而是選帶一點灰調的深色比如#0d0d0d、#111111、#1a1a1a這樣能保留暗色氛圍又不會讓屏幕上的黑色死板。文字的對比度也要控制。純白#ffffff在某些深色底上反而刺眼我習慣用#e5e5e5或#f2f2f2作為主文字色次級信息用#888888到#999999。強調色只留一個通常是一抹亮色比如熒光綠、電光藍或者橙色用于按鈕、光標、關鍵數據整個頁面不會超過兩種強調色否則黑色背景的“高級感”瞬間就沒了。字體上標題用較粗的字重或帶幾何感的字體正文保持簡潔的無襯線。由于深色背景下文字的視覺重量不同行高我一般放大到1.6到1.8避免多行文字擠在一起看不清。圖片方面最好統(tǒng)一壓暗處理半透黑色遮罩層是常見做法這樣不管用戶上傳什么圖頁面整體氛圍都不會被破壞。1.2 全屏滾動交互成熟插件還是原生實現全屏滾動最常用的方案是fullPage.js生態(tài)成熟、兼容性處理好基本“開箱即用”。它內部把每一屏設為 100% 視口高度監(jiān)聽滾輪事件并做攔截滾動結束后將頁面定位到目標屏。同時支持錨點導航、左右滑動翻屏、鍵盤方向鍵控制等一個頁面幾分鐘就能搭起來。但插件也有它的代價體積不算小而且默認樣式多改起來要想辦法覆蓋更關鍵的是如果你只需要“豎直全屏翻頁”這一個能力為一個功能引入整個庫反而讓源碼里堆了不少用不到的配置。所以我的做法是先評估需求只有交互簡單、需要快速上線時用插件想深入理解原理、追求極致性能時自己用原生 JS 實現。我在這篇里采用的是“原生實現 少量輔助函數”的路線。核心原理其實不復雜監(jiān)聽滾輪事件在滾動方向確定后計算目標屏的索引再用 CSStransform: translateY(-index * 100%)把容器移到對應位置。核心代碼量很小而且每一行都能看懂后期加動畫、加導航高亮都非常順手。當然純原生方案需要自己處理滾動節(jié)流、邊界判斷、移動端觸摸滑動這也是我后面會重點講的部分。1.3 響應式適配的技術路線響應式不只是“用媒體查詢改幾個樣式”真正的核心是布局結構在任意寬度下都能成立。對全屏滾動頁面來說最大的挑戰(zhàn)是“一屏裝不下的內容”在窄屏上怎么處理。我的策略是桌面端嚴格一屏一頁內容不超過視口高度平板和手機端適當放開高度限制允許某幾屏內容自然撐開并上下滾動。為此我給容器設置的并不是生硬的height: 100vh而是min-height: 100vh這樣既能保證小屏上內容放得下又能在內容不足時撐滿全屏。斷點上我一般設三個檔768px以下按手機端處理769px到1024px按平板端處理1024px以上是桌面端。手機端時全屏滾動的“滾動攔截”也會關掉恢復到普通上下滑動的體驗。為什么這樣設計因為全屏滾動在小屏上很容易誤觸用戶只是想快滑動結果被一屏一屏地攔截體驗很糟糕。移動端優(yōu)先考慮內容的可讀性而不是交互特效。提示CSS 里有個容易踩的坑100vh在 iOS Safari 上會包含地址欄高度導致一屏內容底部被裁剪?，F在更推薦使用100dvh動態(tài)視口單位或者干脆用min-height: 100vh加一個保底的min-height: -webkit-fill-available來兼容。2. 源碼結構設計與關鍵細節(jié)這個項目的源碼組織我把它分成三層HTML 負責內容與語義結構CSS 負責視覺與布局表現JavaScript 負責交互邏輯與狀態(tài)切換。每一層都保持獨立這樣日后維護、加功能、換膚都不用大動干戈。2.1 HTML骨架分屏結構與語義化整個頁面最外層是一個#fullpage容器里面用section標簽分別放每一屏。每屏都帶>div idfullpage section classsection>body { font-family: Inter, PingFang SC, Microsoft YaHei, sans-serif; background: #0d0d0d; color: #e5e5e5; line-height: 1.7; } .section { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; } .section .inner { max-width: 520px; padding: 24px; }2.3 JS邏輯滾動節(jié)流、導航高亮與視口判斷原生實現全屏滾動的核心代碼分三段容器定位、方向判定、導航聯動。容器定位上我給#fullpage設置transform: translateY(-currentIndex * 100%)并為它加上transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1)。為什么用transform而不是top或margin-top因為transform不觸發(fā)重排只觸發(fā)合成動畫性能好很多。方向判定上滾輪事件會連續(xù)觸發(fā)很多次必須做節(jié)流。我采用設置一個isScrolling布爾鎖的方式當滾動事件觸發(fā)且當前未處于動畫狀態(tài)時判斷deltaY的正負來決定上一屏還是下一屏然后立即把isScrolling設為true。在transitionend事件里再解鎖這樣一次動畫過程中后續(xù)的滾動事件都被忽略不會出現連跳兩屏的失控感。導航高亮則用IntersectionObserver。切換時給當前屏設置active狀態(tài)在回調里更新導航對應項的class。這個方案比“監(jiān)聽scroll事件 計算offsetTop”更穩(wěn)定和高效IE 時代的技術已經可以完全替換掉了。let currentIndex 0; let isScrolling false; const slides document.querySelectorAll(.section); const total slides.length; function goTo(index) { if (index 0 || index total || isScrolling) return; currentIndex index; document.getElementById(fullpage).style.transform translateY(- currentIndex * 100 %); isScrolling true; updateNav(); } document.getElementById(fullpage).addEventListener(transitionend, () { isScrolling false; }); window.addEventListener(wheel, (e) { if (Math.abs(e.deltaY) 10) return; e.preventDefault(); if (!isScrolling) { goTo(e.deltaY 0 ? currentIndex 1 : currentIndex - 1); } }, { passive: false });3. 實操過程從零搭一個可運行的版本理論說完了直接進入實戰(zhàn)。我按實際開發(fā)順序走一遍初始化項目、寫內容結構、調樣式、處理交互、最后做響應式和真機驗證。全程只依賴一個文本編輯器和瀏覽器不引入框架方便你直接復現。3.1 初始化項目與引入依賴新建一個文件夾在里面建三個文件index.html、style.css、main.js再建一個assets目錄放圖片。這個階段不需要構建工具、不需要 npm普通的靜態(tài)頁面就夠了。如果你后續(xù)要部署直接把這三個文件丟到任意服務器或靜態(tài)托管平臺即可。如果追求極端精簡可以把 CSS 和 JS 直接寫進 HTML 里但拆成獨立文件更利于維護尤其是全屏滾動頁面結構本身不復雜文件一多反而礙事。另外我習慣在head里補上meta描述、og標簽和favicon這對上線后的預覽分享和 SEO 都有幫助。!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 meta namedescription content黑色響應式全屏滾動主頁示例 title黑色全屏滾動主頁/title link relstylesheet hrefstyle.css /head body !-- 內容結構在下一節(jié)寫入 -- script srcmain.js/script /body /html3.2 分屏內容編寫與樣式調試頁面的分屏內容要提前規(guī)劃好我一般遵循“首頁引導 → 能力/作品 → 過程/理念 → 聯系”的邏輯。每屏內容不要貪多標題、說明、一個按鈕就夠再多就會超出視口。在寫 HTML 時我特意給每屏添加了aria-label方便讀屏用戶區(qū)分。標題層級上第一屏用h1后面的屏用h2不要每個屏都用h1這對 SEO 和結構清晰度都是減分項。按鈕我統(tǒng)一用a而不是button因為從語義上講它是引導用戶到下一個區(qū)塊的鏈接而不是表單提交。樣式調試時先把所有屏的background設成帶透明度的底色如rgba(255,255,255,0.02)用來區(qū)分邊界。確認每一屏的 flex 居中生效后再去掉調試色加最終背景。這個過程很笨但不容易漏看問題。section classsection style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />