Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • GGG

    Încărcat de

    Swaglord1234556
    13 vizualizări4 pagini
    3qt434erewr

    Titlu original

    Ggg

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    TXT, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    3qt434erewr

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca TXT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    13 vizualizări4 pagini

    GGG

    Încărcat de

    Swaglord1234556
    3qt434erewr

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca TXT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 4

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>A Simple CSS Page</title>
    <style>
    body {background-color:blue;}
    #container {
    position: absolute; left: 50%;
    width: 1000px;
    margin-left: -500px;
    z-index: 2;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    #pageheader h1{
    width: 1000px;
    height: 125px;
    margin: 0px 0px 0px 0px;
    background: url('pageheadergraphic.jpg');
    text-align: center;
    }
    #maincontent {
    background-color:white;
    width: 600px;
    margin: auto;
    padding: 6px;
    }
    #footer {
    width: 1000px;
    background-color: yellow;
    }
    #rightsidepanel {
    background-color: #0FF;
    width: 200px;
    position: absolute; left: 50%;
    z-index: 4;
    margin-left: 280px;
    margin-top: 250px;
    /*
    width: 200px;
    position: absolute; left: 50%;
    margin-left: 280px;
    margin-top: 250px;
    z-index: 0;
    background-color: #0FF;
    */
    }
    #leftsidepanel {
    width: 200px;
    position: absolute; left: 50%;
    margin-left: -520px;
    margin-top: 750px;
    z-index: 0;
    background-color: #063;
    padding:10px;
    }
    #yellowbubble1 {
    width: 400px;
    position: absolute; left: 50%;
    margin-left: -550px;
    margin-top: 140px;
    z-index: -1;
    }
    #greenbubble1 {
    width: 400px;
    position: absolute; left: 50%;
    margin-left: 150px;
    margin-top: 430px;
    z-index: -1;
    }
    #pinkbubble1 {
    width: 400px;
    position: absolute; left: 50%;
    margin-left: -450px;
    margin-top: 380px;
    z-index: -2;
    }
    h1.oversize_white {
    color:white;
    font-size: 48px;
    }
    p.normal_white {
    color:white;
    }
    p.italics {
    font-style: italic;
    font-weight: bold;
    text-align: center;
    }
    p.italicsNB {
    font-style:italic;
    text-align: center;
    }
    p.bright {
    color: #F60;
    }
    </style>
    </head>
    <body>
    <!-- Start Page Content Container Div -->
    <div id="container">
    <div id="pageheader">
    <h1 class="oversize_white">Using CSS to Make Awesome Pages</h1>
    <p class="normal_white">This page is an example of how HTML and CSS work tog
    ether to create well formatted designed web page</p>
    </div>
    <div id="maincontent">
    <h2>Welcome</h2>
    <p>This page is divided into several content sections. Each section is contr
    oled by CSS in the style section of the page. This section uses the ID attribute
    and value "maincontent" to make it aligned in the center of the page with a whi
    te background. The heading above uses similiar process where the ID attribute an
    d value "pageheader" are used. However if you look at the code you will notice t
    hat the style section specifically references the H1 tag in this element. This i
    s how the image is applied as a background to the H1.</p>
    <p class="italics">If you can understand how this page is created, then you
    will be well on your way to creating and designing web sites with HTML and CSS</
    p>
    <p>You will also notice that there are images on the sides of this page. The
    se images also use CSS to control where and how they are displayed.</p>
    <div align="center">
    <img src="bobcat.jpg" alt="beautiful bobcat" border="5"/>
    </div>
    <p class="italics">Bobcat says CSS ROCKS!</p>
    <p class="italicsNB">Notice this image is also placed in a DIV however, all
    it does is center the image within its containing DIV (maincontent). There has a
    lso been a border added using the BORDER attribute of the IMG tag.</p>
    </div>
    <div id="footer">
    <div align="center"
    <p>Aberdeen High School Web Design 2013 Go Bobcats!</p>
    </div>
    </div>
    </div>
    <!-- End Page Content Container Div -->
    <!-- Start Side Panel Content Areas -->
    <div id="rightsidepanel">
    <ul>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.bing.com">Bing</a></li>
    <li><a href="http://www.w3schools.com">W3 Schools</a></li>
    <li><a href="http://www.csszengarden.com">CSS Zen Garden</a></li>
    </ul>
    </div>
    <div id="leftsidepanel">
    <p class="bright">
    This is an example of another content area that can be added to a page and p
    laced on the page using CSS. The other side area is above on the right side with
    the links to Google, Bing, W3schools and CSS Zen Garden.
    </p>
    </div>
    <!-- End Side Panel Content Areas -->
    <!--Start Page Decoration Images -->
    <div id="yellowbubble1">
    <img src="sidebubble_yellow.png" alt="yellow bubble"/>
    </div>
    <div id="greenbubble1">
    <img src="sidebubble_green.png" alt="green bubble"/>
    </div>
    <div id="pinkbubble1">
    <img src="sidebubble_pink.png" alt="pink bubble"/>
    </div>
    <!-- End Page Decoration Images -->
    </body>
    </html>
    }}}

    S-ar putea să vă placă și