Ачылуучу горизонталдуу меню кандайча жасалышы керек

Мазмуну:

Ачылуучу горизонталдуу меню кандайча жасалышы керек
Ачылуучу горизонталдуу меню кандайча жасалышы керек

Video: Ачылуучу горизонталдуу меню кандайча жасалышы керек

Video: Ачылуучу горизонталдуу меню кандайча жасалышы керек
Video: А.В.Клюев - С.Капица - История 10 миллиардов - Не всё так просто. 2/8 2024, Май
Anonim

Программалык камсыздоону жана веб-сайтты иштеп чыгуунун эң маанилүү аспектилеринин бири - меню түзүү. Майкрософт жана анын эң атактуу мээси болгон Windows иштөө тутуму эң сонун мисал катары кабыл алынышы керек. Бул продукт дүйнөдөгү көпчүлүк ПК колдонуучуларынын көпчүлүгүнүн колдонгонуна карабастан, сын азайбастан, тынымсыз өсүүдө. Негизинен, бул меню элементтеринин жайгашкан жеринин ыңгайсыздыгына байланыштуу. Төмөндө CSS жана Expression Webде менюларды кантип түзүүгө болот.

Ачылуучу горизонталдуу меню кандайча жасалышы керек
Ачылуучу горизонталдуу меню кандайча жасалышы керек

Нускамалар

1 кадам

Горизонталдык меню түзүүнү баштоо үчүн, Стилди башкаруу бөлүмүнө өтүп, Жаңы стиль баскычын чыкылдатыңыз. Жаңы стилдин аталышы Selector ul li. Маанилүү! Түзүлгөн файлдын ачылуучу жайдын ачылышын камсыз кылыңыз.css. Горизонталдуу менюну түзүү үчүн, түздөн-түз горизонталдуу болорун жаратылган элементке көрсөтүңүз. Андан кийин, ар бир меню пунктунун туурасын аныктап, тизмедеги бардык пункттардын алдына коюлган бардык керексиз пункттарды алып салыңыз.

2-кадам

Макет параметрине өтүп, Display атрибутун Inline кылып туурасынан тегиздөө үчүн коюңуз. Андан кийин, Сол маанисин Float атрибутуна коюп, Колдонуу баскычын чыкылдатыңыз. Бардык тизме элементтерин бир сапка коюңуз. Алар тыкан жайгаштырылып, бири-биринин үстүнө сойлоп кетпеши үчүн, Width атрибутунда, Position маанисин 150 px кылып коюңуз. Тизменин бардык элементтеринин көлөмү бирдей экендигин текшериңиз. Андан кийин, бардык элементтердин алдындагы чекиттерди алып салыңыз - бул үчүн List атрибутуна өтүп, List Style типиндеги пунктта None параметрин орнотуңуз. Бардык өзгөртүүлөрдү кабыл алуу жана колдонуу үчүн ОК баскычын чыкылдатыңыз.

3-кадам

Ul li үчүн шрифттин көлөмүн жана стилин тууралаңыз. Бул үчүн, Стилдерди башкаруу бөлүмүнө өтүп, ul li баскычын оң баскыч менен басып, андан соң Стилди өзгөртүү тандаңыз. Тааныш диалог терезеси пайда болот. Арипке өтүп, Шрифт-үй-бүлөлүк атрибутун тандап, Sans-serif, Arial, Helvetica деп койду. Андан кийин, шрифттин чоңдугун 0, 9 кылып коюп, андан кийин Text-transform атрибутун Uppercase кылып коюңуз. Height - Position атрибутундагы меню пункттарынын бийиктигин 30 px кылып, тууралаңыз.

4-кадам

Бардык оңдоо иш-аракеттерин аткаргандан кийин, файлды menu.html деп сактап коюңуз. Андан кийин, түзүлгөн менюну ар кандай браузерлерде текшерип, анын туура иштегенине ынаныңыз. Көрүнүп тургандай, горизонталдык менюнун дизайны бир топ жөнөкөй.

Сунушталууда: