?? 福彩3d太湖字谜正版

心情碎語:等雨停的時候往往雨不會停,等人來的時候往往人不會來。

您的位置:慕軻博客 >網頁設計專題> HTML和CSS基礎知識簡介二

HTML和CSS基礎知識簡介二

昨天說到HTML和CSS基礎知識,今天繼續說,說到網頁設計、html和css大家一定會想到一個經典的排版方式:DIV+CSS排版,下面小慕就具體說一下div+css盒模型的組成

css盒模型的組成

介紹DIV+CSS排版之前還要說一下表格排版,表格排版是比較簡單的,這里只是提一下,就不怎么說了,相信只要接觸過的人員不要學習很快就會掌握了。

回到DIV+CSS盒模型排版,我們昨天介紹的前面幾個知識點,如果您會用表格布局的話,就非常好理解和掌握了。這里的盒模型是和table布局的一個不同點。學習web標準,首先要弄懂的就是這個盒模型,這就是DIV排版的核心所在。傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容,改用CSS排版后,就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。這種排版方式的網頁代碼簡潔,表現和內容相分離,維護方便,能兼容更多的瀏覽器,比如PDA設備也能正常瀏覽。

那么它為什么叫盒子(box)呢?所謂盒子,很容易想到空間問題,當然頁面是平面的我們只需要考慮平面的內容。先說說盒子有什么吧,當我們俯瞰一個盒子時就會發現這些:盒子材質的厚度、內置的什么物品所占空間、內部放置物品與盒子內邊的空隙大小、還有盒子與盒子之間的間距等等,再說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin)等,這和我們常見的盒子其實是一個概念,這些CSS盒子模式都具備這些屬性,看下圖的盒子模型。

QQ截圖20161018135617.png

如上圖所示:可以想象一下,邊框相當于我們俯瞰盒子時的厚度,內容相對于盒子中所裝物體的空間,而填充呢,相當于為防震而在盒子內填充的泡沫或間距,邊界呢相當于在這個盒子周圍要留出一定的空間,以方便取出。是不是這樣就很容易理解盒模型了。

所以整個盒模型在頁面中所占的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成,而css樣式中width所定義的寬度僅僅是內容部分的寬度,這是許多朋友容易搞混的地方以至于出現網頁排版時出現網頁錯位、內容溢出等等現象。同樣道理盒子模型的高度也是同樣道理,這里就不多說了。

上邊提到的邊界我們也稱之為:外邊距、外補丁;填充也叫:內邊距、內補丁。

今天就說這么多吧,后邊就是具體排版操作內容了,額,對了小慕再給大家說說如何才能把網頁設計學習好吧。

初學者怎樣學習網頁設計和DIV+CSS排版

1、多了解一些html里的標簽知識和css基礎,要知道什么地方用什么標簽,什么效果要用到怎樣的屬性,初學者可以先用dreamweaver軟件進行界面排版,想要個什么效果先用可視化排出來,然后打開代碼經過修改增刪時效果的改變來研究每個標簽和屬性代碼的功能和效果,逐步掌握,不需要死記硬背。小慕本人就比較討厭死記硬背的方式,所以咱英語是差到家了,哈哈,扯遠了。嗯,關鍵就是在實踐中學習,要善于利用軟件,這就是小慕在學習標簽和屬性時用的方法,可能小慕我記憶力差吧,只能用這個笨方法,好吧,那些記憶力好的可以死記的哈,別和我打嘴官司,嘻嘻。

2、學習布局的時候可以先用表格布局,可以用DW軟件可視化排版,然后研究代碼,當覺得標簽及其屬性掌握的差不多了,在使用div+css盒子模型進行排版,切勿眼高手低,當然如果你是大神就另當別論了,額,小慕太自戀了,大神也不會來看俺這種小白寫的內容啊。好了,無論你是什么程度的神,請不要吐槽小慕,小慕只有這個水平了,大家多擔待。

3、學會改變設計觀念,我們使用表格排版時肯定會優先考慮網頁的外觀、顏色、字體及布局等所有頁面表現上的內容。而DIV+CSS不同在于DIV等標簽不再是頁面上的表現形式而是一個頁面結構,這里實現其頁面上的表現形式的變成了CSS樣式表,這就是實現了結構與外觀表象分離出來的效果,以加快網頁加載的速度。當我們使用DIV+CSS排版布局的時候要知道外觀并不是最重要的,相反最終用戶在訪問網頁時的體驗才是優先要考慮的。一個由div+css布局且結構良好的頁面可以通過css定義成任何外觀,在任何網絡設備上(包括手機、PDA和計算機)上以任何外觀表現出來,而且用div+css布局構建的網頁是以簡化代碼、加快顯示速度為目的的,也就是用戶體驗。

4、最后不得不說的一點:多動手、多實踐、勤動腦,還有堅持不懈不要怕麻煩。無論學習什么這都是不變的真理。正所謂實踐出真知,在設計中學習,在學習中進步,善于變換思路,別讓你的大腦生銹了,不能一棵樹上吊死,更不能一條路走到黑。額,這個貌似與堅持有矛盾呢,其實吧你要學會了選擇,就不覺得了,不是常說條條大路通羅馬嘛,就是這個道理,堅持目標和堅持道路不是一個概念,只要你別走到那條會走到天黑的死路就是了。

額,小慕要瘋了,最討厭這些哲學問題了,頭疼,反正今天就這些了,發現小慕原來還是有去研究哲學的潛力的,欣慰。


附:上邊忘了說一點,DW軟件的下載地址:小慕這里提供的是8.0的老版本,需要新版本的自行百度下載。

DW軟件的下載地址 http://www.vrvwmp.live/zyfx/219.html 這里是8.0版本的。

---

轉載請注明本文標題和鏈接:《HTML和CSS基礎知識簡介二

發表評論

36 + 67 =
路人甲 表情
Ctrl+Enter快速提交
福彩3d图谜总汇