2024-01-31 00:36:38 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="cs">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<link rel="stylesheet" href="styleTest.css" />
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h2>Span -> Inline element - neutrální řádkový element</h2>
|
|
|
|
|
<span style="border: 3px solid red">Test1</span
|
|
|
|
|
><span style="border: 3px solid red">Test2</span
|
|
|
|
|
><span style="border: 3px solid red">Test3</span>
|
|
|
|
|
<h2>Div -> neutrální blokový element</h2>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="width: 150px; height: 150px">
|
|
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut atque nam
|
|
|
|
|
non vero, possimus voluptas explicabo. Iusto non tempore commodi tenetur
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="width: 200px; height: 200px">
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quae
|
|
|
|
|
natus esse consequatur quaerat ducimus earum eaque corporis cumque animi
|
|
|
|
|
ipsum minima deleniti, possimus cum impedit blanditiis,
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h2>Inline elementy</h2>
|
|
|
|
|
<p>
|
|
|
|
|
<strong>Město Brno</strong> je počtem obyvatel i rozlohou
|
|
|
|
|
<em>druhé největší</em> město v České republice,
|
|
|
|
|
<em>největší město</em> na Moravě a <em>bývalé hlavní město</em> Moravy.
|
|
|
|
|
</p>
|
|
|
|
|
<h2>Použití Inline blocky</h2>
|
|
|
|
|
<ul>
|
|
|
|
|
<li style="border: 1px solid red">Item 1</li>
|
|
|
|
|
<li style="display: inline-block; border: 1px solid red">Item 2</li>
|
|
|
|
|
<li style="display: inline-block; border: 1px solid red">Item 3</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul>
|
|
|
|
|
<li style="display: inline-block; border: 1px solid red">Item 1</li>
|
|
|
|
|
<li style="display: inline-block; border: 1px solid red">Item 2</li>
|
|
|
|
|
<li style="display: inline-block; border: 1px solid red">Item 3</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul>
|
|
|
|
|
<li
|
|
|
|
|
style="
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
border: 1px solid red;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
Item 1
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
style="
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
border: 1px solid red;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
Item 2
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
style="
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
border: 1px solid red;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
Item 3
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<h2>Tlačtko -> odkaz</h2>
|
|
|
|
|
<a
|
|
|
|
|
href="https://lukan.cz/"
|
|
|
|
|
target="_blank"
|
|
|
|
|
style="border: 1px solid royalblue"
|
|
|
|
|
>Odkaz</a
|
|
|
|
|
>
|
|
|
|
|
<a
|
|
|
|
|
href="https://lukan.cz/"
|
|
|
|
|
target="_blank"
|
|
|
|
|
style="
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
border: 1px solid red;
|
|
|
|
|
"
|
|
|
|
|
>Odkaz</a
|
|
|
|
|
>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<h1>Article Title</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>Introductory paragraph.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<h2>Section Title</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>Section content.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Aside Title</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>Aside content.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<h2>Another Section Title</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>Another section content.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>List item 1</li>
|
|
|
|
|
<li>List item 2</li>
|
|
|
|
|
<li>
|
|
|
|
|
List item 3
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Subitem 3.1</li>
|
|
|
|
|
<li>Subitem 3.2</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>Copyright information.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
