Sabloane site HTML responsive gratis simplu, exemple.
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>
- strpos()
- str_word_count()
- strlen()
- substr()
- trim()
- str_replace()
- strip_tags()
- htmlspecialchars_decode()
- htmlspecialchars()
- implode()
- explode()
- Vertical CSS Menu Navigation...
- Horizontal CSS Navigation Bar...
- Layout - three responsive columns, heade...
- Gaming Templates...
- Fashion Templates...
- Beauty Templates...
- Health Templates...
- News Paper Templates...
- Magazine Templates...
- Blog Templates...
- Travel & Turism...
- Restaurants & Food...
- Design HTML CSS Templates...
- Business Templates...
- CSS Table Border...
- CSS Table...