懷柔電腦培訓,懷柔學平面設計懷柔網站建設,懷柔做網站懷柔印刷懷柔效果圖設計懷柔電腦培訓學校QQ咨詢懷柔電腦培訓qq咨詢

咨詢電話:010-69632027/13241022177

教師的觀點:博興宏勝IT職業教育=先進的課程體系+遠程教育平臺+國家權威認證+分配廣告定單+試用期跟蹤輔導+實戰型教學
當前位置: 首頁 > 學員專區 > 技術文摘 >

CSS頁面布局和加載流程

在我們開始正式的介紹頁面流程前,我們需要簡單了解幾種不同類型的html元素,以及它們的缺省顯示方式。這里我們主要重點介紹兩個類型的元素:

  • block
  • inline

如果大家關心html5的話,你應該知道在HTML5中也包含了幾個新的元素,例如,section,article等等,但是仍舊遵循這里我們介紹的顯示類型。

inline類型的元素包括: img,span,a等,用來定義文字或者數據,通常顯示方式是“同一行顯示”。更具體的說就是,如果很多的inline類型的元素在同一行的時候,它們會顯示在同一行,直到寬度不夠顯示了,再轉到下一行。例如,如下代碼:

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

相 反block類型的元素,例如,div,p或者HTML5中新的元素section,article和article的顯示方式和inline類型都不一 樣。它們都是典型的結構化的元素,可以包含inline類型的元素。瀏覽器處理block類型的元素,會在元素前后添加換行,這樣你看到它們都是獨立成行 顯示的。當然,如果你修改它的缺省顯示類型為inline,它就會按照inline元素的顯示方式顯示。

樣式CSS

通常我們都是使用CSS來控制元素的顯示:

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

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

另外一些顯示方式 

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

它顯示的方式類似于inline,但是它相關的屬性,例如,寬度,高度還有padding/margin等等遵循于block顯示類型的規則。inline-block可以幫助我們實現類似float元素的效果,但是也有自己的問題。

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

<ul>   
  <li>元素1</li>   
  <li>元素2</li> 
</ul>

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

正常Document的加載流程

那 么什么是瀏覽器正常的加載流程呢?基本上瀏覽器按照它解析的順序來顯示內容,頂端的先加載,然后加載下面的內容。當大家開始做web設計的時候,可能都不 關心正常的document加載過程,而只醉心于各種不同的絢麗花哨的技巧,如果你能夠正確的理解document加載,對于更好的幫助你理解web設計 絕對有利無弊。

做一個練習吧!

在這里我們將做一個簡單的聯系幫助你鞏固你的學習,這里我們使用HTML5 Shiv來幫助我們支持HTML5標簽,使用placekitten這個圖片占位應用來生成圖片。

HTML框架代碼如下:

 <div class="container">
        <h1>An Intro to Normal Document Flow.</h1>
        <figure class="photoGallery">
            <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</a></section>
    </footer> 

CSS布局代碼:

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;
    padding: 10px;
}

footer{
  width: 85%;
  margin:0 auto;
}

section{
  padding: 20px 0;
} 

懷柔博興宏勝電腦學校是懷柔專業的電腦學校

(責任編輯:博興宏勝電腦學校)
懷柔電腦培訓學校,懷柔學電腦,懷柔學設計,懷柔廣告

推薦內容

     久久动漫综合网