Tutorial di base CSS

Modello di contenitore CSS

Tutorial di base CSS3

Manuale di riferimento CSS

Regole @ CSS

Manuale completo di esempi CSS CSS Counter (Contatore)

Layout del sito web CSS

Layout CSSFacile da progettare. Possiamo utilizzare il layout CSS per progettare le nostre pagine web, ad esempio la homepage, contattaci, chi siamo, ecc.

Ci sono tre metodi per progettare il layout di una pagina web:

Layout Div+CSS HTML：Ora largamente utilizzato.
Tabella HTML：Più lento, meno popolare.
Struttura HTML：Ora dismesso.

Il layout CSS può includere intestazione, piè di pagina, finestra di sinistra, finestra di destra e parte del corpo. Vediamo un esempio di layout CSS semplice.

Esempio di layout CSS

Esempio

<!DOCTYPE html>　　
<html>　　
<head>　　
<style>　　
.header{margine:-8px -8px 0px;immagine di sfondo:gradiente lineare(145deg,#7379ff,#b524ef);colore:bianco;allineamento:testo centro;spaziatura:10px;}　　
.container{width:100%}　　
.left{width:15%;float:left;}　　
.body{width:65%;float:left;background-color:pink;padding:5px;}　　
.right{width:15%;float:left;}　　
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
</style>　　
</head>　　
<body>　　
<div class="header"><h2>Tutorial di base oldtoolbag.com</h2></div>　　
　　
<div class="container">　　
<div class="left">　　
<p>Barra laterale sinistra</p>　　
</div>　　
<div class="body">　　
<h1>Corpo del testo</h1>　　
<p>Il contenuto della pagina qui</p><p>Il contenuto della pagina qui</p><p>Il contenuto della pagina qui</p>　　
<p>Il contenuto della pagina qui</p><p>Il contenuto della pagina qui</p><p>Il contenuto della pagina qui</p>　　
<p>Il contenuto della pagina qui</p><p>Il contenuto della pagina qui</p><p>Il contenuto della pagina qui</p>　　
<p>Il contenuto della pagina qui</p><p>Il contenuto della pagina qui</p><p>Il contenuto della pagina qui</p>　　
<p>Il contenuto della pagina qui</p>　　
</div>　　
<div class="right">　　
<p>Barra laterale destra</p>　　
</div>　　
</div>　　
　　
<div class="footer">　　
<p>Footer</p>　　
</div>　
</body>　　
</html>

Prova a vedere‹/›

Effetto di output:

Tutorial di base oldtoolbag.com

Barra laterale sinistra

Corpo del testo

Il contenuto della pagina qui

Barra laterale destra

Fondo

Manuale completo di esempi CSS CSS Counter (Contatore)