Мәзір сайттағы бөлімдер арқылы пайдаланушының навигациясын жеңілдету үшін қолданылады. Келушінің назарын аудару үшін мәзір функционалды, қолдануға ыңғайлы және сонымен бірге бүкіл ресурстардың дизайнымен үйлесуі керек.
Нұсқаулық
1-қадам
Мәзірді жасамас бұрын оның түрін шешіңіз. Пайдаланушы тышқан жүгіргісімен жылжытқанда пайдаланушыға көрсетілетін көлденең немесе тік қорапты ашуға болады. Белгілі бір мәзірді таңдағанда, келушілерге оны пайдалану қаншалықты ыңғайлы болатындығын және оны дизайнмен қалай үйлестіретінін басшылыққа алуға болады.
2-қадам
Мәзір түрін таңдағаннан кейін, HTML-ді өңдеу үшін кез-келген мәтіндік редакторды пайдаланып парағыңызды ашыңыз. Интерфейс элементін енгізгіңіз келетін кодтың қажетті бөліміне өтіңіз.
3-қадам
Осыдан кейін блок құру және оған идентификатор берілген нөмірленген тізім жасау арқылы опциялар тізімін жасаңыз. Мысалға:
- Сілтеме 1
- Сілтеме 2
- Сілтеме 3
Бұл мысалда мен үш элементтің таңбаланған тізімін құрдым және оны ID панелінің идентификаторымен div қабатына орналастырдым.
4-қадам
Өз парағыңыздың бөлім блогына өтіп, тиісті каскадтық стильдер кестесінің мәзірін жасаңыз. Егер сіз көлденең мәзір жасағыңыз келсе, нәтиже тізіміне кірістірілген атрибутты қоса аласыз:
#panel ul li {дисплей: кірістірілген; }
5-қадам
Парақтың бүкіл ұзындығы бойынша көлденең сызық жасау үшін келесі кодты қолдануға болады:
#panel ul {шеткі-сол жақ: 0; төсеу: 2px 0; }
6-қадам
Сонда көрнекі бөлуді тіктөртбұрышқа бөлуге болады:
#panel ul li a {шеткі сол жақ: 3px; шекара: 1px; төсеме: 2px 3px; фон: көк; }
Бұл код шеткі элементтерден мәтін шегіністерін шеткі және сол жақтағы атрибуттар арқылы орнатады, сонымен қатар тізім элементтерінің әрқайсысына фон түсін орнатады. Бұл мысалда түс көк, бірақ сіз оны өз қалауыңыз бойынша өзгерте аласыз.
7-қадам
Ағымдағы беттегі қойындыда таңдалған элементті көрсету үшін ашық параметрлерге сәйкес параметрлерді орнатыңыз:
#menu ul li a # open {фон: қызыл; шекара-төменгі: 1px; }
Панельде таңдалған ағымдағы бет енді қызыл түспен көрсетіледі.
8-қадам
Өзгерістерді файлға сақтаңыз және браузер арқылы парағыңызды ашу арқылы жазылған кодтың жұмысын тексеріңіз. Дисплейдің қосымша параметрлерін орнату үшін объектінің көрінісін жақсарту үшін әрқашан CSS немесе HTML қосуға болады.
