Hoe tot een grens met afgeronde hoeken met behulp van HTML maken

U kan rond grenzen op uw webpagina met behulp van eenvoudige HTML-tabellen en afbeeldingen.Deze kunt u een grens met afgeronde hoeken rond elke omvang tabel, overal op uw site.Alles wat je nodig hebt is een eenvoudig grafisch programma zoals Paint, Publisher of Adobe Design, en kunt u uw website een nog professionelere uitstraling in geen tijd.

wat je

  • Grafisch programma
  • Website

Needinstructies

  1. Open uw grafisch programma (in dit geval zullen we gebruik maken van Paint).Selecteer de rechthoek met afgeronde hoeken icoon en selecteer vervolgens de kleur van uw tafel of content gebied.Teken een rechthoek met ronde randen.Vervolgens vul deze met dezelfde kleur.Knip de hoeken met de "Select" tool.Opslaan elk met een andere naam: r-BRD-top.jpg, l-BRD-top.jpg, r-BRD-bot.jpg en l-BRD-bot.jpg.

  2. Maak een tabel dat uw inhoud zal houden, met cellpadding en cellspacing ingesteld op "0" en de achtergrondkleur ingesteld hetzelfde als uw afbeeldingen.Plaa

    ts uw top grens afbeelding rechts (gesneden uit de rechthoek) in de eerste kolom.Stel het formaat voor zelfs hoeken: & lt; table cellspacing = "0" cellpadding = "0" bgcolor = "kleur-van-je-round-grenzen" & gt; & lt; tr & gt; & lt; td width = 15 height = 15 & gt; & lt; img src = "l-BRD-top.jpg" & gt ;.Voeg dan een ander & lt; td & gt;tag en de breedte van de binnenruimte van de tabel in deze tag: & lt; td width = 150 & gt ;.Uw inhoud zal onder deze kolom te gaan in de volgende rij.

  3. Voeg de rechterzijde grens in de volgende kolom: & lt; td width = 15 height = 15 & gt; & lt; img src = "r-BRD-top.jpg" & gt;en de breedte en hoogte van de kolom aan de vorm van de randen regelen.Zorg ervoor dat uw afbeelding is groot genoeg om dit vorm te vullen.De browser zal afgesneden van de onderste rechter deel van het beeld als het te groot is.

  4. Voeg de volgende rij en maak vervolgens een lege & lt; td & gt;kolom met een breedte van 15 pixels: & lt; td width = 15 & gt ;.Voeg een andere kolom met behulp van de & lt; td & gt;tag: & lt; td & gt;Uw inhoud gaat hier .... & lt; / td & gt ;.Dan advertentie andere kolom (onder de afbeelding rechts), met een & lt; td width = 15 height = 15 & gt;tag.Eindigen deze rij en dan eindig je tafel met behulp van de onderste hoek afbeeldingen op dezelfde manier.

  5. Voeg de onderste hoeken in de tabel in de & lt; td & gt;labels net zoals u voor de top deed.Maak de laatste rij, en steek de linker benedenhoek in de eerste kolom: & lt; td width = 15 height = 15 & gt; & lt; img src = "l-BRD-bot.jpg" & gt ;.Voeg dan een andere kolom met de breedte die u in de tweede kolom op de top in te stellen.& lt; td width = 150 & gt ;.

  6. Voeg de laatste bocht van de tabel in de volgende kolom: & lt; td width = 15 height = 15 & gt; & lt; img src = "r-BRD = bot.jpg" & gt ;.

Resources

  • Ronde grenzen met CSS
  • Ronde grenst HTML
376
0
1
Web Design