只要學(xué)會(huì)了HTML+CSS的內(nèi)容，就可以做一個(gè)綜合項(xiàng)目了。下文分享黑馬程序員小兔仙項(xiàng)目項(xiàng)目前置樣式+項(xiàng)目搭建；（本文內(nèi)容過(guò)長(zhǎng)，可以復(fù)制粘貼到自己的筆記本學(xué)" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 適合前端小白模仿的網(wǎng)站有哪些?

適合前端小白模仿的網(wǎng)站有哪些?

時(shí)間：2023-10-24 05:00:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-24 05:00:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

適合前端小白模仿的網(wǎng)站有哪些?：不要京東小米這類的，我們來(lái)點(diǎn)新的~

只要學(xué)會(huì)了HTML+CSS的內(nèi)容，就可以做一個(gè)綜合項(xiàng)目了。下文分享黑馬程序員小兔仙項(xiàng)目項(xiàng)目前置樣式+項(xiàng)目搭建；（本文內(nèi)容過(guò)長(zhǎng)，可以復(fù)制粘貼到自己的筆記本學(xué)習(xí)！）

先來(lái)看看項(xiàng)目介紹：

黑馬程序員小兔仙項(xiàng)目是基于Vue3.0 的Composition API 的高級(jí)前端項(xiàng)目課程。

大家可以在線體驗(yàn)：小兔鮮兒 - 新鮮 惠民 快捷！

電商行業(yè)，功能數(shù)量10個(gè)，頁(yè)面數(shù)量12個(gè)，接口數(shù)量100；解決方案17；完整的教學(xué)課程實(shí)際上是15天的。

看到這里不要擔(dān)心，我們可以只掌握HTML+CSS后，來(lái)使用的專業(yè)方式完成 項(xiàng)目結(jié)構(gòu)搭建 和 基礎(chǔ)公共樣式 。

?。。?！劃重點(diǎn)?。。。?！

本文內(nèi)分享的內(nèi)容圍繞著學(xué)習(xí)一個(gè)項(xiàng)目的邏輯順序，能夠用專業(yè)的方式完成項(xiàng)目結(jié)構(gòu)的搭建和基礎(chǔ)公共樣式！具體的實(shí)現(xiàn)內(nèi)容較少，如果你們需要請(qǐng)?jiān)u論。我會(huì)追更后面的Header、Footer等等面板部分的開(kāi)發(fā)內(nèi)容！
看課程戳這里：web前端零基礎(chǔ)html5 +css3+前端項(xiàng)目視頻教程

先來(lái)看看學(xué)習(xí)目標(biāo)

  1. 能夠在網(wǎng)頁(yè)中使用 精靈圖
  2. 能夠使用 背景大小屬性 ，設(shè)置背景圖片的大小
  3. 能夠認(rèn)識(shí) CSS書(shū)寫(xiě)順序，提高代碼專業(yè)性和瀏覽器渲染性能
  4. 能夠使用的專業(yè)方式完成 項(xiàng)目結(jié)構(gòu)搭建 和 基礎(chǔ)公共樣式
  5. 能夠應(yīng)用已學(xué)技術(shù)知識(shí) 完成小兔鮮兒項(xiàng)目

一、CSS樣式補(bǔ)充

目標(biāo)：能夠使用精靈圖，給元素添加陰影效果，能夠讓元素完成過(guò)渡效果。

學(xué)習(xí)路徑：

1.1 精靈圖

場(chǎng)景：項(xiàng)目中將多張小圖片，合并成一張大圖片，這張大圖片稱之為精靈圖

優(yōu)點(diǎn)：減少服務(wù)器發(fā)送次數(shù)，減輕服務(wù)器的壓力，提高頁(yè)面加載速度

例如：需要在網(wǎng)頁(yè)中展示8張小圖片

? 8張小圖片分別發(fā)送 → 發(fā)送8次 ? 合成一張精靈圖發(fā)送 → 發(fā)送1次

總結(jié)：精靈圖的有點(diǎn)是：減少服務(wù)器發(fā)送次數(shù)，減輕服務(wù)器的壓力，提高頁(yè)面的加載速度。

1.2 精靈圖的使用步驟

  1. 創(chuàng)建一個(gè)盒子
  2. 通過(guò)PxCook量取小圖片大小，將小圖片的寬高設(shè)置給盒子
  3. 將精靈圖設(shè)置為盒子的背景圖片
  4. 通過(guò)PxCook測(cè)量小圖片左上角坐標(biāo)，分別取負(fù)值設(shè)置給盒子的background-position：x y

1.3 小結(jié)

? 使用精靈圖的步驟是什么？

二、背景圖片大小

作用：設(shè)置背景圖片的大小，

語(yǔ)法：background-size：寬度 高度；

取值

background-size：寬度 高度；

2.1 background 連寫(xiě)拓展

完整連寫(xiě)：

注意點(diǎn)：

background-size和background連寫(xiě)同時(shí)設(shè)置時(shí)，需要注意覆蓋問(wèn)題

解決

1. 要么單獨(dú)的樣式寫(xiě)連寫(xiě)的下面

