ביצוע מעניין להסתכל שורות על דפי אינטרנט עם תגי HR
אם אתה צריך להוסיף אופקית, קווי הפרדה בסגנון לאתרים שלך, יש לך כמה אפשרויות. תוכל להוסיף קובצי תמונות בפועל של שורות אלה לדף שלך, אך פעולה זו תדרוש מהדפדפן שלך לאחזר ולטעון קבצים אלה, דבר שעשוי להשפיע לרעה על ביצועי האתר.
ניתן להשתמש במאפיין הגבול CSS כדי להוסיף גבולות הפועלים כקווים או בחלק העליון או בחלק התחתון של אלמנט, ובכך יוצרים את קו ההפרדה.
לבסוף, ניתן להשתמש באלמנט HTML עבור הכלל האופקי -
אלמנט כלל אופקי
אם יש לך אי פעם לשים אלמנט בדף אינטרנט, סביר להניח שהתברר כי ברירת המחדל של הדרך כי שורות אלה מוצגים אינם אידיאליים. זה אומר שאתה צריך לפנות CSS כדי להתאים את המראה החזותי של אלמנטים אלה להיות בקנה אחד עם איך אתה רוצה את האתר שלך כדי להיראות.
תג HR בסיסי מוצג באופן שבו הדפדפן רוצה להציג אותו. דפדפנים מודרניים בדרך כלל מציגים תגי HR ללא שינוי עם רוחב של 100%, גובה של 2 פיקסלים וגבול תלת-ממדי בשחור כדי ליצור את הקו.
הנה דוגמה של אלמנט HR רגיל או שאתה יכול לראות בתמונה הזאת איך נראה HR unstyled בדפדפנים המודרניים.
רוחב וגובה הם עקביים על פני דפדפנים
סגנונות רק כי הם עקביים על פני דפדפני אינטרנט הן רוחב וסגנונות. אלה מגדירים את גודל הקו. אם אינך מגדיר את הרוחב והגובה רוחב ברירת המחדל הוא 100% וגובה ברירת המחדל הוא 2px.
בדוגמה זו, הרוחב הוא 50% מהאלמנט ההורה (שים לב לדוגמאות הבאות, שכולן כוללות סגנונות מוטבעים. בהגדרת ייצור, סגנונות אלה למעשה ייכתבו בגיליון סגנונות חיצוני כדי להקל על הניהול בכל הדפים שלך):
style = "width: 50%;">
ובדוגמה זו הגובה הוא 2em:
style = "height: 2em;">
שינוי הגבולות יכול להיות מאתגר
בדפדפנים המודרניים, הדפדפן בונה את הקו על-ידי התאמת הגבול. לכן, אם תסיר את הגבול עם מאפיין הסגנון, הקו ייעלם בדף. כפי שאתה יכול לראות (טוב, אתה לא תראה שום דבר, כמו השורות יהיה בלתי נראה) בדוגמה זו:
style = "border: none;">
התאמת גודל הגבול, צבע וסגנון יהפכו את הקו נראה שונה ויש לו את אותו אפקט בכל הדפדפנים המודרניים. לדוגמה, בהפגנה זו הגבול הוא אדום, מקווקו ורוחב 1px:
סגנון = "border: 1px dashed # 000;">
אבל אם תשנה את הגבול ואת הגובה, הסגנונות ייראו קצת שונים בדפדפנים מיושנים יותר מאשר בדפדפנים המודרניים. כפי שניתן לראות בדוגמה זו, אם אתה מציג את זה ב- IE7 ומטה (דפדפן שהוא מיושן ומאושר ואינו נתמך עוד על ידי מיקרוסופט) יש קו פנימי משופע שאינו מוצג בדפדפנים אחרים (כולל IE8 ומעלה) You
סגנון = "גובה: 1.5 מ '; רוחב: 25em; גבול: 1px solid # 000;">
אלה דפדפנים antiqued הם באמת לא הרבה דאגה של עיצוב אתרים היום, שכן הם הוחלפו במידה רבה עם אפשרויות מודרניות יותר.
לעשות קו דקורטיבי עם תמונת רקע
במקום צבע, אתה יכול להגדיר תמונת רקע עבור HR שלך כך שזה נראה בדיוק כמו שאתה רוצה, אבל עדיין מציג סמנטית בסימון שלך.
בדוגמה זו השתמשנו בתמונה של שלושה קווים גליים. על ידי הגדרתו כתמונת הרקע ללא חזרה, היא יוצרת הפסקה בתוכן שנראה כמעט כמו שאתה רואה בספרים:
style = "height: 20px; background: #fff url (aa010307.gif) no-return scroll center; border: none;">
שינוי רכיבי HR
עם CSS3, אתה יכול גם להפוך את השורות שלך יותר מעניין. אלמנט HR הוא באופן מסורתי קו אופקי , אבל עם המאפיין CSS המרה, אתה יכול לשנות איך הם נראים. שינוי מועדף על אלמנט HR היא לשנות את הסיבוב.
אתה יכול לסובב את אלמנט HR שלך כך שזה רק באלכסון מעט:
hr {
-Moz-transform: לסובב (10deg);
-webkit-transform: לסובב (10deg);
-O-transform: לסובב (10deg);
-ms-transform: לסובב (10deg);
להפוך: לסובב (10deg);
}
או שאתה יכול לסובב אותו כך שהוא אנכי לחלוטין:
hr {
-Moz-transform: לסובב (90deg);
-webkit-transform: לסובב (90deg);
-O-transform: לסובב (90deg);
-ms-transform: לסובב (90deg);
להפוך: לסובב (90deg);
}
זכור כי זה מסובב את HR מבוסס על המיקום הנוכחי שלה במסמך, אז ייתכן שיהיה עליך להתאים את המיקום כדי לקבל את זה איפה שאתה רוצה את זה. זה לא מומלץ להשתמש זה כדי להוסיף קווים אנכיים לעיצוב, אבל זה דרך להשיג אפקט מעניין.
דרך נוספת לקבל שורות על הדפים שלך
דבר אחד שיש אנשים לעשות במקום להשתמש באלמנט HR היא להסתמך על גבולות של גורמים אחרים. אבל לפעמים HR הוא הרבה יותר נוח וקל לשימוש מאשר מנסה להגדיר גבולות. את הבעיות תיבת דגם של דפדפנים מסוימים יכולים להפוך את הגדרת הגבול אפילו מסובך יותר.