Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Exemplu HTML & CSS

    Încărcat de

    aurelcik prosta
    10 vizualizări10 pagini
    Exemplu HTML & CSS

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

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

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Exemplu HTML & CSS

    Drepturi de autor:

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

    Exemplu HTML & CSS

    Încărcat de

    aurelcik prosta
    Exemplu HTML & CSS

    Drepturi de autor:

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

    CSS3 nu este o singura specificat ˘ , ie - este formata din ˘ module I Aceasta abordare permite W3C

    prioritizarea specificat ˘ , iilor s, i timp de react, ie rapid la cererile noi I Starea actuala a CSS3: ˘
    http://www.w3.org/Style/CSS/current-work

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>/* Stylesheet 1: */
    body {
    font: 100% Lucida Sans, Verdana;
    margin: 20px;
    line-height: 26px;
    }
    .container {
    xmin-width: 900px;
    }
    .wrapper {
    position: relative;
    overflow: auto;
    }
    #top, #sidebar, #bottom, .menuitem {
    border-radius: 4px;
    margin: 4px;
    }
    #top {
    background-color: #84c754;
    color: #ffffff;
    padding: 15px;
    }
    #menubar {
    width: 200px;
    float: left
    }
    #main {
    padding: 10px;
    margin: 0 210px;
    }
    #sidebar {
    background-color: #32a4e7;
    color: #ffffff;
    padding: 10px;
    width: 180px;
    bottom: 0;
    top: 0;
    right: 0;
    position: absolute;
    }
    #bottom {
    border: 1px solid #d4d4d4;
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px;
    font-size: 70%;
    line-height: 14px;
    }
    #top h1, #top p, #menulist {
    margin: 0;
    padding: 0;
    }
    .menuitem {
    background-color: #f1f1f1;
    border: 1px solid #d4d4d4;
    list-style-type: none;
    padding: 2px;
    cursor: pointer;
    }
    .menuitem:hover {
    background-color: #ffffff;
    }
    a{
    color: #000000;
    text-decoration: underline;
    }
    a:hover {
    text-decoration: none;
    }
    @media (max-width: 800px) {
    #sidebar {
    width: auto;
    position: relative;
    }
    #main {
    margin-right: 0;
    }
    }
    @media (max-width: 600px) {
    #menubar {
    width: auto;
    float: none;
    }
    #main {
    margin: 0;
    }
    }
    </style>
    <style>/* Stylesheet 2: */
    body {
    font-family: Arial;
    background-color: #d14836;
    line-height: 20px;
    }
    .container {
    xmin-width: 900px;
    }
    .wrapper {
    position: relative;
    overflow: auto;
    }
    #top {
    color: #ffffff;
    padding: 15px;
    font-size: 30px;
    line-height: 26px;
    }
    #top h1 {
    margin:0;
    line-height: 50px;
    }
    #menubar {
    width: 190px;
    float: right;
    }
    #main {
    padding: 10px;
    background-color: #ffffff;
    font: 80% Verdana;
    }
    #main h1, #main h2 {
    color: #d14836;
    }
    #sidebar {
    background-color: #F6DAD7;
    color: #d14836;
    padding: 10px;
    }
    #bottom {
    text-align: center;
    padding: 10px;
    font-size: 70%;
    color: #ffffff;
    }
    #menulist {
    padding:0;
    font: 16px verdana;
    }
    .menuitem {
    width: 155px;
    background-color: #d14836;
    border: 1px solid #d14836;
    border-radius: 40px;
    color: #ffffff;
    list-style-type: none;
    margin: 10px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    }
    .menuitem:hover {
    background-color: #ffffff;
    color: #d14836;
    }
    a{
    color: #d14836;
    text-decoration: none;
    }
    a:hover {
    text-decoration: underline;
    }
    </style>
    <style>/* Stylesheet 3: */
    body {
    font: 100% Verdana;
    margin: 20px;
    line-height: 26px;
    }
    .container {
    xmin-width: 900px;
    }
    .wrapper {
    position: relative;
    overflow: auto;
    }
    #sidebar {
    background-color: #f1f1f1;
    border: 1px solid #d4d4d4;
    padding-left: 10px;
    }
    #bottom {
    text-align: center;
    padding: 10px;
    font-size: 70%;
    line-height: 14px;
    }
    h1, h2, h3 {
    color: #84c754;
    }
    #menulist {
    padding: 0;
    position: relative;
    overflow: auto;
    }
    .menuitem {
    width: 165px;
    float: left;
    background-color: #555555;
    color: #ffffff;
    list-style-type: none;
    margin: 4px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    }
    .menuitem:hover {
    background-color: #999999;
    }
    a{
    color: #000000;
    }
    a:hover {
    color: #84c754;
    }
    </style>
    <style>/* Stylesheet 4: */
    body {
    font: 100% Courier New;
    margin: 20px;
    line-height: 26px;
    background-color: #000000;
    }
    .container {
    xmin-width: 900px;
    }
    .wrapper {
    position: relative;
    overflow: auto;
    }
    #top {
    color: #84c754;
    padding: 15px;
    }
    #main {
    padding: 10px;
    color: #84c754;
    }
    #sidebar {
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 10px;
    width: 320px;
    top: 0;
    right: 0;
    position: absolute;
    font-size: 80%;
    line-height: 20px;
    }
    #bottom {
    border: 1px solid #ffffff;
    border-radius: 4px;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    font-size: 70%;
    line-height: 14px;
    }
    #top h1,#top p {
    margin: 0;
    }
    .menuitem {
    color: #84c754;
    cursor: pointer;
    }
    .menuitem:hover {
    color: #ffffff;
    }
    a{
    color: #ffffff;
    }
    a:hover {
    color: #84c754;
    }
    @media (max-width: 600px) {
    #sidebar {
    width: auto;
    margin-bottom:10px;
    position: relative;
    }
    }
    </style>
    </head>
    <body>
    <div class="container wrapper">
    <div id="top">
    <h1>Bine ați venit!</h1>
    <p>Folosiți meniul pentru a selecta diferite foi de stil</p>
    </div>
    <div class="wrapper">
    <div id="menubar">
    <ul id="menulist">
    <li class="menuitem" onclick="reStyle(0)">Foaia de stil 1
    <li class="menuitem" onclick="reStyle(1)">Foaia de stil 2
    <li class="menuitem" onclick="reStyle(2)">Foaia de stil 3
    <li class="menuitem" onclick="reStyle(3)">Foaia de stil 4
    <li class="menuitem" onclick="noStyles()">Fără foaie de stil
    </ul>
    </div>
    <div id="main">
    <h1>Aceeași pagină, foi de stil diferite</h1>
    <p>
    Aceasta este o demonstrație a modului în care diferite foi de stil pot modifica aspectul pagin
    Puteți modifica aspectul acestei pagini folosind diverse foi de stil din meniu sau selectând un
    linkuri:<br>
    <a href="#" onclick="reStyle(0);return false">FoaiaDeStil1</a>,
    <a href="#" onclick="reStyle(1);return false">FoaiaDeStil2</a>,
    <a href="#" onclick="reStyle(2);return false">FoaiaDeStil3</a>,
    <a href="#" onclick="reStyle(3);return false">FoaiaDeStil4</a>.
    </p>
    <h2>Fără stiluri</h2>
    <p>
    Această pagină folosește elemente DIV pentru a grupa diferite secțiuni din pagina HTML.
    Apăsați aici pentru a vedea cum arată pagină fără nicio foaie de stil:<br><a href="#" onclick
    false">Fără nicio foaie de stil</a>.
    </p>
    </div>
    <div id="sidebar">
    <h3>Bară laterală</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
    dolore magna aliquam erat volutpat.
    </p>
    </div>
    </div>
    <div id="bottom">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tati
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendre
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et ius
    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    </div>
    </div>
    <script>
    function noStyles() {
    document.styleSheets[0].disabled = true;
    document.styleSheets[1].disabled = true;
    document.styleSheets[2].disabled = true;
    document.styleSheets[3].disabled = true;
    }
    function reStyle(n) {
    noStyles()
    document.styleSheets[n].disabled = false;
    }
    function closeBlackdiv() {
    var blackdiv, stylediv;
    blackdiv = document.getElementById("blackdiv")
    blackdiv.parentNode.removeChild(blackdiv);
    stylediv = document.getElementById("stylediv")
    stylediv.parentNode.removeChild(stylediv);
    }
    function showStyle(n) {
    var div, text, blackdiv;
    blackdiv = document.createElement("DIV");
    blackdiv.setAttribute("style","background-
    color:#000000;position:absolute;width:100%;height:100%;top:0;opacity:0.5;margin-left:-20
    blackdiv.setAttribute("id","blackdiv");
    blackdiv.setAttribute("onclick","closeBlackdiv()");
    document.body.appendChild(blackdiv);
    div = document.createElement("DIV");
    div.setAttribute("id","stylediv");
    div.setAttribute("style","background-color:#ffffff;padding-
    left:5px;position:absolute;width:auto;height:auto;top:100px;bottom:50px;left:200px;right:20
    family: monospace; white-space: pre;line-height:16px;");
    text = document.createTextNode(document.getElementsByTagName("STYLE")[n].innerHT
    div.appendChild(text);
    document.body.appendChild(div);
    //alert(document.getElementsByTagName("STYLE")[n].innerHTML);
    }
    reStyle(0);
    </script>
    </body>
    </html>

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