HTML中CSS樣式及Div佈局的簡單使用

時間 2020-01-18

標籤 html css 樣式 div 佈局簡單使用欄目 HTML 简体版

原文原文鏈接

在網頁開發中，常常會有將網頁切分爲不一樣的局部塊，而後再在不一樣的快中顯示不一樣的內容，如：頂部塊、主題內容塊、側邊欄信息快、底部信息塊等。
css

使用DIV能夠將網頁切成不一樣的塊，而後使用CSS樣式表定義各不一樣塊的具體顯示。通常將div佈局與CSS樣式分不一樣文件編寫，div切割在html文件中實現，而後將獨立的CSS樣式表文件加載到html文件中。html

下面以源代碼及效果圖的方式，展現一個簡單的網頁佈局案例。web

最終效果圖：ide

說明：將網頁分紅了上中下三部分，上面頂部（紅色），中間部分（×××）又分爲左邊的主體內容（藍色）和右邊的側邊欄（灰色）兩個子塊，下面是底部（綠色）。邊緣暗紅色的是背景，背景能夠指定顏色或是設置背景圖片。佈局

要想將網頁切割成這樣的塊，須要在html中使用div標籤訂義，本例定義塊代碼以下：字體

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="description" content="this is a web station for alone.">
    <meta name="keywords" content="perfect,home,blog,web,station">
    <title>個人我的站點</title>
    <!-- 在html文件中使用link標籤添加爲這個文件定製的CSS樣式表 -->
    <link rel="stylesheet" type="text/css" href="myweb.css" />
    </head>
    <body>
        <!-- 定義頂部塊，併爲這個塊設定一個名稱爲head的id值 -->
        <div id="head">
            <h1>這裏是頂部欄</h1>
        </div>
        <!-- 定義主體容器塊，併爲這個塊設定一個名稱爲container的id值 -->
        <div id="container">
            <!-- 在contarner塊中定義兩個子塊，而後分別爲這兩個塊設定名稱爲main、siderbar的class類 -->
            <div class="main"><h1>這裏是主體內容部分</h1></div>
            <div class="sidebar"><h1>這裏是側邊欄</h1></div>
        </div>
        <!-- 定義底部塊，併爲這個塊設定一個名稱爲bottom的id值 -->
        <div id="bottom"><h1>這裏是底部</h1></div>
    </body>
</html>

說明：this

1.使用上面的代碼，雖然能夠將頁面切成不一樣的塊，可是默認的塊沒有大小、顏色之分，根本看不出來。url

2.爲每一個div元素設定了一個id或class屬性來標識，每一個屬性值表明對應的元素，在CSS樣式表中使用。id值必須惟一，一個id值表明一個元素。但class值能夠重複，一個class值表示同名的一類元素。htm

爲了在網頁中清晰的分辨各塊，須要定義一個CSS樣式表myweb.css來定義不一樣塊及元素的顯示。blog

下面的myweb.css文件對上面的html文件裏各部分定義瞭如何顯示：

/*在css文件中，默認的html元素能夠直接使用名稱，這裏定義了整個網頁body部分的顏色，
是十六進制的RGB表示方法，即圖片周邊的暗紅色。也可使用哪一個url()的方式爲body部分
設置背景圖片*/
body{
    background-color: #551122;
<!-- background-p_w_picpath: url("../bj.jpg");-->
}
/*html元素的id屬性使用#開頭。width、herght表示寬與高，大小使用像素表示。
margin表示顯示方式，默認靠左，auto設置爲居中顯示，並設定背景顏色爲red*/
#head{
    width: 960px;
    height: 80px;
    margin: auto;
    background-color: red;
}
#container{
    width: 960px;
    height: 500px;
    margin: auto;
    background-color: yellow;
}
/*html元素定義class屬性使用點.開頭。float設置該塊的漂浮屬性，在container內向左移,
另外一個快siderbar在container內向右移*/
.main{
    float: left;
    width: 700px;
    height: 500px;
    background-color: blue;
}
/*由於main和siderbar在container內，因此兩個塊的寬度之和不該該超過container的寬度*/
.sidebar{
    float: right;
    width: 240px;
    height: 500px;
    background-color: gray;
}
/*底部塊的id值，大小及顏色、居中顯示*/
#bottom{
    width: 960px;
    height: 100px;
    background-color: green;
    margin: auto;
}
/*從新定義h1元素的顯示，因爲h1默認有邊距margin-top將頂部間距設爲0，
text-align爲設置字體的顯示位置屬性：center是居中顯示，font-size定義大小*/
h1{
    margin-top: 0px;
    text-align: center;
    color: white;
    font-size: 35px;
}
/*定義bottom中的h1顯示方式，其餘的h1字體顏色爲white，此處h1顏色爲red，大小也改變。
當多處定義了同一個元素時，最精確的生效*/
#bottom h1{
    margin-top: 0px;
    text-align: center;
    color: red;
    font-size: 50px;
}

說明：

1.在css樣式表中，html的默認元素能夠直接使用，元素的id使用「#」+「id值」表示，元素的class使用「.」+「class值」表示；

2.CSS可用的屬性值太多，能夠根據手冊查詢，此處只根據須要使用了寬度、高度、顏色、顯示位置等屬性；

3.在html中h1...h7有默認的顯示形式，能夠在CSS中改變其顯示屬性，而且可使用精肯定位的方式設置不一樣地方的h1有不一樣的顯示。

根據以上內容，就可使用Div+CSS爲本身的網頁佈局了。