您現在的位置是：首頁 > 綜合

網頁各區域div的常見類名

由石問新發表于綜合
2021-12-17

類名網頁 div 區域 banner

簡介比如以新浪網這個網站的首頁為例，下圖就是它的網頁頭部，頭部又包含了logo區域、功能區域、導航條區域：頭部區域按照結構劃分，簡單的寫程式碼如下：新浪網功能區的類名，可以用tool這個單詞表示，當然你用別的英文單詞也可以

頁尾區是什麼

div標籤的常見類名

div是劃分網頁結構和區域的“盒子”，為了方便對每一個“盒子”進行修飾，往往需要給div取一個類名。類名是為css服務的。

對於一個網站的首頁來說，一般會由頁頭、logo（網頁的圖示）、導航條、橫幅、內容區域、頁尾等幾個大的部分組成。每一個部分都會用div去分割開來，劃分每一個部分的div，通常給他們各自取的類名如下：

每個標籤都擁有class屬性，類名是賦值給標籤的class屬性的。在寫標籤的class屬性時，class和標籤的最後一個字母之間打一個空格，屬性之間也打一個空格。

比如以新浪網這個網站的首頁為例，下圖就是它的網頁頭部，頭部又包含了logo區域、功能區域、導航條區域：

頭部區域按照結構劃分，簡單的寫程式碼如下：

<！—— 頁面頭部 ——><！—— 網頁的logo ——>

新浪網

<！—— 網頁頭部的功能區 ——>

<！—— 網頁的導航條 ——>

功能區的類名，可以用tool這個單詞表示，當然你用別的英文單詞也可以。

注意：類名最好是有意義的英文單詞

。不要隨便取類名，比如上面網頁頭部功能區的類名，你取個abc也可以，但是

這樣寫，非常不利於自己和別人閱讀程式碼，本來類名就相當於一個div盒子的名字，能夠很直觀的表示出這個盒子劃分的區域是幹什麼的，你寫個tool，別人一看，大概就知道這是一個工具、功能的區域，你寫個abc，別人就不知道還得猜。

所以，在寫程式碼時，類名、變數名等，取有意義的英文單詞是程式碼規範的表現。如果你隨便取名，不但不利於別人閱讀和維護，而且讓人覺得你程式碼很low。

越是大公司，越注重程式碼規範。

不同的網站，網頁的結構佈局會有差別，有的網頁，橫幅區域，也可以叫banner區域，是放在導航條之前的，有的是放在導航條之後的，你可以把banner區域也看做是網頁的頭部裡面的一部分，也可以把它看做單獨的一部分。你如何劃分網頁的各個部分，都是很自由的，取決於你自己。

比如騰訊影片，長這樣：

如果你把banner劃分到網頁頭部，那就把banner區域的div放到header區域的div中，否則你就可以放到外面，讓banner和header成為“兄弟”。都是可以的。

如果把banner單獨作為一個區域，那麼網頁的結構就可以這樣寫：

<！—— 頁面頭部 ——><！—— 網頁的logo ——>

騰訊影片

<！—— 網頁頭部的功能區 ——>

<！—— 網頁的導航條 ——>

<！—— 網頁的banner ——>

<！—— 網頁的主要內容 ——>

<！—— 網頁的頁尾 ——><！—— 友情連結 ——>

<！—— 聯絡方式 ——>

<！—— 聯絡方式 ——>

當然，以上只是一個網頁大概的結構，裡面具體的更多的小區域和細節的劃分，也是同樣的思路。

關注我，入門網際網路行業

上一篇：金剷剷之戰傳奇盃：3星隱娘雙大秒後排，雲牛飛碟奪冠

下一篇：問一下，電吉他的技巧到底有多少種？

相關文章

Top