下文分享黑馬程序員小兔仙項(xiàng)目項(xiàng)目前置樣式+項(xiàng)目搭建；（本文內(nèi)容過長，可以復(fù)制粘貼到自己的筆記本學(xué)習(xí)！）

先來看看項(xiàng)目介紹：黑馬程序員小兔仙" />

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

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 新手想自己制作網(wǎng)站應(yīng)該從哪里開始著手？

新手想自己制作網(wǎng)站應(yīng)該從哪里開始著手？

時(shí)間：2024-02-06 13:55:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2024-02-06 13:55:01 來源：網(wǎng)站運(yùn)營

新手想自己制作網(wǎng)站應(yīng)該從哪里開始著手？：很簡單，會HTML+CSS就可以開始制作網(wǎng)站了！

下文分享黑馬程序員小兔仙項(xiàng)目項(xiàng)目前置樣式+項(xiàng)目搭建；（本文內(nèi)容過長，可以復(fù)制粘貼到自己的筆記本學(xué)習(xí)?。?br>

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

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

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

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

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

?。。。澲攸c(diǎn)?。。。?！

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

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

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

一、CSS樣式補(bǔ)充

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

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

1.1 精靈圖

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

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

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

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

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

1.2 精靈圖的使用步驟

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

1.3 小結(jié)

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

二、背景圖片大小

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

語法：background-size：寬度 高度；

取值

background-size：寬度 高度；

2.1 background 連寫拓展

完整連寫：

注意點(diǎn)：

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

解決

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

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

三、文字陰影

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

屬性名：text-shadow

取值：

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

四、盒子陰影

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

屬性名：box-shadow

取值：

五、過渡

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

屬性名：transition

常見取值：

注意點(diǎn)：

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

transition屬性給需要過渡的元素本身加

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

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

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

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

  1. 網(wǎng)頁與網(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)頁：相當(dāng)于每頁紙

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

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

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

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

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

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

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

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

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

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

7.1 DOCTYPE文檔說明

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

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

7.2 網(wǎng)頁語言

識 網(wǎng)頁 使用的 語言

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

常見語言：zh-CN 簡體中文 / en 英文

7.3 字符編碼（了解）

識 網(wǎng)頁 使用的字符編碼

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

常見字符編碼：

八、SEO簡介

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

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

提升SEO的常見方法：

8.1 SEO三大標(biāo)簽

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

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

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

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

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

標(biāo)簽：

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

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

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

常見代碼：

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

十、版心

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

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

代碼：

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

（拓展補(bǔ)充） CSS書寫順序

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

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

注意點(diǎn)：開發(fā)中推薦多用類+后代，但不是層級越多越好，一個(gè)選擇器中的類選擇器的個(gè)數(shù)推薦不要超過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中打開

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ǔ)公共樣式

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

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

要求：

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

十三、index頁面骨架

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

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

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

移動開發(fā)筆記（更新中）

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

JavaScript最全拔高（更新中）

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

前端簡易版路線圖以及課程資源：

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

關(guān)鍵詞：著手,新手

74
73
25
news

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

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