網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

[投稿]CSS技巧薈萃:了解CSS頁面布局和加載流程

日期:2013-11-22  來源:攀枝花惠康網絡公司

日期:2013-1-28 來歷:GBin1.com

如不美觀你開發web相關應用或者網站的話,必定知道CSS對于頁面結構的主要性。在本篇CSS技巧中我們將介紹頁面加載的流程來輔佐你更好的實現頁面結構。

介紹

在我們起頭正式的介紹頁面流程前,我們需要簡單體味幾種分歧類型的html元素,以及它們的缺省顯示體例。這里我們首要重點介紹兩個類型的元素:

  • block
  • inline

在這里我們將做一個簡單的聯系輔佐你鞏固你的進修,這里我們使用HTML5 Shiv來輔佐我們撐持HTML5標簽,使用placekitten這個圖片占位應用來生成圖片。

CSS技巧薈萃:體味CSS頁面結構和加載流程

如不美觀巨匠關心html5的話,你應該知道在HTML5中也包含了幾個新的元素,例如,section,article等等,可是模擬仍是遵循這里我們介紹的顯示類型。

1  

查看在線調試

總結

查看在線調試

相 反block類型的元素,例如,div,p或者HTML5中新的元素section,article和article的顯示體例和inline類型都紛歧 樣。它們都是典型的結構化的元素,可以包含inline類型的元素。瀏覽器措置block類型的元素,會在元素前后添加換行,這樣你看到它們都是自力成行 顯示的。當然,如不美觀你改削它的缺省顯示類型為inline,它就會按照inline元素的顯示體例顯示。

樣式CSS

凡是我們都是使用CSS來節制元素的顯示:

123 sometag{     display:inline; /*當然你也可以設置為block,none等等撐持的屬性*/}

雖然膳縵沔的屬性中我們指定了顯示類型,這同時也意味這其它相關的樣式,例如,你可以指定顯示類型為block的元素的寬和高,可是 inline類型的無法指定。padding(內邊距)和margin(外邊距)可以被應用到inline顯示的元素,可是不會影響包含的元素??纯慈缦?例子:

查看在線調試

此外一些顯示體例

最后還有一個元素需要提一下就是”none”,這個屬性可以讓元素不顯示,而且不占聚任何的document空間。 注重和“hidden”這個屬性區別一下。

正常Document的加載流程

除了inline和block類型的顯示,這里還有一個inline-block的顯示體例。如下圖:

它顯示的體例近似于inline,可是它相關的屬性,例如,寬度,高度還有padding/margin等等遵循于block顯示類型的軌則。inline-block可以輔佐我們實現近似float元素的效不美觀,可是也有自己的問題。

inline類型的元素搜羅: img,span,a等,用來界說文字或者數據,凡是顯示體例是“統一行顯示”。更具體的說就是,如不美觀良多的inline類型的元素在統一行的時辰,它們會顯示在統一行,直到寬度不夠顯示了,再轉到下一行。例如,如下代碼:

1 <a href="http://gbtags.com">gbtags.com</a> is website for <span>geeks</span>

其它的屬性例如,list-item,顧名思義,顯示的體例和列表元素近似。

1234 <ul>     <li>元素1</li>     &ltgt; </ul>

那 么什么是瀏覽器正常的加載流程呢?根基上瀏覽器按照它解析的挨次來顯示內容,頂端的先加載,然后加載下面的內容。當巨匠起頭做web設計的時辰,可能都不 關心正常的document加載過程,而只醉心于各類分歧的燦艷花哨的技巧,如不美觀你能夠正確的理解document加載,對于更好的輔佐你理解web設計 絕對有利無弊。

做一個操練吧!

HTML框架代碼如下:

123456789101112131415161718     <div>        <h1>An Intro to Normal Document Flow.</h1>        <figure>            <img src="http://placekitten.com/g/100/200" alt="" />            <img src="http://placekitten.com/g/160/200" alt="" />            <img src="http://placekitten.com/g/220/200" alt="" />            <img src="http://placekitten.com/g/180/200" alt="" /&<img src="http://placekitten.com/g/240/200" alt="" />            <img src="http://placekitten.com/g/130/200" alt="" />        </figure>        <article>            <h2> 接待訪謁我的喵星人圖片畫廊</h2>            <p>如不美觀你也喜歡貓咪的話,來一路看看這些可愛的小生命吧!</p>        </article>    </div>    <footer>      <section>接待訪謁<a href="http://gbtags.com">gbtags.com</;</section>    </footer>

CSS結構代碼:

123456789101112131415161718192021222324252627282930313233343536 body{  font-size:12px;  font-family: Arial;} .container {    width: 85%;    margin:0 auto;    background: #f2f2f2;} figure img {    padding-left: 10px;} h1 {    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;    color: #707070;    padding: 10px;    font-size:14px;} article {    background: #505050;    color: #f2f2f2;    padding10px
;} footer{  width: 85%;  margin:0 auto;} section{  padding: 20px 0;}

但愿經由過程這篇文章的進修,巨匠能夠更好的體味document的加載和結構,如不美觀你有任何問題或者建議,請給我們留言,感謝!

來歷:CSS技巧薈萃:體味CSS頁面結構和加載流程

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图