Praktyczne projekty w CSS

Zadanie 1. Wykonaj trzy szablony stron.Szablon 1.

LINKI TREŚĆ
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<title>Wygląd 1</title>
<link href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css'>
<style lang="text/css">
h1 {
	font-family: Verdana;
	font-size: 14px;
	text-decoration: underline;
}
h2 {
	font-family: "Times New Roman", Times;
	font-size: 11px;
}
h6 {
	font-family: Arial;
	font-size: 6px;
	text-align: center;
}
body {
	background: #FEDCBA;
}
p {
	text-align: justify;
}
p.klasa1 {
	display: block;
	background: #FF0;
	font-family: Courier;
	margin: 50px;
	border: 1px solid grey;
	padding-left: 10px;
}
code {
	font-family: "Courier New";
	font-size: 18px;
	font-weight: bold;
}
.koniec {
	font-family: "Monotype Corsiva", Corsiva, Arial;
	font-size: 24px;
	text-align: center;
	font-decoration: underline;
	color: #FF0FF0;
}
.klasa2 {
	margin: 5px 10px 15px 20px;
	border: 1px solid #ff0ff0;
	background: #fff;
	text-indent: 15px;
}
.intro {
	font-family: 'Sofadi One', cursive;
	font-size: 36px;
}
.intro2 {
	font-family: 'Sofadi One', cursive;
	font-size: 18px;
}
.linki {
	text-align: right;
	padding-right: 30px;
	font-style: oblique;
}
.linki a:link {
	color: #000;
	text-decoration: none;
}
</style>
</head>
<body>
<table align='center' width='95%'>
<thead>
	<tr>
		<td colspan='2' align='center'>
			<text class='intro'>Wie geht's?</text><br />
			<text class='intro2'>Ich heiße Przemek. Mir geht es gut.</text>
		</td>
	</tr>
</thead>
<tbody>
	<tr>
		<td width='25%' valign='top' class="linki">
			<a href="http://zeszyt.jedlikowski.com">Zeszyt ucznia &raquo;</a><br />
			<a href="http://www.wp.pl">Wirtualna Polska &raquo;</a>
		</td>
		<td>
			<h1>To jest nagłówek pierwszego poziomu.</h1>
			<h2>To jest nagłówek drugiego poziomu.</h2>
			<h6>To jest nagłówek szóstego poziomu.</h6>
			<p class="klasa2">To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf.</p>
			<hr width="80%">
			<p class='klasa1'>To jest paragraf klasy <code>klasa1</code></p>
			<div style="background: #000FF0; color: #FFFFFF;">To jest element blokowy.</div>
		</td>
	</tr>
</tbody>
<tfoot>
<tr>
	<td colspan='2'>
		<p class='koniec'>А это конец страницы.</p>
	</td>
</tr>
</tfoot>
</table>
</body>
</html>

 

Szablon 2.

Nagłówek
Treść
Stopka
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<title>Wygląd 2</title>
<link href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css'>
<style lang="text/css">
h1 {
	font-family: Verdana;
	font-size: 14px;
	text-decoration: underline;
}
h2 {
	font-family: "Times New Roman", Times;
	font-size: 11px;
}
h6 {
	font-family: Arial;
	font-size: 6px;
	text-align: center;
}
body {
	background: #FEDCBA;
}
p {
	text-align: justify;
}
p.klasa1 {
	display: block;
	background: #FF0;
	font-family: Courier;
	margin: 50px;
	border: 1px solid grey;
	padding-left: 10px;
}
code {
	font-family: "Courier New";
	font-size: 18px;
	font-weight: bold;
}
.koniec {
	font-family: "Monotype Corsiva", Corsiva, Arial;
	font-size: 24px;
	text-align: center;
	font-decoration: underline;
	color: #FF0FF0;
}
.klasa2 {
	margin: 5px 10px 15px 20px;
	border: 1px solid #ff0ff0;
	background: #fff;
	text-indent: 15px;
}
.intro {
	font-family: 'Sofadi One', cursive;
	font-size: 36px;
}
.intro2 {
	font-family: 'Sofadi One', cursive;
	font-size: 18px;
}
.linki {
	font-style: oblique;
	text-align: center;
}
.linki a:link {
	color: #000;
	text-decoration: none;
}
</style>
</head>
<body>
<table align='center' width='95%'>
<thead>
	<tr>
		<td align='center'>
			<text class='intro'>Wie geht's?</text><br />
			<text class='intro2'>Ich heiße Przemek. Mir geht es gut.</text>
		</td>
	</tr>
	<tr height="50px">
		<td valign='middle' class="linki">
			<a href="http://zeszyt.jedlikowski.com">Zeszyt ucznia &raquo;</a> | <a href="http://www.wp.pl">Wirtualna Polska &raquo;</a>
		</td>
	</tr>
