多多视频在线观看播放,国产天堂亚洲国产碰碰,五妹影院电视剧播放在线观看免费

CSS3多列布局屬性

定義列數column-count

在CSS3的多列布局中，我們可以使用column-count屬性指定多列布局的列數，而不需要通過列寬度等來調整列數
- 語法：column-count: auto/正整數;
- 說明：column-count有2個屬性值，一個是auto，另外一個是正整數（如1、2、3）
  
  column-count屬性取值
舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 column-count屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            column-count:3;
            -webkit-column-count:3;
            -moz-column-count:3;
            -o-column-count:3;
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了，有再來的時候；楊柳枯了，有再青的時候；桃花謝了，有再開的時 候。但是，聰明的，你告訴我，我們的日子為什么一去不復返呢？——是有人偷了他們罷：那是誰？又藏在何處呢？是他們自己逃走了罷——如今又到了哪里呢？</p>
    <p>……</p>
    <p>在逃去如飛的日子里，在千門萬戶的世界里的我能做些什么呢？只有徘徊罷了，只有匆匆罷了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？過去的日子如輕煙，被微風吹散了，如薄霧，被初陽蒸融了；我留著些什么痕跡呢？我何曾留著像游絲樣的痕跡呢？我赤裸裸來到這世界，轉眼間也將赤裸裸的回去罷？但不能平的，為什么偏要白白走這一遭啊？</p>
    <p>你聰明的，告訴我，我們的日子為什么一去不復返呢？</p>
</body>
</html>

在瀏覽器預覽效果

分析：在這里對body設置了一定寬度，并且使用“column-count:3;”使得body會自動以最恰當的方式分為3列

定義列寬column-width

在CSS3的多列布局中，我們可以使用column-width屬性定義多列布局中每一列的寬度。
- 語法：column-width：auto/長度值;
- 說明：column-width有2個屬性值：1個是auto，另外1個是長度值
  
  column-width屬性取值
舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>定義列寬column-width屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            -webkit-column-width:150px;
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了，有再來的時候；楊柳枯了，有再青的時候；桃花謝了，有再開的時 候。但是，聰明的，你告訴我，我們的日子為什么一去不復返呢？——是有人偷了他們罷：那是誰？又藏在何處呢？是他們自己逃走了罷——如今又到了哪里呢？</p>
    <p>我不知道他們給了我多少日子，但我的手確乎是漸漸空虛了。在默默里算著，八千多日子已經從我手中溜去，像針尖上一滴水滴在大海里，我的日子滴在時間的流里，沒有聲音，也沒有影子。我不禁頭涔涔而淚潸潸了。</p>
    <p>……</p>
    <p>在逃去如飛的日子里，在千門萬戶的世界里的我能做些什么呢？只有徘徊罷了，只有匆匆罷了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？過去的日子如輕煙，被微風吹散了，如薄霧，被初陽蒸融了；我留著些什么痕跡呢？我何曾留著像游絲樣的痕跡呢？我赤裸裸來到這世界，轉眼間也將赤裸裸的回去罷？但不能平的，為什么偏要白白走這一遭啊？</p>
    <p>你聰明的，告訴我，我們的日子為什么一去不復返呢？</p>
</body>
</html>

在瀏覽器預覽效果

分析：這里使用“width:400px”限定了body寬度為400px，然后使用“column-width:150px;”定義列寬為150px，這樣body就會自動根據容器寬度、列寬以及內容多少來計算列數

列間距column-gap

在CSS3多列布局中，我們可以使用column-gap屬性定義列與列之間的間距（列間距）。
- 語法：column-gap：取值;
- 說明：column-gap有2個屬性值：一個是normal，另外一個是長度值
  
  在瀏覽器預覽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <title>列間距column-gap屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            -webkit-column-count:2;
            -webkit-column-gap:20px;    /*定義列間距為20px*/
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
            background-color:#F1F1F1;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了，有再來的時候；楊柳枯了，有再青的時候；桃花謝了，有再開的時 候。但是，聰明的，你告訴我，我們的日子為什么一去不復返呢？——是有人偷了他們罷：那是誰？又藏在何處呢？是他們自己逃走了罷——如今又到了哪里呢？</p>
    <p>我不知道他們給了我多少日子，但我的手確乎是漸漸空虛了。在默默里算著，八千多日子已經從我手中溜去，像針尖上一滴水滴在大海里，我的日子滴在時間的流里，沒有聲音，也沒有影子。我不禁頭涔涔而淚潸潸了。</p>
    <p>……</p>
    <p>在逃去如飛的日子里，在千門萬戶的世界里的我能做些什么呢？只有徘徊罷了，只有匆匆罷了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？過去的日子如輕煙，被微風吹散了，如薄霧，被初陽蒸融了；我留著些什么痕跡呢？我何曾留著像游絲樣的痕跡呢？我赤裸裸來到這世界，轉眼間也將赤裸裸的回去罷？但不能平的，為什么偏要白白走這一遭啊？</p>
    <p>你聰明的，告訴我，我們的日子為什么一去不復返呢？</p>
