Drukuj stronę - Prosty layout strony zbudowanej z div

1. StworzyĂŚ stronĂŞ zbudowanÂą na div'ach i formatowanÂą w css. Strona posiada nagÂłĂłwek, trzy kolumny i stopkĂŞ.

Kod HTML (w kodzie Html jak widac niewiele jest)

<html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<link href="standard.css" type="text/css" rel="stylesheet">
<title> Layout_strony</title>
</head>
<body>
<div id="tlo">

            <div class="naglowek">
            NagÂłĂłwek
            </div>
            <div class="lewy">
            <p>format lewy</p>
            </div>

            <div class="srodek">
            ÂŚrodek strony
            </div>

            <div class="prawy">
            <p>kolumna prawa</p>
            </div>

            <div class="stopka">
            <p>Obszar formatowany w css, klasy stopka"</p>
            </div>
</div>
<body>
<html>

2. Kod CSS (plik nazywa siĂŞ standard.css i odwoÂłanie do niego musi byĂŚ umieszczone w kodzie html)

#tlo{
width: 700px;
height:800px;
background: #0000ff;
padding: 0px;
border:0px solid #000;
}
.naglowek{
width:700px;
height:80px;
right:10px;
bottom:250px;
background-image:url(z1.jpg);
background-repeat:no-repeat;
margin: 0px;
padding:0px;
border: 0px solid #FF0000;
text-align: center;
color: #00ff00;
font-size: 40;

}
.srodek {
width:80%;
height:80%;
float:left;
margin: 0px;
padding:0px;
border: 0px solid #FFAAAA;
background: #FFAAAF;
text-align: center;
color: rgb(0,0,255);
font-size:35;

}

.lewy {
width:10%;
height:80%;
float:left;
margin: 0px;
padding:0px;
border: 0px solid #FFAAAA;
background: #11AAAF;
color: rgb(0,0,255);
font-size:15;

}
.prawy {
width:10%;
height:80%;
float: right;
margin: 0px;
padding:0;
border: 0px solid #FFAA00;
background: #BBBBAF;
}
.stopka{
width:100%;
height:80px;
overflow:auto;
margin: 0px;
padding:0px;
border: 0px solid #FF0000;
background: #AFFfFF;
text-align: right;
}

PrzykÂład 3. Strona internetowa, w ktĂłrej pojawia siĂŞ okienko. Okienko jest nadpisane nad pozostaÂłe div-y. Efekt uzyskano przez wprowadzenie pozycjonowania absolutnego (bezwzglĂŞdnego) w pliku css (patrz klasa .luzak, polecenie position:absolute;). Dzieki adresowaniu bezwzglĂŞdnemu moÂżna zbudowaĂŚ stronĂŞ bez koniecznoÂści zagnieÂżdÂżania div-Ăłw jeden w drugim. Wymaga to jednak cierpliwoÂści i trochĂŞ liczenia. ProszĂŞ zwrĂłciĂŚ uwagĂŞ, w pliku standard1.css, w klasie .stopka umieÂściÂłem polecenie overflow:auto;pozwala automatycznie dopasowaĂŚ rozmiar okienka do zawartoÂści i dostĂŞpnego obszaru, bardzo uÂłatwia pracĂŞ przy wykoĂączeniu stron, nie widaĂŚ tÂła.

Plik HTML

<html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<link href="standard1.css" type="text/css" rel="stylesheet">
<title> Layout_strony</title>
</head>
<body>
<div id="tlo">

            <div class="naglowek">
            NagÂłĂłwek
            </div>
            <div class="lewy">
            <p>format lewy</p>
            </div>

            <div class="srodek">
            ÂŚrodek strony
            </div>

            <div class="prawy">
            <p>kolumna prawa</p>
            </div>

            <div class="stopka">
            <p>Obszar formatowany w css, klasy stopka"</p>
            </div>
</div>
<div class="luzak">
Okienko umieszczone w dowolnym miejscu
</div>
<body>
<html>

Plik standard1.css

#tlo{
width: 700px;
height:800px;
background: #0000ff;
padding: 0px;
border:0px solid #000;
}
.luzak{
background: #aaAAAF;
position:absolute;
top: 120 px;
left: 50px;
right:550px;
bottom:350px;
color:ff0000;}

.naglowek{
width:700px;
background-image:url(z1.jpg);
background-repeat:no-repeat;
margin: 0px;
padding:0px;
border: 0px solid #FF0000;
text-align: center;
color: #00ff00;
font-size: 40;

}
.srodek {
width:80%;
height:80%;
float:left;
margin: 0px;
padding:0px;
border: 0px solid #FFAAAA;
background: #FFAAAF;
text-align: center;
color: rgb(0,0,255);
font-size:35;

}

.lewy {
width:10%;
height:80%;
float:left;
margin: 0px;
padding:0px;
border: 0px solid #FFAAAA;
background: #11AAAF;
color: rgb(0,0,255);
font-size:15;

}
.prawy {
width:10%;
height:80%;
float: right;
margin: 0px;
padding:0;
border: 0px solid #FFAA00;
background: #BBBBAF;
}
.stopka{
width:100%;
height:120px;
overflow:auto;
margin: 0px;
padding:0px;
border: 0px solid #FF0000;
background: #AFFfFF;
text-align: right;
}

Darmowe Forum

E14 => DIV => Wątek zaczęty przez: admin Wrzesień 08, 2016, 16:09:13