</thead>
<tbody>
	<tr>
		<td>
			<h1>To jest nagłówek pierwszego poziomu.</h1>
			<h2>To jest nagłówek drugiego poziomu.</h2>
			<h6>To jest nagłówek szóstego poziomu.</h6>
			<p class="klasa2">To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf.</p>
			<hr width="80%">
			<p class='klasa1'>To jest paragraf klasy <code>klasa1</code></p>
			<div style="background: #000FF0; color: #FFFFFF;">To jest element blokowy.</div>
		</td>
	</tr>
</tbody>
<tfoot>
<tr>
	<td colspan='2'>
		<p class='koniec'>А это конец страницы.</p>
	</td>
</tr>
</tfoot>
</table>
</body>
</html>

Szablon 3.

Lewa
Nagłówek
Linki jakieś?
Treść
Stopka
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<title>Wygląd 3</title>
<link href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css'>
<style lang="text/css">
h1 {
	font-family: Verdana;
	font-size: 14px;
	text-decoration: underline;
}
h2 {
	font-family: "Times New Roman", Times;
	font-size: 11px;
}
h6 {
	font-family: Arial;
	font-size: 6px;
	text-align: center;
}
body {
	background: #FEDCBA;
}
p {
	text-align: justify;
}
p.klasa1 {
	display: block;
	background: #FF0;
	font-family: Courier;
	margin: 50px;
	border: 1px solid grey;
	padding-left: 10px;
}
code {
	font-family: "Courier New";
	font-size: 18px;
	font-weight: bold;
}
.koniec {
	font-family: "Monotype Corsiva", Corsiva, Arial;
	font-size: 24px;
	text-align: center;
	font-decoration: underline;
	color: #FF0FF0;
}
.klasa2 {
	margin: 5px 10px 15px 20px;
	border: 1px solid #ff0ff0;
	background: #fff;
	text-indent: 15px;
}
.intro {
	font-family: 'Sofadi One', cursive;
	font-size: 36px;
}
.intro2 {
	font-family: 'Sofadi One', cursive;
	font-size: 18px;
}
.linki {
	font-style: oblique;
	text-align: center;
}
.linki a:link {
	color: #000;
	text-decoration: none;
}
</style>
</head>
<body>
<table align='center' width='95%'>
	<tr>
		<td valign='top' class="linki" width="25%" rowspan='4'>
			<a href="http://zeszyt.jedlikowski.com">Zeszyt ucznia &raquo;</a><br /><a href="http://www.wp.pl">Wirtualna Polska &raquo;</a>
		</td>
	</tr>
	<tr>
		<td align='center'>
			<text class='intro'>Wie geht's?</text><br />
			<text class='intro2'>Ich heiße Przemek. Mir geht es gut.</text>
		</td>
	</tr>
	<tr>
		<td align="center">
			<hr width="97%" />
		</td>
	</tr>
	<tr>
		<td>
			<h1>To jest nagłówek pierwszego poziomu.</h1>
			<h2>To jest nagłówek drugiego poziomu.</h2>
			<h6>To jest nagłówek szóstego poziomu.</h6>
			<p class="klasa2">To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf.</p>
			<hr width="80%">
			<p class='klasa1'>To jest paragraf klasy <code>klasa1</code></p>
			<div style="background: #000FF0; color: #FFFFFF;">To jest element blokowy.</div>
		</td>
	</tr>
	<tr>
		<td colspan='2'>
			<p class='koniec'>А это конец страницы.</p>
		</td>
	</tr>
</table>
</body>
</html>

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.