前端學習(七) 網頁分析

2021-09-27 02:38:20 字數 1980 閱讀 6423

學完了html的相關簡單的,入門級別的標籤之後,接下來我們就針對比較主流的網頁

進行一下網頁的結構分析,也就是分析一下它的骨架

那這麼長的網頁我們應該從頭分析

綠色部分:這個是上部分的導航欄,可以稱為副的導航欄

​ 當我們把滑鼠放在上面的時候,就變成了乙個小手圖示,說明文字使用a標籤寫的

紅色部分:這個是真的導航欄,一般認為有logo的那一行,是導航欄

​ 當我們把滑鼠放在上面的時候,就變成了乙個小手圖示,說明文字使用a標籤寫的

藍色部分:其實是到頁面的最低端,大約在這個位置,這一部分的都是網頁的內容部分

所以也就可以看出來,乙個網頁大概分為:導航欄,網頁主體,網頁資訊這三部分,就像頭身腳一樣!

京東和**的**劃分結構自己去練習好吧

他來了!他來了!他帶著div走來了!還記得div是幹什麼的吧,是不是對網頁進行劃分的啊

那我們現在拿出這部分仔細研究:

可以看出來分出了粉色和黃色兩大部分,在黃色部分又分出了綠色和紅色部分

left 12個鏈結 a

right 1個鏈結 a

right 1個鏈結 a

接著分析:

可見這裡分了三個部分:

lift logo

鏈結 a+img

mid 9個鏈結 a

right 搜尋

from表單

input

大概就是這樣的吧

那這個跟div有什麼關係呢???看好啊!接下來是偽**時間!

副導航

left 12個鏈結 a

right 1個鏈結 a

right 3個鏈結 a

主導航lift logo

鏈結 a+img

mid 9個鏈結 a

right 搜尋

from表單

input

網頁主體

網頁腳部

left 12個鏈結 a

right 1個鏈結 a

right 3個鏈結 a

lift logo

鏈結 a+img

mid 9個鏈結 a

right 搜尋

from表單

input

能跟上???那繼續!

最後我們加點細節:

小公尺**

miui

iot雲服務

金融有品

小愛開放平台

企業**

資質證照

協議規則

select location

登入註冊訊息通知

購物車小公尺手機

redmi 紅公尺

電視筆記本

家電路由器

智慧型硬體

服務社群

有的同學可能要說,這排版不對啊,不在一行啊~

這不好看啊!這啥的背景顏色呢?

放心,到學習位置布局和css的時候,這些問題迎刃而解!

看,前端就是這麼簡單!

自己試試來一下京東和**啊!

*****

*****

2015 2016網頁設計趨勢分析

接觸網頁設計也有5個年頭了,我也只是剛出頭的菜鳥,我很努力,我愛走彎路,我不在乎圈子是個什麼,跟著自己的夢想走。接觸過遊戲網頁,酷炫動感的,flash的,html5的,svg的,扁平化的,win8風格的,擬物場景的,oh,no,不是單純接觸,應該是這些型別都做過,作品雜七雜八,但是也一路跟著自己的夢...

11網頁前端CSS CSS顏色屬性

一 color顏色屬性 1 hsl顏色 通過色調 h 飽和度 s 亮度 l 三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色。h hue色調 0 或360 表示紅色,120表示綠色,240表示藍色,也可以取其他數值來指定。s saturation飽和度 取值為0.0 100.0 l li...

《Redis實戰》一2 5 網頁分析

可以從使用者的訪問 互動和購買行為中收集到有價值的資訊。例如,如果我們只想關注那些瀏覽量最高的頁面,那麼我們可以嘗試修改頁面的格局 配色甚至是頁面上展示的其他鏈結。每乙個修改嘗試都能改變使用者對乙個頁面或者後續頁面的體驗,或好或壞,甚至還能影響使用者的購買行為。前面的2.1節和2.2節中介紹了如何記...