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.