Così si desidera un sito web con i bordi rotondi piacevoli, ma non si vuole fare confusione con la costruzione di immagini e il caricamento sul server FTP, quindi ricostruire queste immagini per adattare le tabelle ed i grafici di diverse dimensioni? Bene, allora ho una soluzione per voi. Web design si è evoluto abbastanza lontano attraverso i CSS (fogli di stile CSS) che ora possiamo mettere confini rotonde sui nostri siti web senza caricare le immagini. È invece possibile utilizzare una serie di attributi CSS e tag HTML sulla tua pagina web. Se non si conosce già su CSS, si dovrà leggere su di esso e creare un foglio di stile CSS, un documento di testo semplice con l'estensione .css che si mette sul tuo server e link dalla pagina web HTML, in modo da il browser sa usarlo.

istruzione

1 Stabilire dove i bordi arrotondati andranno nella vostra pagina web.

2 Creare le seguenti tag nella pagina HTML intorno a questa zona. Essi devono essere collocati in ordine. <Div class = "t"> <div class = "b"> <div class = "l"> <div class = "r"> <div class = "bl"> <div class = "br"> <div class = "tl"> <div class = "tr"> I tuoi dati di testo, o un elemento grafico qui ... </ div> </ div> </ div> </ div> </ div> </ div> </ div> </ div> Questo costruisce gli angoli.

3 Aprire il foglio di stile CSS e mettere questi tag in esso: .Bl {background: url (bl.gif) 0 100% no-repeat} .br {background: url (br.gif) 100% 100% no-repeat}. TL {background: url (tl.gif) 0 0 no-repeat} .tr {background: url (tr.gif) 100% 0 no-repeat; padding: 10px}. Il risultato è quattro angoli con archi tondi intorno alla vostra testo o immagine.

4 Cancellare il confine tipico che va in giro per le immagini angolo arrotondati con la creazione di una piccola, puntino bianco, chiamato dot.gif, che è la stessa dimensione come il confine.

5 Aggiungere nuove regole CSS per il vostro foglio di stile che richiama questo bloccante confine (l'immagine dot.gif) così si va intorno ai bordi del confine, cancellando le linee squadrate intorno agli angoli arcuate. Le regole sono: .B {background: url (dot.gif) 0 100% repeat-x} .l {background: url (dot.gif) 0 0 repeat-y} .r {background: url (dot.gif) 100% 0 repeat-y}

6 Metti alla prova i confini e apportare correzioni al codice, se necessario.

Consigli e avvertenze

• Nuovo codice CSS è sempre a disposizione per rendere gli angoli arrotondati che sono molto elegante. Tenete d'occhio per questi codici. Li potete trovare seguendo il link in Risorse.