Sådan oprettes en kant med buede kanter ved hjælp af HTML

Du kan sætte runde grænser på din webside ved hjælp af simple HTML-tabeller og billeder.Dette giver dig mulighed for at skabe en kant med afrundede kanter omkring enhver størrelse bordet, hvor som helst på dit websted.Alt du behøver er en simpel grafik program som Paint, Publisher eller Adobe Design, og du kan gøre dit website ser mere professionelle på ingen tid.

hvad du har brug

  • grafikprogram
  • Website

Instruktioner

  1. Open din grafik program (i dette tilfælde vil vi bruge Paint).Vælg rektangel med ikonet afrundede hjørner og derefter vælge farven på dit bord eller indhold område.Tegn et rektangel med runde grænser.Næste, fyld den med den samme farve.Klip hjørnerne ved hjælp af "Vælg" værktøj.Gem hver enkelt ved hjælp af et andet navn: r-brd-top.jpg, L-brd-top.jpg, r-brd-bot.jpg, og L-brd-bot.jpg.

  2. Opret en tabel, der vil holde dit indhold, med cellpadding og cellspacing sat til "0" og tilbage jorden farve indstillet på samme måde som dine bille

    der.Placer din øverste højre kant billede (skåret fra rektangel) i første kolonne.Indstil størrelsen for selv hjørner: & lt; table cellspacing = "0" cellpadding = "0" bgcolor = "farve-af-din-round-grænser" & gt; & lt; tr & gt; & lt; td width = 15 height = 15 & gt; & lt; img src = "L-brd-top.jpg" & gt ;.Så tilføje en anden & lt; td & gt;tag og indstil bredden for den indvendige areal i tabellen i dette tag: & lt; td width = 150 & gt ;.Dit indhold vil gå under denne kolonne i den næste række.

  3. Tilføj i højre side grænsen i den næste kolonne: & lt; td width = 15 height = 15 & gt; & lt; img src = "r-brd-top.jpg" & gt;og indstille bredden og højden af ​​kolonnen for at kontrollere formen af ​​grænserne.Sørg for at dit billede er stort nok til at udfylde dette facon.Browseren udrydder nederste højre del af billedet, hvis den er for stor.

  4. Tilføj den næste række, og derefter oprette en tom & lt; td & gt;søjle med en bredde på 15 pixels: & lt; td width = 15 & gt ;.Tilføj en anden kolonne ved hjælp af & lt; td & gt;tag: & lt; td & gt;Dit indhold går her .... & lt; / td & gt ;.Så ad en anden kolonne (under højre billede), med en & lt; td width = 15 height = 15 & gt;tag.Afslut denne række, og derefter afslutte din tabel ved at bruge det nederste hjørne billederne på samme måde.

  5. Tilsæt de nederste hjørner i tabellen i & lt; td & gt;tags ligesom du gjorde for toppen.Gøre den sidste række, og indsæt nederste venstre hjørne i den første kolonne: & lt; td width = 15 height = 15 & gt; & lt; img src = "L-brd-bot.jpg" & gt ;.Derefter tilføje en anden kolonne med bredde du har angivet i anden kolonne op øverst.& lt; td width = 150 & gt ;.

  6. Tilføj det sidste hjørne til tabellen i den næste kolonne: & lt; td width = 15 height = 15 & gt; & lt; img src = "r-brd = bot.jpg" & gt ;.

Ressourcer

  • Runde grænser med CSS
  • Runde grænser HTML
495
0
1
Webdesign