Embedded Files
LV 20. CSS izgled stranice (max-width, overflow, float, inline-block, align)
Petar Lovaković i Filip Marangunić 3.A
Priprema
1. Osnovna razlika između inline i block-level elemenata je u njihovom ponašanju u odnosu na raspored elemenata na stranici. Inline elementi se prikazuju jedan pored drugog u istom redu, dok block-level elementi zauzimaju cijeli dostupni prostor po širini i automatski se prikazuju jedan ispod drugog.
2. Padding je prostor između sadržaja elementa i njegove granice (bordera). Margina je prostor između granice elementa i drugih elemenata u okolini.
Vjezba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parice za mreže</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Parice za mreže</h1>
<nav>
<ul>
<li><a href="#ftp">FTP</a></li>
<li><a href="#stp">STP</a></li>
<li><a href="#utp">UTP</a></li>
<li><a href="#coax">Coaxial</a></li>
</ul>
</nav>
</header>
<main>
<section id="ftp">
<h2>FTP (Foil Twisted Pair)</h2>
<p>To je neovisno zaštićeni uvijeni kabel za parove. Jezgra konstrukcije ima sloj aluminijske folije, a svaki par žica ima sloj za zaštitu od aluminijske folije, što ima učinak smanjenja prigušenja signala.</p>
<img src="ftp.jpg" alt="FTP kabel">
</section>
<section id="stp">
<h2>STP (Shielded Twisted Pair)</h2>
<p>To je neovisno zaštićeni uvijeni kabel za parove. Jezgra konstrukcije ima sloj aluminijske folije, a svaki par žica ima sloj za zaštitu od aluminijske folije, što ima učinak smanjenja prigušenja signala.</p>
<img src="stp.jpg" alt="STP kabel">
</section>
<section id="utp">
<h2>UTP (Unshielded Twisted Pair)</h2>
<p>Nezašiljeni uvijeni par je najčešće korištena mrežna žica na tržištu. Može se koristiti u običnim mrežnim okruženjima bez posebnih zahtjeva i može prenositi propusnost ispod 250MHz.</p>
<img src="utp.jpg" alt="UTP kabel">
</section>
<section id="coax">
<h2>Koaksijalni</h2>
<p>izvedba električnog kabela kod koje je jedan vodič smješten unutar drugog šupljeg vodiča tako da oba imaju zajedničku os.</p>
<img src="koa.jpg" alt="Coaxial kabel">
</section>
</main>
<footer>
<p>Ovo su bili mrežni kablovi</p>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
header {
background-color: #007bff;
color: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 40px;
}
section:nth-child(odd) {
flex-direction: row-reverse;
}
h2, p {
width: 50%;
color: #007bff;
}
img {
width: 40%;
margin: 0 20px;
}
footer {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 20px;
}
Page updated
Google Sites
Report abuse