Skapa en horisontell linje i html

Denna handledning kommer att lära dig hur du skapar en horisontell linje i HTML. En horisontell linje kan användas för att separera innehåll på din webbplats. Koden för att skapa en regel är ganska enkel. Du kan lägga till in-line-kod i HTML 4.01 för att forma din linje. I HTML5 använder du CSS för att forma din linje.

Steg

Metod 1 av 2: HTML 4.01

Bild med titeln 658928 1 1
1. Öppna eller skapa ett nytt HTML-dokument. HTML-dokument kan redigeras med en textredigerare som Anteckningar. Du kan också använda en kodredigerare som Adobe Dreamweaver. Använd följande steg för att öppna ett HTML-dokument i det program du väljer:
  • Öppna Anteckningar eller valfri textredigerare/kodredigerare.
  • Klicka på menyn Fil.
  • Klicka på Att öppna.
  • Välj en HTML-fil.
  • Klicka på Att öppna.
Bild med titeln 658928 2 1
2. Välj den punkt där du vill infoga linjen. Scrolla ner till raden ovanför vilken du vill infoga raden, klicka sedan längst till vänster på raden för att placera markören direkt framför radens början.
Bild med titeln 658928 3 1
3. Skapa ett tomt utrymme. Tryck två gånger på ↵ Enter för att flytta ner texten över vilken du vill ange raden, och flytta markören till det tomma utrymmet.
Bild med titeln 658928 4 1
4. lägg till taggen " typ i utrymmet före början av raden. taggen skapar en horisontell linje över hela sidan.
Bild med titeln 658928 5 1
5. Flytta raden för `hr`-taggen till en ny rad. Tryck ↵ Enter för att göra detta. Vid denna tidpunkt bör taggen stå på din egen linje.
Bild med titeln 658928 6 1
6. Lägg till attribut till den horisontella linjen (valfritt). Du kan lägga till attribut till en horisontell linje, såsom längd, bredd, färg och justering. Använd följande koder efter `hr` i kodparenteserna. Du kan lägga till mer än ett attribut genom att separera dem med ett mellanslag.
  • typ för att ändra tjockleken på linjen. Byt ut # med tjockleken (t.ex. storlek="10").
  • typ för att ändra linjens bredd.Ersätt # med bredden i pixlar, eller procentandelen av sidbredden (t.ex. bredd="200", eller bredd="75 %").
  • typ
    för att ändra färgen på linjen. Ersätt # med namnet på färgen eller en hexadecimal kod (t.ex. färg="röd" eller färg="#FF0000")
  • typ
    för att rikta in linjen.Ersätta med "höger", "vänster" eller "Centrum" (t.ex. ).
    Bild med titeln 658928 7 1
    7. Spara din HTML-fil. För att spara en textfil som ett HTML-dokument måste du ange filtillägget (.txt eller .docx) ersatt med `.html`. Följ dessa steg för att spara ditt HTML-dokument:
  • Klicka på menyn Fil.
  • Klicka på Spara som.
  • Skriv ett namn för filen bredvid "`Filnamn`".
  • typ .html i slutet av filnamnet.
  • Klicka på Spara.
    Bild med titeln 658928 8 1
    8. Testa din HTML. Om du vill testa din HTML-fil, högerklicka på filen och välj Öppna med. Välj sedan en webbläsare. En heldragen linje bör visas där du placerade "HR"-taggen. HTML-koden ser ut ungefär så här:

    Metod 2 av 2:CSS/HTML5

    Bild med titeln 658928 9 1
    1. Öppna eller skapa ett nytt HTML-dokument. HTML-dokument kan redigeras med en textredigerare som Anteckningar. Du kan också använda en kodredigerare som Adobe Dreamweaver. Följ dessa steg för att öppna ett HTML-dokument i det program du väljer:
  • Öppna Anteckningar eller valfri annan textredigerare/kodredigerare.
  • Klicka på menyn Fil.
  • Klicka på Att öppna.
  • Välj en HTML-fil.
  • Klicka på Att öppna
  • Bild med titeln 658928 10 1
    2. Lägg till en rubrik i ditt HTML-dokument. Om ditt HTML-dokument inte redan har en rubrik, använd följande steg för att lägga till en rubrik. Rubriken kommer efter "
  • typ överst i dokumentet.
  • Tryck två gånger på ↵ Enter för att lägga till två nya rader.
  • typ att stänga huvudet.
    Bild med titeln 658928 11 1
    3. typ i koppen.Formateringstaggen kommer mellan de två rubriktaggarna.Detta ger dig en plats att ange CSS-kod för att formatera din HTML.
  • Du kan också använda en extern stilmall. läsa "Hur man lägger till en CSS-fil till HTML" för att lära dig mer om att länka en extern CSS-fil till din HTML-fil.
    Bild med titeln 658928 12 1
  • 4. typ hr {.Detta är CSS-taggen för att formatera din horisontella linje.Placera den efter stiltaggen i huvudsektionen eller i din externa CSS-fil.
    Bild med titeln 658928 13 1
    5. Lägg till CSS-stilar till din "Du placerar detta bakom taggen "hr {".Det finns många sätt att formatera en horisontell linje.Följande är några exempel.
  • typ bredd: ##px; för att ställa in bredden. Ersätt ## med linjens bredd i antal pixlar. Du kan också ange en procentandel (%) istället för pixlar (px).
  • typ höjd: ##px; för att indikera tjockleken på linjen. Ersätt ## med antalet pixlar som linjen ska vara tjock.
  • typ bakgrundsfärg: ##; för att ange färgen på linjen. Ersätt ## med namnet på färgen eller med en hash (#) följt av en hexadecimal färgkod.
  • typ margin-right: ##px; för att ange antalet pixlar från höger.Ersätt ## med antalet pixlar eller "bil".typ "bil" för att justera eller centrera linjen till vänster.
  • typ margin-left: ##px; för att ange antalet pixlar från vänster kant.Ersätt ## med antalet pixlar eller "bil".typ "bil" för att högerjustera eller centrera linjen.
  • typ margin top: ##px; för att ange en övre marginal för raden. Ersätt ## med linjetjockleken i pixlar.
  • Typ marginal botten: ##px; för att ange en bottenmarginal för raden. Ersätt ## med linjetjockleken i pixlar.
  • typ kantbredd: ##px; för att skapa en ram runt linjen (valfritt). Ersätt ## med kanttjocklek i pixlar.
  • typ gräns färg: ##; för att ange färgen på kanten runt linjen (valfritt).Ersätt ## med namnet på färgen, eller en hash (#) följt av en hexadecimal färgkod.
    Bild med titeln 658928 14 1
  • 6. typ } efter stilinställningar. Stänger stilinställningarna för
    Bild med titeln 658928 15 1
    7. typ var som helst i texten i ditt HTML-dokument.Lägger till en horisontell linje i ditt HTML-dokument.Dina CSS-stilinställningar gäller när du använder

    Оцените, пожалуйста статью