CSS+DIV——前端er必備基礎 · Web開發入門篇

B/S真是一個長見識的階段，認識了很多前端必備的語言，隨著時間的增加，本以為新聞發布系統中學到的那些我還不知道是什么的東西，會早已沒了印象。但反而卻更加深刻了，當時還不知道什么是CSS，就學會了寫CSS。還不是什么是異步通信，就學會了用AjaX。當看到視頻中的經典框架時，才發現，這不就是新聞發布系統中用到的CSS+DIV么！(⊙o⊙)哦，原來我早就會寫了！ ## 一、為什么是DIV+CSS 　　看到這個搭配，我就在想為什么是這樣的組合？Span不可以么！直接用HTML不可以么！一個很明確的目的：為了讓數據內容與數據格式分離，方便前端er開發和維護。想象一下，一個內鏈樣式表的語句 ~~~ <span style="font-family:KaiTi_GB2312;font-size:18px;"><link href="（css樣式表）" rel="stylesheet" type="text/css" /></span> ~~~ 　　如果需要修改任何一個前端元素的樣式，只要在樣式表中去查找ID或類別名就可以了，這無疑大大提高了開發的效率。　　還有一個問題就是為什么Span不可以？SPAN和DIV的區別在于，DIV(division)是一個塊級元素，可以包含段落、標題、表格，乃至諸如章節、摘要和備注等。而SPAN是行內元素，SPAN的前后是不會換行的，它沒有結構的意義，純粹是應用樣式，當其他行內元素都不合適時，可以使用SPAN。 ## 二、一步步實現DIV+CSS ### Step ONE：DIV分塊　　首先要考慮到網頁分為幾個展示部分，Banner和Footer是必備的，其他內容的展示就是個性的問題了，分配給相應的DIV塊。 ![](https://box.kancloud.cn/2016-08-19_57b6c8c732afa.jpg) ### Step Two：DIV定位——盒子模型　　用CSS樣式表給DIV定位，就要用到我們的盒子模型了，如它的名字，盒子是用來存放東西的，可以任意的挪動。當然更專業的詞，我們稱它為浮動。下面就是盒子模型的展示，margin、border、padding。如果你可以聯想到照相館墻上的畫面那就再好不過了！ ![](https://box.kancloud.cn/2016-08-19_57b6c8c76d69b.jpg) ![](https://box.kancloud.cn/2016-08-19_57b6c8c78ffbd.jpg) ### Step Three：整體架構　　以下的代碼是第一張原型的詮釋，是一個很基礎的CSS+DIV的實現結果。其中用到了盒子浮動的效果，讓content模塊和link模塊各自向左右兩邊浮動。 ~~~ <html> <head> <style type="text/css">  </style> <title>CSS排版</title><body> <div id="container"> <div id="banner">banner</div> <div id="content"> <div class="blog"> <div class="date">date</div> <div class="blogcontent"> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> </div> </div> <div class="others">others</div> </div> <div id="links"> <div class="calendarhead">links<br>links<br>links<br>links</div> <div class="calendartable">links<br>links<br>links<br>links</div> <div class="side">links<br>links<br>links<br>links</div> <div class="syndicate">links<br>links<br>links<br>links</div> <div class="friends">links<br>links<br>links<br>links</div> </div> <div id="footer">footer</div> </div> </body> </html> ~~~ 效果圖如下： ![](https://box.kancloud.cn/2016-08-19_57b6c8c7add44.jpg) ## 三、小結　　在有了CSS與DIV組合之后，網頁的加載變得輕松，因為數據與格式的分離，讓維護更加容易。搜索效率和瀏覽效率的提高，會帶來很好的用戶體驗。So...CSS+DIV構成的如此簡潔的源代碼前臺，是我們學習前端開發的必備基礎。