豪情-CSS解構系列之-新浪頁面解構-01

時間 2019-11-06

標籤豪情 css 解構系列新浪頁面欄目 CSS 简体版

原文原文鏈接

目錄：css

文章背景：這是一次內部交流會的PPT，經過文字的方式記錄下來，分享給更多的同窗，同時也因爲我的能力水平還有很大的成長空間，也想借此機會再深化學習一下，因此這事利人利已，千秋萬代。因爲我的知識範圍有限，不免有遺漏或不當之處，歡迎拍磚。這次交流會作了一些新的創新或嘗試，咱們嘗試從最簡單的基礎來彌補其它交流會的缺陷，主張以興趣爲導向，以實戰來學習，以交流來成長，以你們共同參與互動的方式，讓前端入門學習進階提升更爲便捷或有趣，主張適當的方法大於過分的時間投入。並且以一個完整系列的形式，完成前端從淺到深，從入門到進階的這樣一個學習過程，在必定程度上綁定了交流人員的粘合度。html

至因此選擇新浪，除了如下羅列的幾個特色以外，最重要的是css前端的學習都須要有一個量或質的變化的過程，而新浪剛好是這方面的一個特例、表明或巔峯，頁面很長，數據量最多，版式又較爲簡單，絕不誇張的說，只要瞭解新浪的這種種玩法，之後相似的基本都沒有困難。並且前端雖然沒啥技術含量，但比較難控制，不少人都玩很差。因此我推薦這種「倒序法」，倒着學習的思路，可以迅速的抽絲剝繭，很快的把握問題的核心關鍵點，而後投入精力去攻克，這樣學習起來可能更容易一些。前端

先去看看新浪這個通過歷史或數據洗禮的網站，而後學習着重構一遍，達到：認識代碼，熟悉代碼，瞭解代碼，組織代碼，最後達到控制代碼。一個巨大的靜態頁面的控制也是須要技巧或經驗來支撐的。下面的分享就此思路逐漸展開。而後咱們的分享側重於，經驗思路，像一些技術的細節，可能不怎麼關注，爲了上下文的必要，只是略提一下，因此這個分享教程並非最全面的，有些東西仍是須要本身去掌握。css3

其實縱觀當前前端的趨勢，每一個行業或業務特色比較明顯的頁面類型的都有一個頂尖數據量比較大的業界表明衝在前面，後面的同窗在慢慢的靠近。好比新聞類是：新浪，騰訊，網易，搜狐；電商類：淘寶，京東，天貓，噹噹，亞馬遜，易迅；還有其它通訊類，醫藥類，金融類，政府類，飲食類，訂餐服務類，旅遊類，機票預訂類，還有其它銀行，汽車，二手車，房產，社區，交友，娛樂，軍事，體育，遊戲，文學，視頻等等。
對於分類我在下面這篇文章中也早有羅列，有興趣的猛戳。
web前端開發分享-css,js提升篇web

這些類型中電商的贏利能力最爲強悍，雙11是一個永遠沒法超越的高峯，同時頁面交互也較爲複雜，由於行業競爭的激烈性殘酷性，因此各家都頻繁出新招，以此達到爭奪市場的目的。另外兼容要求也比較高，在沒有選擇用戶的前提下，如今不少網站仍是在默默的兼容IE6，不是爲了那份執拗的堅守，只爲爭取這些細小的用戶，以此不放過一絲生存的拼搏機會。不少前端人員在不斷的無力吐槽，卻不明白市場生存的殘酷。先生存，纔會有發展，有發展纔會有機會。同時對安全性的要求也頗高，一方面保證用戶資料的安全，另一方面保證交易的安全。因爲這幾年在開發流程中前端承擔的開發角色愈來愈重，因此有些安全性方面的考慮也要提上日程。
電商類另一個極端是政府類，因爲政府類網站在整個的活動中承擔信息發佈，或重要事件的導向等。整體上仍是比較保守或執拗的策略。具體表如今對高版本瀏覽器支持很差，用戶體驗基本爲零。
圖片類又是另一個方向。由於互聯網的精彩或好玩在於娛樂性的加入，由於娛樂因此圖片成爲必不可少的元素，因此這類網站對頁面交互有很高的要求。表明的：娛樂，體育，專業設計類，遊戲類等，並且遊戲類更強調用大面積的人物或有視覺衝突的遊戲場景來渲染頁面的氣氛，因此在佈局上也有另外的考慮，這在後期咱們慢慢介紹。
其它類型的網站基本都介於這幾者之間，後續會慢慢介紹。

計劃接下來在時間或能力容許的範圍內想從新學習梳理或深刻了解一下這些類型網站佈局的特色或難點，以此來達到我的學習方便他人的目的。固然事情可能沒有咱們想象的那麼悲觀，雖然有上面不少類型的網站。其實按通常的規律，經過一兩個類型的學習，掌握基礎知識或學習的方法以後，剩下就是積累解決問題的經驗或深刻彌補知識密度。咱們的目的不是爲了一個一個的深刻這些海量的網站，而是經過學習這種線上通過大數據洗禮的界面的思路或風格，以此達到前端入門成長的目的。經過平常可見的實例，來跟苦悶的理論知識結合，從而生而動，動而活的學習。我想，這確定是一條不同的成長之路。面試

