Scribd Logo
Hochladen

Willkommen bei Scribd!

  • 001 CSS Box Model PDF

    Hochgeladen von

    bossko
    18 Ansichten3 Seiten

    Originaltitel

    001 CSS box model.pdf.pdf

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    18 Ansichten3 Seiten

    001 CSS Box Model PDF

    Hochgeladen von

    bossko

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 3

    CSS box model 1

    index.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS box model 01 </title>
    <link type="text/css" rel="stylesheet" href="style.css">
    </head>

    <body>
    <div class="box1">
    Box 1
    </div>

    <div class="box2">
    Box 2
    </div>

    </body>
    </html>

    style.css

    .box1{
    background-color:yellow;
    width:800px;
    padding:25px;
    border:25px solid blue;
    margin:25px;
    }

    .box2{
    background-color:grey;
    width:1000px;
    padding:10px;
    border:15px solid red;
    margin:5px;
    }

    CSS box model 2

    index.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS box model 02 </title>
    <link type="text/css" rel="stylesheet" href="style.css">
    </head>

    <body>
    <div class="content">

    1
    <div class="header">
    Header
    </div>

    <div class="left">
    Left (navigation)
    </div>

    <div class="middle">
    Middle (content)
    </div>

    <div class="footer">
    Footer (contact ecc.)
    </div>

    </div>
    </body>
    </html>

    style.css

    .content{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid blue;
    height:500px;
    }

    .header{
    background-color:yellow;
    width:788px;
    padding:5px;
    border:1px solid black;
    /*
    real width=width (780)+ padding(5+5) + border(5+5)
    */
    }

    .left{
    background-color:grey;
    width:290px;
    height:250px;
    padding:5px;
    border:1px solid black;
    float:left;
    border-radius:15px;
    }
    /*
    290 + 10 + 480 + 10 = 790px
    */
    .middle{
    background-color:red;
    width:480px;
    height:250px;

    2
    padding:5px;
    border:1px solid black;
    float:right;
    border-radius:15px;
    }

    .footer{
    background-color:brown;
    width:790px;
    height:50px;
    padding:5px;
    border:1px solid black;
    float:left;
    border-radius:10px;
    }

    Das könnte Ihnen auch gefallen