Хүмүүсийн Хүний эрхийн тэмдэг бүхий вэб хуудсанд сонирхолтой харагдах мөрүүдийг гаргах
Хэрэв та вэбсайтад хэвтээ, салангид загварын мөрүүдийг нэмэх шаардлагатай бол танд хэд хэдэн сонголт байна. Та эдгээр мөрүүдийн бодит зургийг өөрийн хуудасруу оруулж болно, гэхдээ энэ нь таны хөтөчийг татаж авах ба файлуудыг ачааллах шаардлагатай болно, энэ нь сайтын гүйцэтгэлд сөрөг нөлөө үзүүлэх болно.
CSS-ийн хилийн шинж чанарыг ашиглан элементүүдийн дээд ба доод хэсэгт нь шугам хэлбэрээр ажиллах хил хязгаарыг нэмэх боломжтой.
Эцэст нь HTML элементэд хэвтээ дүрмийг ашиглана
Хэвтээ дүрмийн элемент
Хэрэв та вэбсайт дээр элементийг тавьсан бол эдгээр мөрүүдийг үзүүлэх анхдагч арга нь тохиромжгүй гэдгийг олж мэдсэн байж болох юм. Энэ нь таны сайтыг хэрхэн үзэхийг хүсч байгаагаас хамааран эдгээр элементүүдийн харагдах байдлыг тохируулахын тулд CSS рүү хандах хэрэгтэй гэсэн үг юм.
Хөдөлмөрийн үндсэн хаяг нь хөтөч үүнийг харуулахыг хүсдэг арга замыг харуулдаг. Орчин үеийн хөтөч нь ихэвчлэн 100% өргөн, 2px өндөртэй, 3D бөөрөнд харуулахын тулд HR массивыг харуулдаг.
Энд стандарт HR элементийн жишээг үзүүлэв. Эндээс харахад хүний бие засах ажилтан орчин үеийн хөтөч дээр хэрхэн харагддагийг та эндээс харж болно.
Өргөн ба Өндөр нь Браузерын дагуу байдаг
Вэб браузерууд дээр тохирсон цорын ганц загварууд нь өргөн , загвар юм. Эдгээр мөр нь хэр их болохыг тодорхойлох болно. Хэрэв та өргөн, өндөрийг тодорхойлоогүй бол анхдагч өргөн нь 100% бөгөөд анхдагч өндөр нь 2хх байна.
Энэ жишээнд толгойн элементийн 50% нь өргөн байна (доорх жишээнүүд нь бүхэл тоон хэлбэрийг агуулна.Үйлдвэрлэлийн орчинд эдгээр загварууд нь бүх хуудсуудад удирдахад хялбар болгохын тулд гаднах загварын хуудсанд бичнэ):
style = "width: 50%;">
Мөн энэ жишээнд өндөр нь 2ем байна:
style = "height: 2em;">
Хилийг өөрчлөх нь сорилттой байж болно
Орчин үеийн хөтөч дээр браузер хил засах замаар мөрийг барина. Хэрвээ та хэв маягийн шинж чанартай хил хязгаарыг хасвал хуудас нь хуудсан дээр алга болно. Та энэ жишээн дээр (энэ нь үл үзэгдэх мөрүүд шиг харагдахгүй байх болно) харах болно.
style = "border: none;">
Хилийн хэмжээ, өнгө, хэв маягийг тохируулах нь мөрийг өөр өөр харагдуулах бөгөөд бүх орчин үеийн хөтчүүдэд ижил нөлөөтэй байдаг. Жишээ нь, энэ жагсаалын хил нь улаан, тасархай, 1хх өргөн:
style = "border: 1px dashed # 000;">
Гэхдээ хэрэв та хил хязгаар, өндрийг өөрчлөх бол орчин үеийн хөтөч дээрээс илүү хөгшин хуучны хөтчүүдэд арай өөрөөр харагддаг. Хэрэв та энэ жишээнд IE7 болон доор үзсэн бол (хуучирсан хоцрогдсон бөгөөд Microsoft-ээр дэмжигдээгүй болсон browser) бусад хөтчүүдэд (IE8 ба түүнээс дээш оруулаад) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Тэдгээр вэбсайтын дизайнерууд нь өнөө үед илүү их орчин үеийн шийдлүүдээр солигдсон тул эдгээр браузерууд нь ихээхэн санаа зовоосон асуудал биш юм.
Оршил зураг бүхий гоёл чимэглэлийн мөрийг хий
Өнгөт бус, та өөрийн Хүний нөөцийн арын зургийг тодорхойлж болно. Ингэснээр таны хүссэнээр харагдах болно, гэхдээ тэмдгээрээ бөөгнөрөлтэй хэвээр байна.
Энэ жишээнд бид гурван далавчтай зургийг ашигласан. Дахин давталтгүйгээр үүнийг арын зургаар тохируулснаар, номонд үзсэн шиг харагдах контентыг эвдсэн:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll scroll; border: none;">
Хүний нөөцийн элементүүдийг өөрчлөх
CSS3-ийн тусламжтай та мөрүүдийг илүү сонирхолтой болгох боломжтой. Хүний нөөцийн элемент нь уламжлалт хэвтээ шугам бөгөөд харин CSS хувиргах өмчтэй бол тэдгээр нь хэрхэн харагдахыг нь өөрчилж болно. Хүний нөөцийн элементийн дуртай өөрчлөлт нь эргэлтийг өөрчлөх явдал юм.
Та бага зэрэг диагональ байхаар HR элементээ эргүүлэх боломжтой:
hr {
-moz-transform: rotate (10deg);
-webkit-transform: rotate (10deg);
-o-transform: rotate (10deg);
-с-хувиргах: эргэх (10deg);
хувиргах: эргэх (10deg);
}
Эсвэл та үүнийг бүрэн эргүүлэхийн тулд үүнийг эргүүлэх боломжтой:
hr {
-moz-transform: rotate (90deg);
-webkit-transform: rotate (90deg);
-o-transform: rotate (90deg);
-с-хувиргах: эргэх (90 градус);
хувиргах: эргэх (90 градус);
}
Энэ нь баримтыг өөрийн одоогийн байршилд тулгуурлан HR-ээр эргүүлэхийг санаарай. Тиймээс хүссэн газраа байршуулахын тулд байршлыг өөрчлөх хэрэгтэй болно. Үүнийг ашиглахын тулд босоо шугамыг дизайн дээр нэмэхийг зөвлөдөггүй, гэхдээ энэ нь сонирхолтой үр дүнг авах арга юм.
Таны хуудсан дээр шугамыг авах өөр нэг арга
Хүний нөөцийн элементийг ашиглахын оронд зарим хүмүүсийг хийдэг нэг зүйл бол бусад элементийн хил дээр тулгуурладаг. Заримдаа хүний нөөц бол хил хязгаар тогтоох гэж оролдохоос илүү хялбар бөгөөд хэрэглэхэд хялбар байдаг. Зарим браузерын хайрцагны загвар асуудал хил хязгаарыг улам нарийн болгох боломжтой.