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

HTML ?abloan responsive gratis pentru website
?ablonul paginii este partea de design grafic care se ocup? de aranjarea elementelor vizuale pe o pagin?.
?ablonul HTML este utilizat pentru a īmbun?t??i paginile web.
Stabile?te aspectul general, importan?a relativ? ?i rela?iile dintre elementele grafice pentru a ob?ine un flux lin de informa?ii ?i mi?care a ochilor pentru eficien?? sau impact maxim.

Informa?ii privind sablonul paginii:
Antet: Partea unui cap?t frontal care este utilizat? īn partea de sus a paginii. Eticheta
este utilizat? pentru a ad?uga sec?iunea antet īn paginile web.
Bara de navigare: Bara de navigare este aceea?i cu lista de meniu. Se utilizeaz? pentru afi?area informa?iilor despre con?inut folosind hyperlink.
Bara lateral? stanga si dreapta: de?ine informa?ii suplimentare sau reclame ?i nu este īntotdeauna necesar s? fie ad?ugate īn pagin?.
Sec?iunea con?inut: sec?iunea con?inut este partea principal? īn care este afi?at con?inutul.
Partea de jos a sablonului: sec?iunea de jos con?ine informa?iile de contact ?i alte interog?ri legate de paginile web. Sec?iunea de subsol pus? īntotdeauna īn partea de jos a paginilor web. Eticheta <footer> este utilizat? pentru a seta subsolul īn paginile web.

Exemplu sablon cu antet, trei coloane si o baza, pentru desktop, tableta si smartphone - mobile.

  

<!doctype html>
<html>
<head>
<style>
body {
margin: 0px;
}
a {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #006699;
text-decoration: none;
}
h1 {
font-size: 18px;
color: #255392;
}
h2, h3, h4 {
font-size: 16px;
color: #3194C4;
}
.header-top {
height: 20px;
background-color: #CCCCCC;
box-sizing: border-box;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 8px;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
width: 99%;
}
.top{
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #F8F8F8;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 4px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
font-size: 20px;
padding-top: 6px;
font-weight: bold;
}
.header{
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #FFFFCC;
color: #666666;
font-family: Verdana, Geneva, sans-serif;
margin-top: 0px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
margin-bottom: 0px;
}
.header-menu {
height: 28px;
background-color: #CCCCCC;
box-sizing: border-box;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 8px;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
width: 99%;
font-size: 20px;
font-weight: bold;
color: #333333;
}
.main {
display: flex;
min-height: calc(100vh - 40vh);
width: 99%;
margin-right: auto;
margin-left: auto;
}
.article {
flex: 1;
margin-top: 12px;
margin-left: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #333333;
background-color: #B3E7FF;
font-weight: bold;
}
.left {
order: -1;
width: 200px;
float: left;
padding: 6px;
background-color: #F2F2F2;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #333;
margin-top: 12px;
margin-left: 2px;
margin-right: 12px;
font-weight: bold;
}
.right {
width: 220px;
float: right;
background-color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #0070DF;
box-sizing: border-box;
margin-left: 16px;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
margin-top: 12px;
font-weight: bold;
}
.right-bottom {
display: none;
}

.footer {
height: 60px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #F4F4F4;
margin-bottom: 4px;
padding-top: 8px;
text-align: center;
margin-top: 12px;
font-size: 20px;
font-weight: bold;
color: #333333;
}
.left-foot {
display: none;
}
.right-foot {
display: none;
}
@media (max-width:1100px){
.right-bottom {
display: none;
}
}
@media (max-width:920px){
.right {
display: none;
}
.left-foot {
display: none;
}
.right-foot {
display: block;
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #CCCCCC;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 4px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
font-size: 12px;
padding-top: 6px;
margin-top: 18px;

}
}
@media (max-width:650px){
.left {
display: none;
}
.left-foot {
display: block;
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #F2F2F2;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 4px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
font-size: 12px;
padding-top: 6px;
margin-top: 18px;
}
.right-foot {
display: block;
height: 70px;
width: 99%;
margin-right: auto;
margin-left: auto;
background-color: #CCCCCC;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 4px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 2px;
font-size: 12px;
padding-top: 6px;
margin-top: 18px;
}
}
</style>

</head>
<body>
<div class="header-top">
header top
</div>
<div class="top">
top
</div>
<div class="header-menu">
header-menu
<!-- end #header-menu-mob --></div>
<div class="main">
<div class="left"> left </div>
<div class="article"> article </div>
<div class="right"> right </div>
</div>
<div class="left-foot"> left-foot </div>
<div class="right-foot"> right-foot </div>
<div class="footer"> footer </div>

</body>
</html>

Tags: Sabloane, site HTML, responsive, gratis, simplu, exemple,

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.


analytics piwika