Darmowe Forum
Maj 19, 2024, 16:30:15
Witamy,
Gość
.
Zaloguj się
lub
zarejestruj
.
Czy dotarł do Ciebie
email aktywacyjny?
1 Godzina
1 Dzień
1 Tydzień
1 Miesiąc
Zawsze
Zaloguj się podając nazwę użytkownika, hasło i długość sesji
Aktualności
: Forum zostało uruchomione!
Strona główna
Pomoc
Zaloguj się
Rejestracja
Darmowe Forum
>
E14
>
DIV
>
Prosty layout strony zbudowanej z div
Strony: [
1
]
« poprzedni
następny »
Drukuj
Autor
Wątek: Prosty layout strony zbudowanej z div (Przeczytany 1697 razy)
admin
Administrator
Ekspert
Wiadomości: 821
Prosty layout strony zbudowanej z div
«
:
Wrzesień 08, 2016, 16:09:13 »
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;
}
«
Ostatnia zmiana: Wrzesień 09, 2016, 03:10:41 wysłane przez admin
»
Zapisane
admin
Administrator
Ekspert
Wiadomości: 821
Odp: Prosty layout strony zbudowanej z div
«
Odpowiedz #1 :
Wrzesień 09, 2016, 03:37:41 »
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;
}
Zapisane
admin
Administrator
Ekspert
Wiadomości: 821
Odp: Prosty layout strony zbudowanej z div
«
Odpowiedz #2 :
Wrzesień 09, 2016, 07:55:45 »
Zadanie 4.
Napisać kod strony składającej się z pól jak poprzednim przykładzie (nagłówek, lewy, środek, prawy i stopka). Ale... środek ma być podzielony na połowę (poziomo). Tło górnej części ma być białe, tło dolnej części ma być czerwone.
Zapisane
Strony: [
1
]
Drukuj
« poprzedni
następny »
Skocz do:
Wybierz cel:
-----------------------------
Zadanie C++ lutego -Agnieszka
-----------------------------
=> Nowy dział
=> Zadanie
-----------------------------
E14
-----------------------------
=> DIV
=> Java Script
=> php
-----------------------------
Dla Magdy i Wojtka
-----------------------------
=> Liczby dwójkowe
-----------------------------
Przykłady stron internetowych
-----------------------------
=> Strona zbudowana z tabelek
-----------------------------
Podstawy PHP
-----------------------------
=> Przesyłanie danych z formularza php
=> Pętle w php
-----------------------------
Java Script
-----------------------------
=> Java Script
-----------------------------
C++ Nowe rozdanie
-----------------------------
=> C++
-----------------------------
Java JDK
-----------------------------
=> Java ale nie Script
-----------------------------
Hyde Park
-----------------------------
=> Informacje
-----------------------------
C+++
-----------------------------
=> A Kuba powiedział
-----------------------------
Multimedia
-----------------------------
=> Photoshop
=> Nowy dział
=> Java Script
=> Corel
-----------------------------
Html-strony internetowe
-----------------------------
=> Podstawy HTML- ramki/ frames
=> Podstawy HTML- tabelki
-----------------------------
C++
-----------------------------
=> Podstawy C++ cz. I
=> Kompilatory C++
=> Programowanie obiektowe w C++
=> Problem w C++
=> Podstawy
=> C++ po raz pierwszy
-----------------------------
Turbo Pascal
-----------------------------
=> Turbo Pascal semestr II
=> Projekt AŚKA
=> Turbo Pascal semestr I
=> Podstawy Turbo Pascal
Ładowanie...
Polityka cookies
Darmowe Fora
|
Darmowe Forum
storylife
pracadlazbrojarza
x-cry
czesnorad
gangem