Come creare un confine con bordi curvi utilizzando HTML

July 4

È possibile inserire i bordi rotondi nella tua pagina web utilizzando le tabelle HTML semplici e immagini. Ciò consente di creare un bordo con bordi arrotondati intorno qualsiasi tavolo dimensione, qualsiasi parte del sito. Tutto ciò che serve è un semplice programma di grafica come Paint, Publisher o Adobe Design, e si può rendere il vostro sito un aspetto più professionale in pochissimo tempo.

istruzione

1 Come creare un confine con bordi curvi utilizzando HTML

Aprire il programma di grafica (in questo caso useremo Paint). Selezionare il rettangolo con gli angoli arrotondati icona e quindi selezionare il colore del vostro tavolo o area di contenuto. Disegnare un rettangolo con bordi arrotondati. Avanti, riempirlo con lo stesso colore. Tagliare gli angoli utilizzando lo strumento "Select". Salvare ognuna con un nome diverso: r-BRD-top.jpg, l-BRD-top.jpg, r-BRD-bot.jpg, e L-BRD-bot.jpg.

2 Creare una tabella che conterrà i contenuti, con cellpadding e cellspacing impostato su "0" e il colore back ground impostato lo stesso come le immagini. Posizionare il bordo immagine in alto a destra (tagliato dal rettangolo) nella prima colonna. Impostare le dimensioni anche per gli angoli: <table cellspacing = "0" cellpadding = "0" bgcolor = "color-of-your-round-confini"> <tr> <td width = 15 height = 15> <img src = " l-BRD-top.jpg ">. Quindi aggiungere un altro tag <td> e impostare la larghezza per l'area all'interno del tavolo in questo tag: <td width = 150>. Il tuo contenuto andrà sotto questa colonna nella riga successiva.

3 Aggiungere il bordo a destra nella colonna successiva: <td width = 15 height = 15> <img src = "r-BRD-top.jpg"> e impostare la larghezza e l'altezza della colonna per controllare la forma dei confini. Assicurarsi che l'immagine è abbastanza grande da colmare questa forma. Il browser tagliare la parte in basso a destra dell'immagine se è troppo grande.

4 Aggiungere la riga successiva e quindi creare un <td> colonna vuota con una larghezza di 15 pixel: <td width = 15>. Aggiungere un'altra colonna utilizzando il tag <td> <td> Il contenuto va qui .... </ td>. Poi ad un'altra colonna (l'immagine a destra sotto), con una <width = 15 height = 15 td> tag. Termina questa riga e poi finire la tabella utilizzando le immagini d'angolo in basso nello stesso modo.

5 Aggiungere gli angoli inferiori nella tabella i tag <td> così come avete fatto per la parte superiore. Rendere l'ultima fila, e inserire l'angolo in basso a sinistra nella prima colonna: <td width = 15 height = 15> <img src = "L-BRD-bot.jpg">. Quindi aggiungere un'altra colonna con la larghezza si imposta nella seconda colonna sulla parte superiore. <Td width = 150>.

6 Aggiungere l'angolo finale al tavolo nella colonna successiva: <td width = 15 height = 15> <img src = "r-BRD = bot.jpg">.