網頁前端工程入門:基礎 CSS 教學 By 彭彭

11
58

簡單的點綴一下網頁,基礎CSS 教學。 更多教學內容請參考:http://training.pada-x.com/

source

11 COMMENTS

  1. 老師您好 想請問您一個問題 我想要練習基本的 CSS排版 可是 DIV跟 DIV 之間 都會有間隙,我把  margin:0; padding:0;  border:0; 也沒用 不知道問題是出在哪裡 >""< 拜託老師了  附上程式碼
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>練習</title>

    <link rel="stylesheet" type="text/css" href="try.css" >

    </head>

    <body style="margin:0px;background-color:#eeeeee;">
    <div id="sitebody">
     <div id="header">header</div>
    <div id="sidebar_left">sidebar_left</div>
     <div id="sidebar_right">sidebar_right</div>
     <div id="content">content</div>
     <div id="footer">footer</div>
    </div>
    </body>
    </html>

    body{
    margin-top:0;
    }

    #sitebody{
    width:1000px;
    font-size:14px;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    }
    #header{
    width:1000px;
    height:100px;
    font-size:14px;
    text-align:center;
    background-color:#FFD4D4;
    margin:0;
    padding:0;
    border:0;
    }
    #sidebar_left{
    background-color:#FFECC9;
    width:120px;
    text-align:center;
    display:inline-block; vertical-align:top;
    margin:0;
    padding:0;
    border:0;
    float:left;
    }
    #sidebar_right{
    background-color:#FFECC9;
    width:120px;
    text-align:center;
    display:inline-block; vertical-align:top;
    margin:0;
    padding:0;
    border:0;
    float:right;
    }
    #content{
    width:720px;
    background-color:#F2FFF2;
    text-align:center;
    display:inline-block; vertical-align:top;
    margin:0;
    padding:0;
    border:0;
    }
    #footer{
    width:1000px;
    height:100px;
    font-size:14px;
    text-align:center;
    background-color:#FFD4D4;
    margin:0;
    padding:0;
    border:0;
    }

  2. 彭老師您好!非常喜歡你的教學,我開始在聽你的“網頁前端工程入門”。一開始就發現,是不是由於我的電腦語言問題,始終網頁出不來,找不到模塊。我發現輸入中文字的時候,跟着的符號都變了樣?謝謝!

LEAVE A REPLY