Jedním z nejdůležitějších aspektů vývoje webových stránek a softwaru je tvorba nabídek. Krásná posuvná nabídka zůstává měřítkem pro mnoho majitelů webových stránek a programátorů. To lze provést pomocí nástrojů CSS a Expression Web.
Instrukce
Krok 1
Otevřete Expression Web, přejděte na Spravovat styl, začněte vytvářet posuvnou nabídku a stiskněte klávesu Nový styl. Pojmenujte nový styl Selector ul li. Ujistěte se, že vygenerovaný soubor má příponu drop-down.css. Chcete-li vytvořit posuvnou nabídku, určete příslušnou pozici na obrazovce. Určete šířku každé z položek nabídky a odstraňte zbytečné tečky, které mohou být před nimi.
Krok 2
Spusťte možnost Layout a nastavte atribut Display. Přiřaďte mu vhodnou vloženou hodnotu pro zarovnání na obrazovce. Nastavte atribut Float na Vlevo a stiskněte klávesu Použít. Nastavte všechny prvky seznamu na jeden řádek. Chcete-li je udržovat v úhledném pořadí a nepřekrývat se, nastavte atribut Width na Position ve formě 150 px. Zkontrolujte, zda jsou všechny položky v seznamu stejné velikosti. Odstraňte tečky před každým prvkem tak, že přejdete k atributu List a nastavíte typ stylu seznamu na None. Kliknutím na „OK“změny přijmete a projeví se.
Krok 3
Upravte styl a velikost písma pro ul li. Přejděte na Spravovat styly a klikněte pravým tlačítkem na ul li, vyberte Upravit styl. Uvidíte již známé dialogové menu. Přejděte na Font, vyberte Font-family a nastavte tento atribut na Helvetica, Arial, Sans-serif. Upravte velikost písma a nastavte ji na 0, 9. Nastavte atribut Text-transformace na Velká písmena. V atributu Výška - Pozice zadejte přesnou výšku položek nabídky nastavením hodnoty na 30 px.
Krok 4
Po dokončení všech nápravných akcí uložte soubor jako menu.html. Vyzkoušejte nabídku, kterou jste právě vytvořili v různých aplikacích a prohlížečích, abyste zjistili, zda funguje. Jak vidíte, není těžké vytvořit takovou nabídku.
