AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

HTML Șabloane gratis pentru site
Ce este un - Șablon -?
Șablon HTML este o baza sau chiar scheletul de la care se porneste un website.
Aspectele sunt foarte importante pentru orice site web. O dispunere corectă va oferi un aspect mai bun paginii dvs. de web și, de asemenea, aspectul dvs. ar trebui să fie mobil prietenos (receptiv).

Exemplu sablon cu antet, doua coloane si o baza fluide.

  

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

/* Style antet*/
header {
background-color: #666;
padding: 10px;
text-align: left;
font-size: 28px;
color: white;
height: 80px;
}

/* Creați două coloane / căsuțe fluide unul lângă celălalt */
nav {
float: left;
width: 30%;
height: 300px; /* numai pentru demonstrație, trebuie îndepărtat */
background: #ccc;
padding: 20px;
color: #006699;
text-decoration: none;
font-weight: bold;
}

/* Style lista din meniu */
nav ul {
list-style-type: none;
padding: 0;
line-height: 22px;
text-decoration: none;
color: #006699;
}

article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* numai pentru demonstrație, trebuie îndepărtat */
}

/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}

/* footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}

@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>

<header>
Numele site-ului web <br />
<span style="color:#990033; font-size:14px; font:"Courier New", Courier, monospace"><strong>Model sablon HTML gratis, free download</strong></span></header>

<section>
<nav>
HTML Links
<ul>
<li><a href="https://www.agernic.com/ro/html/paragraf-exemple.php">HTML Paragraf Exemple</a></li>
<li><a href="https://www.agernic.com/ro/html/comentarii.php">Comentarii in HTML Exemple</a></li>
<li><a href="https://www.agernic.com/ro/html/images.php">HTML Imagini</a></li>

<li><a href="https://www.agernic.com/ro/html/form.php">HTML Form</a></li>
<li><a href="https://www.agernic.com/ro/html/buton-onclick-link.php">HTML Buton Onclick Link</a></li>
<li><a href="https://www.agernic.com/ro/html/div-tag.php">HTML Div</a></li>

</ul>

</nav>

<article>
<h2> HTML Layout exemple gratis</h2>
<p> În acest sablon exemplu, am creat un antet, două coloane / cutii și o baza. Pe ecranele mai mici, coloanele se vor stivui una peste alta. </p>
<h3>Sabloane HTML exemple responsive</h3>
<p> Redimensionați fereastra browserului pentru a vedea efectul receptiv (veți afla mai multe despre acest lucru în capitolul următor - HTML Responsive.) </p>
</article>
</section>

<footer>
<p>Footer</p>
</footer>

</body>
</html>

Tags: HTML Șabloane, gratis, site responsive

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.