Un design accativante

« Older   Newer »
 
  Share  
.
  1. • God121
        Like  
     
    .

    User deleted


    Non sapendo cosa fare ho fatto questo design qua.

    Spero vi piaccia, perchè adesso vi spiegherò come crearlo.

    Allora, per farvi un sito così dovete:

    - Creare una pagina index.html

    - Creare una pagina style.css

    - Creare una cartella immagini su altervista

    - Dentro la cartella immagini inserite lio sfondo che volete usare e chiamatelo "sfondo.jpg".

    Ora passiamo ai codici, in index inserite questo:

    CODICE
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>My design</title></head><body>

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


    <div align="center"><div id="box2"><br><b></b></div></div>

    <div id="box1sopra"><br><br><br><br></div>
    <div align="center"><div id="scrittesotto"><br>Chi siamo <font color="#333333">|</font> Contattaci <font color="#333333">|</font> Collabora <font color="#333333">|</font> Copyright © All rights reserved 2010</div></div>




    </body></html>


    In style inserite questo:

    CODICE
    body
    {
       
        background-image: url(immagini/sfondo.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position:  center center;
        background-color: black;
        color:  black;
        font-family: Verdana;  
        font-size: 12px;
    }
    #box1sopra
    {
            margin: -25px;
            width: 1689px;
            heigth: 200px;
            background-color: #F0FFFF;
            border: 1px solid #00ff00;
              box-shadow:5px 5px 25px #666;
            -webkit-box-shadow:5px 5px 25px #666;
            -moz-box-shadow: 5px 5px 25px #666;
            opacity: 0.5;
    }
    #box2
    {
            margin: -35px;
            width: 580px;
            height: 800px;
            border: 2px solid #00ff00;
            background-color: #F0FFFF;
            opacity: 0.3;
            box-shadow:7px 7px 25px #000;
            -webkit-box-shadow:7px 7px 25px #000;
            -moz-box-shadow: 7px 7px 25px #000;
            border-radius: 9px;
            position:absolute;
            left:570px;    
    }
    #box3
    {
            padding: 2px;
            width: 250;
            height: 400;
            border: 1px solid #00ff00;
            background-color: #333333;
            box-shadow:-3px -3px 7px #666;
            -webkit-box-shadow:-3px -3px 7px #666;
            -moz-box-shadow: -3px -3px 7px #666;
            border-radius: 9px;
            position: absolute;
            right:-20;
            top:350;
    }
           

    #scrittesotto
    {
           
            position: absolute;
            top:780px;
            left:605px;
    }
    #posizione
    {      
         
          position:absolute;
          top:775px;
          left:995px;
    }


    I codici css sono tutti commentati, quindi non penso che debba spiegarvi qualcosa.

    Spero vi sia utile, se avete dei problemi chiedete pure.

    Guida by God121
     
    .
0 replies since 5/5/2010, 20:58   363 views
  Share  
.