Ladda ner presentationen
Presentation laddar. Vänta.
1
Introduktion till CSS CSS1 - EXEMPEL
2
Denna webbsida vill vi kopiera och förbättra
3
Grundstruktur
4
<body> <div id="container"> <div id="content2"> <div id="left"></div> <div id="right"> </div> </body>
5
Ungefär så här
6
BODY body { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px; font-style: normal; font-weight: normal; text-align:center; background: #B0BFC2; color:#444 }
7
container #container { text-align:left; width: 816px; height: 522px;
background-color: #222; background-repeat: no-repeat; background-position: center; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border: 2px solid #6699FF; }
8
content2 #content2{ height: 484px; width: 774px; margin-top: 19px;
margin-right: 21px; margin-bottom: 19px; margin-left: 21px; background-color: #444; }
9
left #left { background-color: #666; height: 478px; width: 152px;
margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; float: left; }
10
right #right{ background-color: #888; height: 478px; width: 560px;
margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 32px; float: left; }
12
<body> <div id="container"> <div id="content2"> <div id="left"> </div> <div id="right"> <div id="head"> <div id="content"> <div id="foot"> </body>
13
head #head{ background-color: #259; height: 50px; width: 560px;
padding: 0px; }
14
content #content{ background-color: #592; height: 399px; width: 560px;
}
15
foot #foot{ background-color: #925; height: 35px; width: 560px;
text-align: center; /*padding-top:5px;*/ }
16
Med bilder inplockade
17
Rubriken i head #head h1{
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt; color: #666699; background-color: #FFFFFF; margin-top: 0px; margin-right: 0px; margin-left: 0px; /*padding-top: 10px;*/ padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }
18
Foot - länkar #foot p{ text-align: center; } #foot a{
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #666699; text-decoration: none; font-weight: bold; margin-top:0px; margin-top: 5px;
19
Mer syling på länkar #foot a hoover{color: #A00;}
#foot a:link, A:visited, A:active { text-decoration: none; color:#669; }
21
Bakgrundsfärger vitt
Liknande presentationer