</body>
</html>

在瀏覽器預覽效果

分析：這里使用column-gap屬性定義多列布局中“列間距”為20px

列邊框column-rule

在CSS3的多列布局中，我們可以使用column-rule屬性來定義列與列之間的邊框樣式，其中邊框樣式包括：寬度、顏色和樣式。
- 語法：column-rule：邊框寬度邊框樣式邊框顏色;
- 說明：column-rule屬性類是一個復合屬性，由3個子屬性組成：
  （1）column-rule-width：設置邊框的寬度；
  （2）column-rule-style：設置邊框的樣式；
  （3）column-rule-color：設置邊框的顏色；
舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>列邊框column-rule屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            -webkit-column-count:2;
            -webkit-column-gap:20px;
            -webkit-column-rule:1px dashed red;
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
            background-color:#F1F1F1;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了，有再來的時候；楊柳枯了，有再青的時候；桃花謝了，有再開的時 候。但是，聰明的，你告訴我，我們的日子為什么一去不復返呢？——是有人偷了他們罷：那是誰？又藏在何處呢？是他們自己逃走了罷——如今又到了哪里呢？</p>
    <p>我不知道他們給了我多少日子，但我的手確乎是漸漸空虛了。在默默里算著，八千多日子已經從我手中溜去，像針尖上一滴水滴在大海里，我的日子滴在時間的流里，沒有聲音，也沒有影子。我不禁頭涔涔而淚潸潸了。</p>
    <p>……</p>
    <p>在逃去如飛的日子里，在千門萬戶的世界里的我能做些什么呢？只有徘徊罷了，只有匆匆罷了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？過去的日子如輕煙，被微風吹散了，如薄霧，被初陽蒸融了；我留著些什么痕跡呢？我何曾留著像游絲樣的痕跡呢？我赤裸裸來到這世界，轉眼間也將赤裸裸的回去罷？但不能平的，為什么偏要白白走這一遭啊？</p>
    <p>你聰明的，告訴我，我們的日子為什么一去不復返呢？</p>
</body>
</html>

在瀏覽器預覽效果

分析：這里使用column-rule屬性定義了列間邊框為“1px的紅色虛線”

跨列column-span

跨列，類似于我們在HTML中學過的合并列colspan屬性，在CSS3多列布局時，有時候我們要實現跨列效果，就要用到column-span屬性了
語法：column-span：取值;

column-span屬性取值

<!DOCTYPE html>
<html lang="en">
<head>
    <title>跨列column-span屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            -webkit-column-count:2;
            -webkit-column-gap:20px;
            -webkit-column-rule:1px dashed red;
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
            -webkit-column-span:all;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
            background-color:#F1F1F1;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了，有再來的時候；楊柳枯了，有再青的時候；桃花謝了，有再開的時 候。但是，聰明的，你告訴我，我們的日子為什么一去不復返呢？——是有人偷了他們罷：那是誰？又藏在何處呢？是他們自己逃走了罷——如今又到了哪里呢？</p>
    <p>我不知道他們給了我多少日子，但我的手確乎是漸漸空虛了。在默默里算著，八千多日子已經從我手中溜去，像針尖上一滴水滴在大海里，我的日子滴在時間的流里，沒有聲音，也沒有影子。我不禁頭涔涔而淚潸潸了。</p>
    <p>……</p>
    <p>在逃去如飛的日子里，在千門萬戶的世界里的我能做些什么呢？只有徘徊罷了，只有匆匆罷了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？過去的日子如輕煙，被微風吹散了，如薄霧，被初陽蒸融了；我留著些什么痕跡呢？我何曾留著像游絲樣的痕跡呢？我赤裸裸來到這世界，轉眼間也將赤裸裸的回去罷？但不能平的，為什么偏要白白走這一遭啊？</p>
    <p>你聰明的，告訴我，我們的日子為什么一去不復返呢？</p>
</body>
</html>