2. 要么單獨(dú)的樣式寫(xiě)在連寫(xiě)的里面

三、文字陰影

作用：給文字添加陰影效果，吸引用戶注意

屬性名：text-shadow

取值：

拓展：陰影可以疊加設(shè)置，每組陰影取值之間以逗號(hào)隔開(kāi)

四、盒子陰影

作用：給盒子添加陰影效果，吸引用戶注意，體現(xiàn)頁(yè)面的制作細(xì)節(jié)

屬性名：box-shadow

取值：

五、過(guò)渡

作用：讓元素的樣式慢慢的變化，常配合hover使用，增強(qiáng)網(wǎng)頁(yè)交互體驗(yàn)

屬性名：transition

常見(jiàn)取值：

注意點(diǎn)：

過(guò)渡需要：默認(rèn)狀態(tài)和hover狀態(tài)樣式不同，才能有過(guò)渡效果

transition屬性給需要過(guò)渡的元素本身加

transition屬性設(shè)置在不同狀態(tài)中，效果不同的 給默認(rèn)狀態(tài)設(shè)置，鼠標(biāo)移入移出都有過(guò)渡效果 給hover狀態(tài)設(shè)置，鼠標(biāo)移入有過(guò)渡效果，移出沒(méi)有過(guò)渡效果

六、項(xiàng)目前置認(rèn)知

目標(biāo)：能夠知道SEO三大標(biāo)簽，能夠設(shè)置網(wǎng)頁(yè)的ico圖標(biāo)，能夠書(shū)寫(xiě)版心公共類代碼

學(xué)習(xí)途徑：

  1. 網(wǎng)頁(yè)與網(wǎng)站的關(guān)系
  2. 骨架結(jié)構(gòu)標(biāo)簽
  3. SEO三大標(biāo)簽 ico圖標(biāo)設(shè)置
  4. 版心

6.1 生活當(dāng)中的例子

網(wǎng)頁(yè)：相當(dāng)于每頁(yè)紙

網(wǎng)站：相當(dāng)于一本書(shū)籍 -用戶翻閱的時(shí)候，看的是每頁(yè)紙上的內(nèi)容 -由多頁(yè)紙整合在一起，就是完整的一本書(shū)籍了

6.2 網(wǎng)頁(yè)與網(wǎng)站的關(guān)系

在互聯(lián)網(wǎng)中，網(wǎng)站類似于是一本書(shū)，網(wǎng)頁(yè)就是這本書(shū)的每一頁(yè)

比如：淘寶、京東、黑馬程序員等就是一個(gè)網(wǎng)站，類似于是一本書(shū)

這些網(wǎng)站中的每一個(gè)網(wǎng)頁(yè)，如：主頁(yè)、登錄頁(yè)面、商品頁(yè)面就是每一個(gè)單獨(dú)的頁(yè)面，類似于每一頁(yè)紙

多個(gè)同主題網(wǎng)頁(yè)整合在一起，就稱之為網(wǎng)站

6.3 網(wǎng)頁(yè)與網(wǎng)站的概念

網(wǎng)頁(yè)：網(wǎng)站中的每一“頁(yè)” 。例如：淘寶的主頁(yè)、淘寶的登錄頁(yè)、淘寶的商品頁(yè)等

網(wǎng)站：提供特定服務(wù)的一組網(wǎng)頁(yè)集合。例如：百度、淘寶、京東、黑馬程序員等；

七、骨架結(jié)構(gòu)標(biāo)簽

7.1 DOCTYPE文檔說(shuō)明

<!DOCTYPE html>文檔類型聲明，告訴瀏覽器該網(wǎng)頁(yè)的 HTML版本

注意點(diǎn)：DOCTYPE需要寫(xiě)在頁(yè)面的第一行，不屬于HTML標(biāo)簽

7.2 網(wǎng)頁(yè)語(yǔ)言

識(shí) 網(wǎng)頁(yè) 使用的 語(yǔ)言

作用：搜索引擎歸類 + 瀏覽器翻譯

常見(jiàn)語(yǔ)言：zh-CN 簡(jiǎn)體中文 / en 英文

7.3 字符編碼（了解）

識(shí) 網(wǎng)頁(yè) 使用的字符編碼

作用：保存和打開(kāi)的字符編碼需要統(tǒng)一設(shè)置，否則可能會(huì)出現(xiàn) 亂碼

常見(jiàn)字符編碼：

八、SEO簡(jiǎn)介

SEO（Search Engine Optimization）：搜索引擎優(yōu)化

作用：讓網(wǎng)站在搜索引擎上的排名靠前

提升SEO的常見(jiàn)方法：

8.1 SEO三大標(biāo)簽

title：網(wǎng)頁(yè)標(biāo)題標(biāo)簽

description：網(wǎng)頁(yè)描述標(biāo)簽

keywords：網(wǎng)頁(yè)關(guān)鍵詞標(biāo)簽

（拓展補(bǔ)充） 有語(yǔ)義的布局標(biāo)簽

