Босоо CSS цэс: үүнийг өөрөө хийж

Зарим webmasters аль хэдийн байх зурлага энгийн элемент нь хөгжиж буй цаг зарцуулахыг хүсэхгүй байна. Тэд урт удаан гарч байгаа зүйл дээр таны цагийг дэмий үрэх ямар ч цэг байдаг гэж үздэг. Ер нь, зөвхөн HTML болон CSS эзэмших хүмүүсийн хувьд энэ нь чухал ач холбогдолтой нь тэдний ажлын талаар сайн мэддэг байх нь өөртөө маш олон зүйл хийх юм. Энэ цэс хамаарна. босоо CSS цэс үүсгэнэ. Энэ нь Javascript болон JQuery ашиглахгүйгээр зөвхөн HTML болон CSS дээр суурилсан болно. цэс бүр сайтын хуудсууд хүргэж холбоосуудын жагсаалт юм.

үндсэн алхам

Энэ нь энгийн үүсгэхийн тулд босоо цэс CSS, та дараах алхмуудыг хэрэгтэй:

1. Эхлээд холбоосууд (код HTML ашиглан), үүнээс цэс байх болно жагсаалтыг тодорхойлдог. тэдэнд нэр өг Жишээ нь, дараах байдалтай байна:

1. Нүүр хуудас.
2. Бидний түүх.
3. Гарын авлага.
4. Үйлчилгээ.
5. Холбоо барих.

Та CSS тусламжтайгаар хүсэж 2. Дараа нь холбоосыг сарлагийн саваг.

Бид бичиж , 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 файлын зам бүртгүүлэх нь чухал юм. Энэ асуудлын бологсод нь ихэвчлэн учраас болгоомжтой байх хэрэгтэй.

Style нь HTML-файлд дарга хаягууд хооронд холбогдсон байх ёстой. menu_1.png болон menu_2.png - энэ нь хэвийн төрийн болон Hover дахь зураг цэс зүйлийн дүр зураг юм.

Энэ зураг нь тусдаа хавтсанд зургийг хадгалахын тулд энэ my_images нэр, харин дараа нь CSS кодыг тохируулна нь илүү дээр юм. Эдгээр зураг харуулах хаана бич, тэд энэ санд байна: URL (my_images / menu_1.png) болон URL (my_images / menu_2.png).

CSS код-д заасан эд хөрөнгийг үлдсэн хэсэгт хялбараар ойлгож болно. Тэд бидний цэс төрхийг тодорхойлдог. Та тэдний дээр хулгана хулганыг аваачиж үед зүйлсийн өргөн, өндөр нь хэвийн байдалд адил зүйлс заасан анзаарч хялбар бөгөөд. Фонтын хэмжээ 18px, дүүрэн газар нэрсийг өөр өөр талаас нь шүдэнд заана. дэлгэцийн та өргөн болон жийргэвчтэй тохируулах дэлгэц нэгжийг тогтоох боломжийг олгодог.

Бидний босоо цэс

Таны харж байгаагаар, босоо CSS цэс амархан бий болгох. мэдлэг, мэдээлэл дээр үндэслэн та үзэсгэлэнтэй, таны вэб сайтад жуулчдад сонирхолтой болгохын тулд боломжтой байх болно! танай сайтыг нэмэлт нь таны төсөөлөл, дараа нь загварлаг цэсийг ашиглана уу.