Fai la tua pagina web blockquote distinguersi ed essere distinti. Lo stile con CSS per renderli incredibilmente diversi.

Istruzioni

Utilizzare un'immagine di sfondo, un po ' imbottitura e un bordo

1

Digitare un blockquote sulla tua pagina web come si normalmente farebbe, con tag blockquote di formattarlo.

2


Un'immagine di sfondo non è essenziale, ma ce n'è uno in questo esempio. È abbastanza grande per creare uno sfondo per un blockquote che è più lungo di quello nell'esempio all'apertura dell'articolo. Si noti che un lunghissimo blockquote richiederebbe un'immagine diversa a guardare bene.

3

Iniziare aggiungendo l'immagine di sfondo al selettore blockquote nel tuo CSS. Ecco un esempio:

blockquote {

background-image: url(tack.jpg);
background-repeat: no-repeat;
background-position: left center;

}

Alcune immagini sarebbero sguardo ripetuto va bene, ma questo funzionerà meglio con no-repeat come valore per la proprietà di ripetere. Posizionando la virata a sinistra orizzontalmente e al centro verticalmente, si tenere la virata a sinistra e consentire qualche spazio per espansione verticale nella parte superiore e inferiore per un blockquote piuttosto più lungamente.

4

Dare il blockquote una larghezza se si desidera. Blockquote sono rientrate a sinistra e destra per impostazione predefinita: si può considerare che sufficiente contenimento, o si consiglia una larghezza inferiore.

5

Con questa particolare immagine, alcuni imbottitura è necessaria per spostare il testo del blockquote lontano dal lato sinistro, quindi esso non sedersi in cima la virata. Infine aggiungere un bordo ad alcuni o a tutti i lati.

La regola di esempio è ora:

blockquote {

background-image: url(tack.jpg);
background-repeat: no-repeat;
background-position: left center;
width: 400px;
padding-left: 110px;

imbottitura a destra: 5px;
border: 2px tratteggiata #FC8A42;
}

È possibile modificare questa regola di esempio in molti modi a seconda dell'immagine, la spaziatura interna o il confine che è utilizzare per personalizzare un blockquote. Creare un blockquote personalizzato che funzionerà bene sulla tua pagina web.

Consigli & Avvertenze

• Si possono utilizzare le regole di margine e il colore di sfondo per stile blockquote.
• È possibile modificare la dimensione del carattere o linea-altezza per rendere un blockquote distinguersi da altri il testo nella pagina.
• Si può utilizzare la proprietà float per spostare un blockquote sul margine sinistro o destro e consentire l'altro testo di scorrere intorno ad esso.