Hur man gör en rak osorterade listor i CSS

April 19

Hur man gör en rak osorterade listor i CSS


Front-end webbutvecklare använder oordnade listor för att ge struktur till en mängd olika webbsida tricks och effekter från enkla punktlistor till komplicerade rullgardinsmenyer och bild reglagen. Alla blivande webbdesigner eller utvecklare bör lära sig grunderna i styling oordnade listor med CSS-kod. För att skapa en rak, horisontell lista med objekt i CSS, till exempel, måste du veta hur du tilldelar flottar, stoppning och marginaler.

Instruktioner

1 Skriv in texten för oordnad lista i HTML-filen på din webbsida. Sätt varje listpost på en egen rad för att underlätta läsning och redigering av koden. Wrap varje listobjekt i öppning och stängning <li> taggar. Du bör alltid stänga dessa taggar för enklare styling och redigering senare. Här är ett exempel listobjekt:

<Li> Detta är en text som utgör en listobjekt. </ Li>

2 Lägg till en ny linje ovanför listobjekt och skriv din <ul> tagg där. Lägg till en ny linje nedanför listan och skriv din avslutande </ ul> tagg. Inom <ul> tagg, ange ID-attributet till ett unikt och beskrivande namn. Du kommer att använda detta ID i din CSS-kod. Här är ett exempel på <ul> tagg i bruk:

<Ul id = "rak">

<Li> Lista punkt 1 </ li>

<Li> Lista punkt 2 </ li>

</ Ul>

3 Öppna css-fil för din webbplats eller lägga öppning och stängning <style> taggarna mellan <head> taggarna i HTML-fil. Skriv din CSS-kod i css-fil eller mellan <style> taggarna. Ställ in "flyta" egendom av dina <li> taggar "vänster" så att varje listobjektet kommer att flyta upp mot den vänstra kanten av den sista. Här är CSS-koden:

rak li {float: left;}

Observera att "#straight" väljer <li> taggar i varje tagg ges en ID "rak".

4 Lägg marginaler och utfyllnad till dina <li> taggar i CSS till rymden varje post i listan, så här:

rak li {float: left; margin-höger: 10px; margin-left: 10px; padding: 5px;}

Style <li> taggar hur du vill, ger föremålen sina egna bakgrunder, färger text och typsnitt som behövs. Du kan också ta bort list kulor genom att sätta "list-style" till "ingen".

Tips

  • När du skapar en rak, oordnad lista för användning som en meny på dina webbsidor, lägga till utfyllnad till <a> taggar för att göra dem lättare att klicka. All stoppning runt länken blir klickbara.
  • Säkerhetskopiera alltid din HTML och CSS-filer när du redigerar webbsidor.

        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2021 Astrixsoft.com | Contact us: webmaster# astrixsoft.com