Hur Man Skapar En Horisontell Meny

Innehållsförteckning:

Hur Man Skapar En Horisontell Meny
Hur Man Skapar En Horisontell Meny

Video: Hur Man Skapar En Horisontell Meny

Video: Hur Man Skapar En Horisontell Meny
Video: Simple Horizontal Navigation Bar - HTML/CSS Tutorial 2024, Maj
Anonim

Menyskapande är förmodligen en av huvudpunkterna i utvecklingen av webbplatser och program. Dessutom är en bra utarbetning och logisk utformning av en sådan meny ansiktet på en webbplats eller något program. Låt oss till exempel ta Microsoft och operativsystemet Windows 7. Efter lanseringen av Windows 7 hörde Microsoft mycket kritik som inte var smickrande för sig själv. Det har varit många kritiker, men oftast obekvämt placerade menyalternativ. Läs noga denna handledning om hur du skapar en horisontell rullgardinsmeny med CSS och Expression Web. Taggstilar ändras för att skapa menyn

  • Hur man skapar en horisontell meny
    Hur man skapar en horisontell meny

    Instruktioner

    Steg 1

    Gå till Hantera stilar och klicka sedan på knappen Ny stil. Ge namnet Selector ul li till den nya stilen du just skapade. Kom också ihåg att se till att den nya stilen måste definieras i drop-down.css-filen.

    Steg 2

    För att sträcka ut en horisontell meny måste du berätta för menyalternativen att den kommer att vara horisontell. Därefter måste du bestämma bredden på varje menyalternativ och ta bort alla onödiga prickar framför alla listobjekt.

    Steg 3

    För horisontell inriktning, gå till Layout och ställ in visningsattributet inline. Ställ float-attributet till vänster. Klicka på knappen Apply. Alla listobjekt måste ställas in på en rad. För att de inte ska överlappa varandra måste du göra följande: ställ in positionsvärdet för breddattributet till 150 pixlar. Kolla nu. Alla element i listan ska ha samma storlek.

    Steg 4

    Nu måste vi försöka ta bort prickarna framför listobjekten. För att göra detta, gå till List och ställ in attributet list-style –type till none.

    Steg 5

    Klicka på OK för att acceptera alla ändringar.

    Steg 6

    För att justera teckensnittsstorleken för ul li-stilen måste du göra följande. I Hantera stilar högerklickar du på den ul li-stil du behöver för att välja Ändra stil. Den välbekanta dialogrutan för att lägga till eller ändra attribut öppnas. Gå till kategorin Font och ställ in attributet font-family till Arial, Helvetica, sans-serif. Gå sedan till attributet font-size och ställ det till 0.9em. Ställ sedan in attributet text-transform, ställ in värdet för det till versaler.

    Steg 7

    Höjden på objekten i den skapade menyn kan justeras i positionskategorin. Ställ höjdattributet till 30 pixlar.

    Steg 8

    Därefter måste du spara filen menu.html. För att göra detta öppnar Expression Web fönstret Spara inbäddade filer för att spara filen. Spara i drop-down.css-fil. Klicka på OK för att spara.

    Steg 9

    Kontrollera nu ditt resultat. För tillförlitlighet är det bättre att testa det i olika webbläsare. För att kontrollera resultatet i standardwebbläsaren måste du trycka på F12-tangenten på tangentbordet.

  • Rekommenderad: