Тік CSS мәзірі: оны өзіңіз істеп

Кейбір шеберлер қазірдің өзінде бар скретч қарапайым элементтерден дамушы уақыт жұмсауға келмейді. Олар бұрыннан бар нәрсе сіздің уақыт жұмсауға қажеті жоқ деп санаймыз. Шын мәнінде, тек HTML және CSS меңгеру үшін, кім, ол өз жұмысының жақсы түсіну өзіңіз көп нәрсе жасауға маңызды болып табылады. Бұл мәзір қолданылады. тік CSS мәзірлерді жасау. Ол Javascript және JQuery қолданбай, тек HTML және CSS негізделетін болады. Әрбір мәзірі сайттың беттерінде әкелуі сілтемелер тізімі.

негізгі қадамдар

қарапайым жасау үшін тік мәзірі CSS, сіз келесі қадамдарды қажет:

1. Біріншіден, мәзір болады, оның сілтемелер (коды HTML пайдалана отырып) тізімін анықтайды. оларға атау беріңіз төмендегідей, мысалы, мыналар болып табылады:

1. Үй.
2. Біздің тарихымыз.
3. Нұсқаулық.
4. Қызметтер.
5. Байланыс.

Сіз CSS көмегімен тілеймін 2. Содан кейін сілтемелер Styling.

Біз жаза , HTML кодын my_Vmenu.html файлындағы сақтауға және ол браузерде көрінеді қалай қараңыз:

Бұл біздің мәзір негізі (қаңқа) болып табылады. және т.б. # 1, # 2, сілтеме сөздермен ауыстырылсын. ол браузерде көрінеді қалай қараңыз. сурет, сізге ұнайды емес. Енді біз толық тік CSS мәзірлерін жасау үшін, стиль элементтерін сипаттау басталуы тиіс.

сипаттамасы стильдер

Сіз сайттың осындай маңызды элементі көрінісін жақсартуға келеді бәрін орнатылған файл my_Vmenu.css, жасау. Мұнда коды, тік CSS мәзірлерін қуаттауға болатын енгізу болып табылады. Ол сондай-ақ жаңа файл жазу, содан кейін біз жақын беріледі негізгі желілерін мағынасын қарап аламын.

Сипаттамасы стильдер пайдаланылған

Енді біздің CSS тік мәзір мәліметтерін қарауға:

тізімі-стилі-түрі, сіз маркерлер тізімін жоюға мүмкіндік береді. маржа және толтыру үшін «0» орнату арқылы тізімінде қосымша толықтыру алып тастаңыз. HTML коды көруге болады, біздің мәзірі тізімі, және стильдер CSS пайдаланып анықталады.

UL # my_Vmenu - бүкіл тізім жалпы стилі.

UL # my_Vmenu Ли бір - тег Ли арасындағы стилі сілтемелер.

UL # my_Vmenu Ли: а Hover - бір адамға үстінде орналасқан кезде мәзір элементтері қарауында түрін сипаттау.

UL # my_Vmenu Ли бір сүйем - мәтін сипаттамасы (атауы мәзірі).

бұл my_Vmenu.css my_Vmenu.html файлдар және сол каталогта сақталған болуы тиіс есте сақтаңыз. Алайда, олар әр түрлі қалталарда орналасуы мүмкін, бірақ содан кейін ол my_Vmenu.css үшін my_Vmenu.html файл жолында тіркелу маңызды болып табылады. жиі осы мәселеге жаңадан өйткені, абай болыңыз.

Стиль бір HTML-файлға басшысы тегтер арасында қосылған болуы керек. menu_1.png және menu_2.png - бұл қалыпты мемлекет пен меңзегенде сурет мәзірімнің пункты үшін сурет.

Ол, суреттер үшін бөлек қалтаға суреттерді сақтау үшін ол my_images аты жақсы, бірақ содан кейін CSS кодын реттеңіз. Осы суреттер көрсетіледі, онда жазу, олар осы каталогта бар: URL (my_images / menu_1.png) және URL (my_images / menu_2.png).

CSS код сипатталған қасиеттерін қалған, оңай түсіну. Олар біздің мәзір пайда болуын анықтайды. Ол бұл қалыпты күйде, сол элементтер үшін көрсетілген тауарларды ені мен биіктігін байқамай оңай, және сіз олардың тінтуірді апарыңыз кезде. Қаріп өлшемі 18px бетін орны атауларды түрлі жағынан шегінісін көрсетеді. Дисплей сіз ені мен толтыру орнату үшін дисплей орнатуға мүмкіндік береді.

Біздің тік мәзірі

Сіз оңай жасауға, тік CSS мәзірлерін Көріп отырғанымыздай. білім деректер негізінде, сіз, ол әдемі және сіздің веб-сайтына келушілердің тартымды жасауға қабілетті болады! Сіздің сайт толықтырады сіздің қиял пайдаланыңыз, содан кейін стильді мәзірі.