November 27
Fai la tua blockquotes pagina web spiccano ed essere distinti. loro stile con i CSS per renderli impressionante diverso.
1 Digitare un blockquote sulla tua pagina web come si farebbe normalmente, utilizzando i tag blockquote formattarlo.
2 
Una immagine di sfondo non è essenziale, ma c'è uno in questo esempio. E 'abbastanza grande per creare uno sfondo per un blockquote che è più lungo di quello nell'esempio in apertura dell'articolo. Si noti che un tempo molto lungo blockquote richiederebbe un'immagine diversa a guardare bene.
3 Inizia con l'aggiunta del background-image al selettore blockquote nel CSS. Ecco un esempio:
blockquote {
background-image: url(tack.jpg);
background-repeat: no-repeat;
background-position: left center;
}
Alcune immagini potrebbero sembrare tutto a posto ripetuto, ma questo funziona meglio con i no-repeat come valore per la proprietà di ripetizione. Posizionando l'aderenza al orizzontalmente sinistra e al centro verticalmente, si mantiene la virata a sinistra e lasciare un margine di espansione verticale nella parte superiore e inferiore per un po 'più lungo blockquote.
4 Dare il blockquote una larghezza, se si desidera. Blockquotes sono rientrati a sinistra ea destra per impostazione predefinita: Si può considerare che sufficiente contenimento, oppure si può decidere una larghezza minore.
5 Con questa particolare immagine, sono necessarie alcune padding per spostare il testo del blockquote lontano dal lato sinistro in modo che non sedersi sulla parte superiore della mura. Infine aggiungere un bordo di alcuni o tutti i lati.
La regola esempio è ora:
blockquote {
background-image: url(tack.jpg);
background-repeat: no-repeat;
background-position: left center;
width: 400px;
padding-left: 110px;
padding-right: 5px;
border: 2px tratteggiata # FC8A42;
}
È possibile modificare questa regola esempio in molti modi a seconda dell'immagine, l'imbottitura o il bordo che si utilizza per personalizzare un blockquote. Creare un blockquote personalizzato che funziona bene sulla tua pagina web.