一. 新浪的佈局特色

目前新浪首頁是新聞門戶類網站中數據量最多，頁面最長，結構最爲中規中矩，佈局嚴謹的經典門戶類網站的表明。
結構雖然很長，可是頗有特色，基本是如下幾種佈局方式的混合體：
- 整體是上中下結構，在這個結構之中，又是川字形三列布局或廣告通欄兩種形式。
- 三列的裏邊，又是圖文混排或文字列表。
經過客觀的分析後發現sina的佈局實現其實挺簡單的，難點都在兼容或重複的編碼勞動上。
其它相似的網站都有一樣的特色，能夠用一樣的方法來學習，而後學習這一個，而後舉一反三，其它的佈局基本沒有問題。

二. 內容細節的特色

頁面總體看起來很複雜，其實無悲是如下幾種結構形式：編程

兩列三列布局。
文字列表。
圖文混排＋文字列表。
Tab選項卡＋文字列表。
廣告通欄。
不規則的任意佈局，如：側欄廣告，右下角回到頂部等。

三. 其中相關的一些基礎技術點

因爲JavaScript是另一個話題，因此咱們此次討論的範圍主要在html,css兩方面，抽絲剝繭，先從簡單入手，後期在探討JavaScript相關問題。
通常html,css兩塊，難點在css上，但大部分兼容問題出錯卻出在html結構上。也就是說，兼容性問題的根本是因爲經驗不足開發者寫的html結構不合理形成的，細節後邊會有介紹。那怎麼樣的佈局纔算是合理的結構？這是咱們此次交流的核心，就是解構新浪的結構，以此來提升本身的佈局能力，主要是提升如何合理佈局的能力。固然，他的佈局不是沒有問題，裏邊的小問題，這將會在後期慢慢披露。形成這些問題的緣由我的猜想多是歷史緣由，也多是版本緣由，無論怎麼說，這毫不是我的致使的。一個bug的成型背後有複雜的緣由，有時間的，也有空間的。後端

1. 常見佈局方法

默認佈局，就是div所有居左的一種無css佈局方式。
Float佈局，說清float，得先了解什麼是塊元素，什麼是內聯元素。float佈局其實就是塊元素，內聯元素的佈局，只是裏邊的規律比較難掌握，過於靈活。
另外頁面上的東西是面性的，所謂面着是點構成線，線構成面，因此面裏邊的東西能夠劃分爲小方塊，這就是塊元素最初的物理參考來源，因爲小方塊是一個完美的形態，爲了咱們佈局的需求，也爲了處理問題的方便，因此抽象拆分爲兩種：塊元素或內聯元素。其實這跟編程語言的數據類型很像，數據類型出現的目的就是方便咱們更好的還原現實世界中的問題模型。瀏覽器
- 塊元素：一種是具有物理世界小方塊的全部特徵，並讓他有更強大的特性，他的寬度是能夠無限延伸，在屏幕上來講，能夠佔據可視區域內的一整行。通常叫「塊元素」。
- 內聯元素：而另一種則是他的相反特徵，不佔據一行，且沒有任何物理特性，就是沒有寬高的屬性，或者就算設置了寬高也是沒有視覺特徵的。通常叫「內聯元素」。
  那float出現的本質是：像內聯元素同樣使用塊元素，對沒錯就是：display:inline-block;但inline-block也有很多問題。
  具體戳：
  1. display:inline-block的深刻理解
  2. display:inline-block的幾個應用及bug
Position佈局:
position的出現是爲了補充float不能解決的一些佈局難題，float佈局的特色是在一個平面內進行有限範圍內的佈局，而position佈局他的幾個屬性基本都不受傳統屬性的約束，大部分都在通常頁面默認的佈局以外，從而使css的靈活性更爲加強。
position總共有這麼多inherit, static, relative, fixed, absolute, initial，sticky(firefox)。
爲何要了解這麼多，並且好幾個貌似不是通用的。一方面是爲了擴充知識面，另一方面爲了應對bt的面試。
CSS position Property
position:sticky介紹安全

另外其它的教程推薦：

2. 佈局要點

面性思惟：不少從後端轉來的同窗感受佈局很難控制，找不到規律。其實這也難怪，由於後端同窗，擅長代碼邏輯能力的處理，對面性的佈局，感受很難接受，太靈活了，改一處有不少處會被關聯，很不容易控制。不像代碼一個變量賦值，處處被使用。而對於設計的同窗，看代碼也是一樣的感受，習慣於面性或視覺的操做，看代碼過於死板，不可以靈活的修改很快的獲得指望的結果。

一個是尚未習慣佈局的面性特色，沒有熟悉或瞭解佈局的要點或核心原理。
另一個是過於急躁，並無一個完整的計劃去了解佈局的入門及進階的計劃。我也遇見過不少後端同窗html,css很是的厲害的同窗，感受他們是找到了其中的規律，可以很好的進行思惟的切換。

