Cum se poate face un layout usor si simplu ? ( + cod html)
Răspunsuri la întrebare
Răspuns de
0
Recomand html5, dar o sa folosesc ceva cat mai simplu de inteles...
Vezi ca am atasat un fisier cu un screenshot la pagina si altul la cod
Structurarea s-ar face asa:
+------------------------------------------------+
| Titlul paginii |
+------------------------------------------------+
//////////////////Meniu////////////////////////
+-----------------------------------------------+
| pagina |
| pagina |
| pagina |
+-----------------------------------------------+
si tot asta pus intr-un div mai mare de latimea 960px
CODUL:
<html>
<head>
<title>Pagina mea</title>
</head>
<body style="background:#3498db;margin:0;">
<div style="width:960px;margin:auto;background:#ecf0f1;">
<div style="padding:5px;text-align:center;font-size:50px;font-family:cursive,sans-serif;">
Titlul paginii
</div>
<div style="background:#2980b9;height:40px;line-height:40px;color:white;">
<a href="pagina.html" style="color:white;font-size:25px;display:block;height:40px;float:left;width:130px;text-align:center;">Acasa</a>
<a href="pagina.html" style="color:white;font-size:25px;display:block;height:40px;float:left;width:130px;text-align:center;">Detalii</a>
<a href="pagina.html" style="color:white;font-size:25px;display:block;height:40px;float:left;width:130px;text-align:center;">Altele</a>
</div>
<div style="padding:30px;">
<h2>Titlul paginii</h2>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
</div>
</div>
</body>
</html>
Vezi ca am atasat un fisier cu un screenshot la pagina si altul la cod
Structurarea s-ar face asa:
+------------------------------------------------+
| Titlul paginii |
+------------------------------------------------+
//////////////////Meniu////////////////////////
+-----------------------------------------------+
| pagina |
| pagina |
| pagina |
+-----------------------------------------------+
si tot asta pus intr-un div mai mare de latimea 960px
CODUL:
<html>
<head>
<title>Pagina mea</title>
</head>
<body style="background:#3498db;margin:0;">
<div style="width:960px;margin:auto;background:#ecf0f1;">
<div style="padding:5px;text-align:center;font-size:50px;font-family:cursive,sans-serif;">
Titlul paginii
</div>
<div style="background:#2980b9;height:40px;line-height:40px;color:white;">
<a href="pagina.html" style="color:white;font-size:25px;display:block;height:40px;float:left;width:130px;text-align:center;">Acasa</a>
<a href="pagina.html" style="color:white;font-size:25px;display:block;height:40px;float:left;width:130px;text-align:center;">Detalii</a>
<a href="pagina.html" style="color:white;font-size:25px;display:block;height:40px;float:left;width:130px;text-align:center;">Altele</a>
</div>
<div style="padding:30px;">
<h2>Titlul paginii</h2>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
<p>Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... Paragraf cu text pentru exemplu... </p>
</div>
</div>
</body>
</html>
Anexe:
Alte întrebări interesante
Limba română,
8 ani în urmă
Limba română,
8 ani în urmă
Limba română,
8 ani în urmă
Limba română,
9 ani în urmă
Matematică,
9 ani în urmă
Fizică,
9 ani în urmă
Matematică,
9 ani în urmă