CSS技巧荟萃：了解CSS页面布局和加载流程

1

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

1
2
3

sometag{   
  display:inline; /*当然你也可以设置为block，none等等支持的属性*/
}

1
2
3
4

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <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</a></section>
    </footer>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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;
}