疊加實現：另外從技術的角度來講，前端所作的工做，剛好與UI是類似相近的過程。由於UI是分層組合一個成品結果的過程。而前端是利用html，不斷的一圈一圈套起來的過程。由於ps軟件着重於層的功能編輯，好比對單層的處理效果，進而達到影響總體的目的。前端經過單個div的js交互，從而影響總體的效果。基本都是類似相近。

3. Debugger誤區

結構不合理，讓單一div承載更多的樣式
- 因爲ie6等低版本瀏覽器，以如今的眼光來看，對一個特性的解析是比較笨拙或原始的，而現代瀏覽器因爲不斷的升級，已經知足了複雜界面的佈局要求。承載更多的樣式的意思，讓單一個div，即有物理屬性又有表現屬性，又有其它的屬性，因此ie6太懶了，就不想搞了，他本身又很努力，因此就按本身能力範圍內解析，對比原來的指望來講，出錯了。
瀏覽器自己的問題，遵循標準不一致
- 前面提到的，因爲各個廠商要搶佔市場佔有率，在遵循新標準的前提下不斷的去創造新特性，因此到最後的結果，一樣的代碼在每一個瀏覽器都會有細微的差異，咱們將會花費更大的精力來平衡這個差異。
委員會制定標準很混亂
- http://www.techug.com/doc-icesifvw9311249 一個標準的產生，一定會有兩個極端，一個是極學院風格的理論派，一個是極新特性的的實戰派。
編碼問題
- 因爲ie6等低版本瀏覽器，對utf-8的支持仍是不完善，因爲編輯器在代碼轉換的過程當中會有問題，因此會有奇異的bug出現。
編輯器問題
- 跟上面的問題其實差異不大，主要是因爲經驗不足，沒有安裝除ide以外的輕量編輯器，單個文件的修改時沒有啓動相應的軟件，這時候就會使用系統默認的記事本，這時候容易產生bom問題。因此建議除核心的ide以外，必須有一款編輯單個文件的，需求是啓動速度快，編輯方便，能知足基礎的要求。好比editplus,sublimetext，你值得擁有。

4.列表

如下幾種的區別主要在語義化方面，真正呈現的表現形式能夠一致，沒有大的區別。有時候因爲ul,li結構的複雜，我經常使用dl,dd來實現一些差別化的列表。

Dl,dd,dt 自定義列表
Ul,li 無序列表
Ol,li 有序列表

5.字體顏色

全部頁面上的字體有兩塊能夠全局控制：
body{color:red;} a,a:link,a:visited{color:blue}
還有一處是局部樣式的控制，但有時候每每是兩部分均可能起做用，即全局＋局部，css的疊加特性的展示，因此在調試時要仔細觀察。
.nav a,.nav a:link{color:red;}

6.CSS選擇符

通常面試必考題目，有人說過於理論，其實css不考這個也沒其它可考的，另外這裏邊細節仍是有不少，仔細看區別仍是挺大的。
這裏邊列出只是經常使用的尤爲測重於pc端的，css3.0又添加了很多，因此這塊不敢大意，東西還很多。
CSS 選擇器參考手冊
下面的實例不一一詳解了，有時候答案給的太快，對學習沒一點好處。學習的過程就是：艱難的獲取答案的過程。
1. 通配符選擇符： *
2. 類選擇符：.
3. 包含選擇符：.a .b
4. 子選擇符：.a > .b
5. 相鄰選擇符：.a + .b
6. 屬性選擇符：body
7. ID選擇符：#
8. 選擇符的組合關係：.a,.b body,h1
9. 僞類及僞對象選擇符：:after ::after

7.CSS圖片

圖片是拖垮頁面加載性能的主要對象，因此圖片是否切好是關係頁面性能的主要指標，如何在保持頁面質量的前提下又能快速的加載，這中間的平衡是須要時間去沉澱的。主要的區別在於格式。

gif,png,jpg的區別
圖片的
png-8,png-24的區別
css sprite的應用
- 優勢：減小請求，減小圖片佔用空間。
- 缺點：修改麻煩，定位花費時間。
  擴展學習：
- 圖片格式與設計那點事兒
- Web性能優化：圖片優化

10. CSS半透明

透明有兩種，一種是單層透明，另一種是雙層透明。
CSS背景顏色屬性值轉換
- 單層透明：功能差別透明處理。
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');background:rgba(0,0,0,.6);
- 優勢：能夠用一層就能夠實現透明
- 缺點：須要計算。
- 雙層透明：用外相對裏絕對的思路實現差別透明。
filter:alpha(opacity:80);opacity:0.8);
- 優勢：代碼簡單，實現快捷。
- 缺點：層透明內容透明。

總結：寫出來的內容對現場分享作了有效的補充，可是沒有現場共同交流的快樂或記憶，是比較冰冷或易忘的，因此從業人員多交流是一個值得提倡推廣的事情。

最後建議你們必定要享受這個編碼的過程，前端是一個創造性的崗位，你的創造正在改變着世界，應該爲這個職業感到驕傲或自豪。

未完待續...，下期更精彩。

前端開發qq羣：389875212 ，禁止閒聊，非喜勿進~！