Aspectul (layout) unui site web în CSS
Site-urile web sunt împărțite de obicei în secțiuni: un antet (header), un meniu de navigare, o zonă de conținut principal și un subsol (footer).
Această structură cu antet, navigare, conținut și subsol este una dintre cele mai comune, deși există multe alte modele de aspect.
Antetul (Header) CSS
Plasat în majoritatea cazurilor în partea de sus a unui site, antetul conține de obicei un logo sau numele site-ului.
Exemplu
Prompt
Creează o pagină cu un element header stilizat cu un fundal gri deschis (#f1f1f1), text centrat și padding de 10px. Header-ul ar trebui să conțină un h1 cu textul "My Header".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Header Styling</title>
<style>
header {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>My Header</h1>
</header>
</body>
</html>
Bara de navigare CSS
Vizitatorii se orientează pe site-ul tău web cu ajutorul unei bare de navigare, care conține o listă de linkuri.
Exemplu
Prompt
Creează o pagină cu o bară de navigare orizontală folosind o listă neordonată cu clasa "topnav". Folosește flexbox pentru a afișa elementele orizontal. Bara de navigare ar trebui să aibă un fundal închis (#333333) cu link-uri de culoare deschisă (#f1f1f1), padding de 14px 16px, fără subliniere și un efect hover care schimbă fundalul în gri deschis (#dddddd) și textul în negru. Include patru link-uri: Link1, Link2, Link3, Link4.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Navigation Bar</title>
<style>
ul.topnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
}
ul.topnav li a {
display: block;
color: #f1f1f1;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover {
background-color: #dddddd;
color: black;
}
</style>
</head>
<body>
<ul class="topnav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</body>
</html>
Conținutul aspectului CSS
Dispozitivul folosit determină adesea modul în care este afișat conținutul unui site web. Aceste aspecte sunt cele mai comune:
- aspect pe 1 coloană - întâlnit adesea în browserele mobile
- aspect pe 2 coloane - întâlnit adesea pe tablete și laptopuri
- aspect pe 3 coloane - doar pentru desktop-uri
În exemplul de mai jos, trei coloane se restrâng într-una singură când ecranul este mai îngust de 600px.
Sfat: Capitolul CSS Media Queries explică mai detaliat regula CSS @media.
Sfat: Capitolul CSS Flexbox explică mai detaliat CSS Flexbox.
Exemplu
Prompt
Creează o pagină cu un layout pe 3 coloane folosind flexbox. Fiecare coloană ar trebui să aibă un titlu "Column" și un paragraf de text lorem ipsum. Folosește un media query astfel încât atunci când lățimea ecranului este mai mică de 600px, coloanele se stivuiesc vertical. Fiecare coloană ar trebui să aibă un margin de 10px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Three Column Layout</title>
<style>
div.flex-container {
display: flex;
flex-direction: row;
}
div.flex-container > div {
margin: 10px;
}
@media screen and (max-width: 600px) {
div.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
</div>
<div>
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
</div>
<div>
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
</div>
</div>
</body>
</html>
Subsol de bază și fix în CSS
În partea de jos a unei pagini web se află subsolul, care conține de obicei detalii precum drepturile de autor și datele de contact.
Subsol de bază
Un stil simplu de subsol arată astfel.
Prompt
Creează o pagină cu ceva conținut și un element footer în partea de jos. Footer-ul ar trebui să aibă un fundal gri deschis (#f1f1f1), text centrat, padding de 8px și să afișeze textul "Footer".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basic Footer</title>
<style>
footer {
background-color: #f1f1f1;
text-align: center;
padding: 8px;
}
</style>
</head>
<body>
<h2>Page Content</h2>
<p>Some content above the footer.</p>
<footer>
Footer
</footer>
</body>
</html>
Subsol fix
Oricât de mult ai derula, un subsol fix rămâne vizibil în partea de jos a paginii.
Prompt
Creează o pagină cu suficient conținut pentru a derula și un footer fix care rămâne vizibil în partea de jos a viewport-ului. Footer-ul ar trebui să folosească position fixed, bottom 0, left 0, width 100%, un fundal gri deschis (#f1f1f1), padding de 8px, text centrat și z-index 1000. Textul footer-ului ar trebui să spună "Fixed Footer".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Footer</title>
<style>
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 8px;
text-align: center;
z-index: 1000;
}
body {
margin-bottom: 50px;
}
</style>
</head>
<body>
<h2>Scroll Down</h2>
<p>This page has a fixed footer that stays at the bottom of the viewport.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<footer>
Fixed Footer
</footer>
</body>
</html>
Site web responsive CSS
Combinând media queries cu flexbox, acest exemplu construiește un site web responsive, cu bara de navigare și conținutul flexibile.
Exemplu
Prompt
Creează un layout responsive pentru un website cu un header, o bară de navigare orizontală care devine verticală pe ecrane mici, o zonă de conținut bazată pe flex cu o navigare laterală și o secțiune principală de articol și un footer. Folosește media queries astfel încât layout-ul să se adapteze pentru ecrane sub 600px prin stivuirea elementelor pe verticală.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Responsive Website</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
color: white;
font-size: 30px;
}
ul.topnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
ul.topnav li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover {
background-color: #ddd;
color: black;
}
.content-container {
display: flex;
flex-direction: row;
}
nav {
flex: 1;
background-color: #f1f1f1;
padding: 20px;
}
nav a {
display: block;
padding: 8px;
text-decoration: none;
color: black;
}
nav a:hover {
background-color: #ddd;
}
article {
flex: 3;
background-color: white;
padding: 20px;
}
footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
@media screen and (max-width: 600px) {
ul.topnav {
flex-direction: column;
}
.content-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<ul class="topnav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div class="content-container">
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav>
<article>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque augue quam, ultricies at erat vitae, lobortis ultrices urna.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec accumsan, nibh vel tincidunt sagittis, urna eros hendrerit orci, id elementum sem arcu ac libero.</p>
</article>
</div>
<footer>
Footer
</footer>
</body>
</html>