場(chǎng)景：在HTML5新版本中，推出了一些有語(yǔ)義的布局標(biāo)簽，可以增強(qiáng)網(wǎng)頁(yè)的語(yǔ)義化

標(biāo)簽：

注意點(diǎn)：以上標(biāo)簽顯示特點(diǎn)和div一致，但是比div多了不同的語(yǔ)義

九、ico圖標(biāo)設(shè)置

場(chǎng)景：顯示在標(biāo)簽頁(yè)標(biāo)題左側(cè)的小圖標(biāo)，習(xí)慣使用.ico格式的圖標(biāo)

常見(jiàn)代碼：

給網(wǎng)頁(yè)設(shè)置ico圖標(biāo)需要使用什么標(biāo)簽？

十、版心

場(chǎng)景：把頁(yè)面的主體內(nèi)容約束在網(wǎng)頁(yè)中間

作用：讓不同大小的屏幕都能看到頁(yè)面的主體內(nèi)容

代碼：

注意點(diǎn)：版心類名常用：container、wrapper、w 等

（拓展補(bǔ)充） CSS書(shū)寫(xiě)順序

衡量程序員的能力，除了要看實(shí)現(xiàn)業(yè)務(wù)需求的能力，還要看平時(shí)書(shū)寫(xiě)代碼的規(guī)范（專業(yè)性）

不同的CSS書(shū)寫(xiě)順序會(huì)影響瀏覽器的渲染性能，推薦前端工程師使用專業(yè)的書(shū)寫(xiě)順序習(xí)慣

注意點(diǎn)：開(kāi)發(fā)中推薦多用類+后代，但不是層級(jí)越多越好，一個(gè)選擇器中的類選擇器的個(gè)數(shù)推薦不要超過(guò)3個(gè)。

十一、項(xiàng)目結(jié)構(gòu)搭建

目標(biāo)：能夠使用專業(yè)方式完成 項(xiàng)目結(jié)構(gòu)搭建 和 基礎(chǔ)公共樣式

學(xué)習(xí)路徑：

11.1 文件和目錄準(zhǔn)備

1. 新建項(xiàng)目文件夾 xtx-pc-client，在VScode中打開(kāi)

2. 復(fù)制 favicon.ico 到 xtx-pc-client 目錄

? 一般習(xí)慣將ico圖標(biāo)放在項(xiàng)目根目錄

3. 復(fù)制 images 和 uploads 目錄到 xtx-pc-client 目錄中

4. 新建 index.html 在根目錄

5. 新建 css 文件夾保存網(wǎng)站的樣式，并新建以下CSS文件：

11.2 完成后的目錄以及文件結(jié)構(gòu)

十二、基礎(chǔ)公共樣式

場(chǎng)景：一般項(xiàng)目開(kāi)始前，首先會(huì) 去除掉瀏覽器默認(rèn)樣式，設(shè)置為 當(dāng)前項(xiàng)目需要的初始化樣式

作用：防止不同瀏覽器中標(biāo)簽?zāi)J(rèn)樣式不同的影響，統(tǒng)一不同瀏覽器的默認(rèn)顯示效果，方便后續(xù)項(xiàng)目開(kāi)發(fā)

要求：

已經(jīng)準(zhǔn)備好base.css代碼，同學(xué)們需要認(rèn)識(shí)，項(xiàng)目中可以直接引入使用

十三、index頁(yè)面骨架

不知道有沒(méi)有人耐心看到最后了，如果你們看到最后覺(jué)得自己可以的話，還想繼續(xù)深入學(xué)習(xí)后面內(nèi)容的話，請(qǐng)?jiān)u論。我會(huì)追更，如果大家覺(jué)得自己還不能獨(dú)立完成項(xiàng)目的話，先把前面該學(xué)習(xí)的內(nèi)容補(bǔ)上！

更多HTML+CSS學(xué)習(xí)筆記如下（已完結(jié)）：

HTML+CSS項(xiàng)目《品優(yōu)購(gòu)》完整筆記+源碼（萬(wàn)字版可復(fù)制）：

移動(dòng)開(kāi)發(fā)筆記（更新中）

JavaScript基礎(chǔ)筆記更新中：

JavaScript最全拔高（更新中）

JavaScript面向?qū)ο箝_(kāi)發(fā)相關(guān)模式 / JavaScript創(chuàng)建對(duì)象簡(jiǎn)單方式到優(yōu)化 / JavaScript面向?qū)ο笥螒虬咐贺澇陨?br>

前端簡(jiǎn)易版路線圖以及課程資源：

HTML+CSS-->移動(dòng)web->JavaScript基礎(chǔ)-->Web APIs->數(shù)據(jù)交互&異步編程-->Node.js-->Vue2+Vue3-->React核心技術(shù)-->微信小程序

如果大家覺(jué)得以上內(nèi)容有用，希望你們動(dòng)動(dòng)小手支持黑馬程序員前端學(xué)科。并且有任何學(xué)習(xí)前端的問(wèn)題都可以聯(lián)系我們，免費(fèi)答疑，有問(wèn)必答！

關(guān)鍵詞：模仿,適合

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