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 lo 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
