CSS布局快速入門

jopen 12年前發布 | 37K 次閱讀 CSS 前端技術

最近因為項目需要，不得不重新看看CSS/HTML之類的東西，不看不要緊，一看嚇一跳

原來不知道真的是太多，以前從未認真對待過，這次總結了一下學習所得，算是對自己

有個交代，也可能讓想了解CSS/HTML布局應用的朋友快速入門：

1. CSS 與HTML元素直接關聯，以HTML h1元素為例。CSS定義如下：

H1 {
margin: auto;
width:600px;
font-size:18px;
font-weight: bold;
}

2.  CSS與HTML元素的id屬性關聯，以HTML元素img標簽為例， CSS定義如下：

#image_style{
margin: auto;
width:450px;
height:450px;
background: #1F1F1F;
border-style: solid;
border-width: 5px;
border-color: #0000FF;
}
#image_style .sub_style{
padding: 25px;
margin:auto;
}

3. CSS與HTML元素的class屬性關聯，以HTML元素DIV為例，CSS定義如下：

.header {
margin: auto;
width: 600px;
background: #2D2D2F;
}

以上三個CSS綜合運用結合HTML代碼，頁面效果如下：

完整的HTML代碼如下：

<html>
<head>
    <title>CSS Related to HTML element directly</title>
    <style type="text/css">
        .header {
            margin: auto;
            width: 600px;
            background: #FF1F1F;
        }

        h1 {
        font-size:18px;
        font-weight: bold;
        text-align: center;
        /*display: inline;*/
        }

        #image_style{
            margin: auto;
            width:450px;
            height:450px;
            background: #1F1F1F;
            border-style: solid;
            border-width: 5px;
            border-color: #0000FF;
        }
        #image_style .sub_style{
            padding: 25px;
            margin:auto;
        }

    </style>
</head>
<body>
    <div class="header">
    <h1>My Fist CSS Introduce - Sample Codes</h1>
    </div>
    <div id="image_style">
        <img class="sub_style" src="images/star_stareu.png">
    </div>
</body>
</html>

4. CSS與DIV元素結合使用實現排版布局

很多常見的博客系統網頁布局可以通過CSS + DIV很容易的實現，下面是一個最常用的博

客網頁布局CSS+DIV代碼解釋與介紹, 首先看一下布局效果：

DIV代碼如下：

  <div id="container">
        <div id="header">
            <label>頭區域</label>
        </div>
        <div id="leftBar">
            <label>左側導航</label>
        </div>
        <div id="content">
            <label>內容</label>
        </div>
        <div id="rightBar">
            <label>右邊框</label>
        </div>
        <div id="footer">
            <label><b>尾區域</b></label>
        </div>
    </div>
CSS的定義代碼如下：

      #container {
          margin:auto; /* IE6 supports them with a full and valid doctype */
          width: 800px;
          /* margin-left: 200px;    */
          background: #ffffff;
        }

        #header {
          height: 80;
          background: #B0C4DE;
        }

        #leftBar {
          float: left; 
          width: 150px; 
          background: #DFDF12; 
        }

        #content {
          float:left;
          width:500px;
          background-color: #cdcde6;
        }

        #rightBar { 
          float:right; 
          width: 150px; 
          background: #EBEBEB; 
        }

        #rightBar #zhao_shang {
            /*height:600px; - comment it */
            padding: 20px;
        }

        #footer { 
          clear:both;
          text-align: center;
          background:#DDDDDD;
        }

5.  CSS注釋語法 - CSS注釋代碼使用如下語法格式/* 代碼片段*/

6. 瀏覽器支持問題

上面的代碼在IE6/IE7/IE8中顯示時候，HTML頁面頭必須聲明doctype，否則margin: atuo;

不能被IE瀏覽器識別，doctype聲明如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
該布局的完整HTML代碼如下，copy之后save為html文件可以直接在chrome運行：

<html>
<head>
    <title>CSS Related to HTML element directly</title>
    <style type="text/css">
        #container {
          margin:auto; /* IE6 supports them with a full and valid doctype */
          width: 800px;
          /* margin-left: 200px;    */
          background: #ffffff;
        }

        #header {
          height: 80;
          background: #B0C4DE;
        }

        #leftBar {
          float: left; 
          width: 150px; 
          background: #DFDF12; 
        }

        #content {
          float:left;
          width:500px;
          background-color: #cdcde6;
        }

        #rightBar { 
          float:right; 
          width: 150px; 
          background: #EBEBEB; 
        }

        #rightBar #zhao_shang {
            /*height:600px; - comment it */
            padding: 20px;
        }

        #footer { 
          clear:both;
          text-align: center;
          background:#DDDDDD;
        } 
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            <label>頭區域</label>
        </div>
        <div id="leftBar">
            <label>左側導航</label>
        </div>
        <div id="content">
            <label>內容</label>
        </div>
        <div id="rightBar">
            <label>右邊框</label>
        </div>
        <div id="footer">
            <label><b>尾區域</b></label>
        </div>
    </div>
</body>
</html>
轉自：http://blog.csdn.net/jia20003/article/details/7948374

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！