致力于高端网站建设服务的专业公司
网站建设热线:010-51000596
首页 > 网站资讯 > 网站建设 > 北京网站建设:CSS页面的布局技巧以及加载过程

北京网站建设:CSS页面的布局技巧以及加载过程

 

    做网站建设的站长们应该掌握一项网页CSS布局的技巧。CSS应该是当前网站建设和开发中必须要用到的一门编程语言,所以,如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局。
 
    介绍
 
    在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式。这里我们主要重点介绍两个类型的元素:
 
    1.block
 
    2.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;
 
    }
 
    总结
 
    通过以上的介绍和练习,相信大家都了解了CSS的布局技巧,以及CSS页面的加载方式,我们在网站建设和开发的过程中,就可以注意这些细节,建设更加完美的网页。