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.
Antet: Partea unui capăt frontal care este utilizată în partea de sus a paginii. Eticheta
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>
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.