ಮಾನವ ಸಂಪನ್ಮೂಲ (ಅಡ್ಡಲಾಗಿರುವ ನಿಯಮ) ಟ್ಯಾಗ್ ವಿನ್ಯಾಸಗೊಳಿಸುವುದು

ಎಚ್ಆರ್ ಟ್ಯಾಗ್ಗಳು ಹೊಂದಿರುವ ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ಆಸಕ್ತಿದಾಯಕ ಕಾಣುವ ರೇಖೆಗಳನ್ನು ಮಾಡುವುದು

ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ಗಳಿಗೆ ಸಮತಲ, ವಿಭಾಜಕ-ಶೈಲಿಯ ಸಾಲುಗಳನ್ನು ನೀವು ಸೇರಿಸಬೇಕಾದರೆ, ನಿಮಗೆ ಕೆಲವು ಆಯ್ಕೆಗಳಿವೆ. ನಿಮ್ಮ ಪುಟಕ್ಕೆ ಆ ರೇಖೆಗಳ ನಿಜವಾದ ಚಿತ್ರಿಕಾ ಫೈಲ್ಗಳನ್ನು ನೀವು ಸೇರಿಸಬಹುದು, ಆದರೆ ಆ ಫೈಲ್ಗಳನ್ನು ಹಿಂಪಡೆಯಲು ಮತ್ತು ಲೋಡ್ ಮಾಡಲು ನಿಮ್ಮ ಬ್ರೌಸರ್ನ ಅಗತ್ಯವಿರುತ್ತದೆ, ಅದು ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪ್ರಭಾವ ಬೀರಬಹುದು.

ನಿಮ್ಮ ವಿಭಾಜಕ ರೇಖೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ರಚಿಸುವುದರ ಮೂಲಕ, ನೀವು ಅಂಚುಗಳನ್ನು ಸೇರಿಸಲು ಮೇಲಿನ ಅಂಚು ಅಥವಾ ಅಂಶದ ಕೆಳಭಾಗದಲ್ಲಿ ವರ್ತಿಸುವ ಅಂಚುಗಳನ್ನು ಸೇರಿಸಲು CSS ಗಡಿ ಆಸ್ತಿಯನ್ನು ಬಳಸಬಹುದಾಗಿರುತ್ತದೆ.

ಅಂತಿಮವಾಗಿ, ನೀವು ಸಮತಲ ನಿಯಮಕ್ಕಾಗಿ HTML ಅಂಶವನ್ನು ಬಳಸಬಹುದು - ದಿ

ಸಮತಲ ರೂಲ್ ಎಲಿಮೆಂಟ್

ನೀವು ಎಂದಾದರೂ ಒಂದು ವೆಬ್ ಪುಟದಲ್ಲಿ ಒಂದು ಅಂಶವನ್ನು ಹಾಕಿದರೆ, ಈ ರೇಖೆಗಳು ಪ್ರದರ್ಶಿತವಾಗುವ ಪೂರ್ವನಿಯೋಜಿತ ಮಾರ್ಗವು ಸೂಕ್ತವಲ್ಲ ಎಂದು ನೀವು ಕಂಡುಕೊಳ್ಳಬಹುದು. ಇದರರ್ಥ ನೀವು ನಿಮ್ಮ ಸೈಟ್ ಹೇಗೆ ಕಾಣಬೇಕೆಂಬುದರ ಅನುಸಾರವಾಗಿ ಈ ಅಂಶಗಳ ದೃಶ್ಯ ಗೋಚರತೆಯನ್ನು ಸರಿಹೊಂದಿಸಲು ಸಿಎಸ್ಎಸ್ ಗೆ ತಿರುಗಿಕೊಳ್ಳಬೇಕು.

ಬ್ರೌಸರ್ ಪ್ರದರ್ಶಿಸಲು ಬಯಸುತ್ತಿರುವ ರೀತಿಯಲ್ಲಿ ಮೂಲ HR ಟ್ಯಾಗ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳು ಸಾಮಾನ್ಯವಾಗಿ unstyled HR ಟ್ಯಾಗ್ಗಳನ್ನು 100% ಅಗಲ, 2px ಎತ್ತರ, ಮತ್ತು ರೇಖೆಯನ್ನು ರಚಿಸಲು ಕಪ್ಪುದಲ್ಲಿನ 3D ಗಡಿಯೊಂದಿಗೆ ಪ್ರದರ್ಶಿಸುತ್ತವೆ.

ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಎಚ್ಆರ್ ಎಲಿಮೆಂಟ್ನ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ ಅಥವಾ ಈ ಚಿತ್ರದಲ್ಲಿ ನೀವು ಅನಿಯಮಿತ HR ಹೇಗೆ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಕಾಣುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಬಹುದು.

ಅಗಲ ಮತ್ತು ಎತ್ತರ ಬ್ರೌಸರ್ಗಳಾದ್ಯಂತ ನಿರಂತರವಾಗಿರುತ್ತವೆ

ವೆಬ್ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ಏಕೈಕ ಶೈಲಿಗಳು ಅಗಲ ಮತ್ತು ಶೈಲಿಗಳಾಗಿವೆ. ಈ ಸಾಲು ಎಷ್ಟು ದೊಡ್ಡದು ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನೀವು ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸದಿದ್ದರೆ ಡೀಫಾಲ್ಟ್ ಅಗಲವು 100% ಮತ್ತು ಡೀಫಾಲ್ಟ್ ಎತ್ತರ 2px ಆಗಿದೆ.

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಅಗಲವು ಪೋಷಕ ಅಂಶದ 50% ಆಗಿದೆ (ಕೆಳಗಿನ ಎಲ್ಲಾ ಉದಾಹರಣೆಗಳಲ್ಲಿ ಇನ್ಲೈನ್ ​​ಶೈಲಿಗಳು ಸೇರಿವೆ. ಉತ್ಪಾದನಾ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ, ಈ ಶೈಲಿಗಳನ್ನು ನಿಮ್ಮ ಎಲ್ಲಾ ಪುಟಗಳಾದ್ಯಂತ ನಿರ್ವಹಣೆಯ ಸುಲಭತೆಗಾಗಿ ಬಾಹ್ಯ ಸ್ಟೈಲ್ ಹಾಳೆಯಲ್ಲಿ ಬರೆಯಲಾಗುತ್ತದೆ):

ಶೈಲಿ = "ಅಗಲ: 50%;">

ಮತ್ತು ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಎತ್ತರ 2 ಎಮ್ ಆಗಿದೆ:

ಶೈಲಿ = "ಎತ್ತರ: 2em;">

ಬಾರ್ಡರ್ಸ್ ಬದಲಾಯಿಸುವುದು ಸವಾಲು ಮಾಡಬಹುದು

ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಬ್ರೌಸರ್ ಗಡಿಯನ್ನು ಸರಿಹೊಂದಿಸುವ ಮೂಲಕ ಲೈನ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. ಹಾಗಾಗಿ ನೀವು ಶೈಲಿ ಆಸ್ತಿಯ ಗಡಿಯನ್ನು ತೆಗೆದುಹಾಕಿದರೆ, ಈ ಪುಟವು ಲೈನ್ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ನೀವು ನೋಡಬಹುದು ಎಂದು (ಚೆನ್ನಾಗಿ, ನೀವು ಏನು ನೋಡಲಾಗುವುದಿಲ್ಲ, ಸಾಲುಗಳು ಅಗೋಚರವಾಗಿರುತ್ತದೆ):

ಶೈಲಿ = "ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ">

ಗಡಿ ಗಾತ್ರ, ಬಣ್ಣ, ಮತ್ತು ಶೈಲಿಯನ್ನು ಸರಿಹೊಂದಿಸುವುದರಿಂದ ಸಾಲುಗಳು ವಿಭಿನ್ನವಾಗುತ್ತವೆ ಮತ್ತು ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಒಂದೇ ಪರಿಣಾಮವನ್ನು ಹೊಂದಿರುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಈ ಪ್ರದರ್ಶನದಲ್ಲಿ ಗಡಿ ಕೆಂಪು, ಚುಚ್ಚಿದ, ಮತ್ತು 1px ವ್ಯಾಪಕವಾಗಿದೆ:

ಶೈಲಿ = "ಗಡಿ: 1px dashed # 000;">

ಆದರೆ ನೀವು ಗಡಿ ಮತ್ತು ಎತ್ತರವನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಮಾಡುವಂತೆಯೇ ಶೈಲಿಗಳು ತುಂಬಾ ಹಳೆಯ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಸ್ವಲ್ಪ ಭಿನ್ನವಾಗಿರುತ್ತವೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ನೀವು ನೋಡುವಂತೆ, ನೀವು ಅದನ್ನು IE7 ಮತ್ತು ಕೆಳಗೆ ನೋಡಿದರೆ (ಶೋಚನೀಯವಾಗಿ ಹಳತಾದ ಮತ್ತು ಮೈಕ್ರೋಸಾಫ್ಟ್ ಇನ್ನು ಮುಂದೆ ಬೆಂಬಲಿತವಾಗಿರದ ಬ್ರೌಸರ್) ಇತರ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸದಿರುವ ಒಂದು ಭವ್ಯವಾದ ಆಂತರಿಕ ರೇಖೆ ಇದೆ (IE8 ಮತ್ತು ಅಪ್ಗ್ರೇಡ್ ಸೇರಿದಂತೆ) :

ಶೈಲಿ = "ಎತ್ತರ: 1.5 ಎಮ್; ಅಗಲ: 25 ಎಮ್; ಗಡಿ: 1 ಪಿಎಕ್ಸ್ ಘನ # 000;">

ಆ ಪ್ರಾಚೀನ ಬ್ರೌಸರ್ಗಳು ಇಂದು ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಹೆಚ್ಚು ಕಾಳಜಿಯನ್ನು ಹೊಂದಿಲ್ಲ, ಏಕೆಂದರೆ ಅವುಗಳು ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಹೆಚ್ಚಾಗಿ ಬದಲಾಗಿವೆ.

ಹಿನ್ನೆಲೆ ಚಿತ್ರದೊಂದಿಗೆ ಅಲಂಕಾರಿಕ ಮಾರ್ಗವನ್ನು ಮಾಡಿ

ಬಣ್ಣಕ್ಕೆ ಬದಲಾಗಿ, ನಿಮ್ಮ HR ಗೆ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು, ಆದ್ದರಿಂದ ನೀವು ಬಯಸುವಂತೆ ಅದು ಕಾಣುತ್ತದೆ, ಆದರೆ ಇನ್ನೂ ನಿಮ್ಮ ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ಅರ್ಥೈಸಿಕೊಳ್ಳುತ್ತದೆ.

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾವು ಮೂರು ಅಲೆಗಳ ರೇಖೆಗಳ ಚಿತ್ರವನ್ನು ಬಳಸಿದ್ದೇವೆ. ಪುನರಾವರ್ತಿತವಿಲ್ಲದೆಯೇ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಅದನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ, ನೀವು ಪುಸ್ತಕಗಳಲ್ಲಿ ಕಾಣುವಂತೆಯೇ ಕಾಣುವ ವಿಷಯದಲ್ಲಿ ಅದು ವಿರಾಮವನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ:

ಶೈಲಿ = "ಎತ್ತರ: 20px; ಹಿನ್ನೆಲೆ: #fff url (aa010307.gif) ನೋ-ಪುನರಾವರ್ತಿತ ಸ್ಕ್ರಾಲ್ ಕೇಂದ್ರ; ಗಡಿ: none;">

ಎಚ್ಆರ್ ಎಲಿಮೆಂಟ್ಸ್ ಟ್ರಾನ್ಸ್ಫಾರ್ಮಿಂಗ್

CSS3 ನೊಂದಿಗೆ, ನಿಮ್ಮ ಸಾಲುಗಳನ್ನು ಇನ್ನಷ್ಟು ಆಸಕ್ತಿಕರಗೊಳಿಸಬಹುದು. ಎಚ್ಆರ್ ಅಂಶವು ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಸಮತಲವಾಗಿರುವ ರೇಖೆಯಾಗಿದೆ, ಆದರೆ ಸಿಎಸ್ಎಸ್ ರೂಪಾಂತರ ಆಸ್ತಿಯೊಂದಿಗೆ, ಅವುಗಳು ಹೇಗೆ ಕಾಣುತ್ತವೆ ಎಂಬುದನ್ನು ಬದಲಾಯಿಸಬಹುದು. ಎಚ್ಆರ್ ಅಂಶದ ಮೇಲೆ ನೆಚ್ಚಿನ ರೂಪಾಂತರವು ತಿರುಗುವಿಕೆಯನ್ನು ಬದಲಾಯಿಸುವುದು.

ನಿಮ್ಮ HR ಅಂಶವನ್ನು ನೀವು ತಿರುಗಿಸಬಹುದು ಆದ್ದರಿಂದ ಅದು ಸ್ವಲ್ಪ ಕರ್ಣೀಯವಾಗಿರುತ್ತದೆ:

hr {
-moz- ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (10deg);
-ವೆಬ್ಕಿಟ್-ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (10 ಡಿಗ್);
-ಒ ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (10 ಡಿಗ್);
-ms-transform: ತಿರುಗಿಸಿ (10deg);
ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (10 ಡಿಗ್);
}

ಅಥವಾ ನೀವು ಅದನ್ನು ತಿರುಗಿಸಬಹುದಾಗಿರುತ್ತದೆ ಅದು ಸಂಪೂರ್ಣವಾಗಿ ಲಂಬವಾದದ್ದು:

hr {
-moz- ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (90deg);
-ವೆಬ್ಕಿಟ್-ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (90 ಡಿಗ್ರಿ);
-ಒ ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (90 ಡಿಗ್ರಿ);
-ms-transform: ತಿರುಗಿಸಿ (90deg);
ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (90 ಡಿಗ್ರಿ);
}

ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಅದರ ಪ್ರಸ್ತುತ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ HR ಅನ್ನು ಸುತ್ತುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ, ಆದ್ದರಿಂದ ನೀವು ಅದನ್ನು ಎಲ್ಲಿ ಪಡೆಯಬೇಕೆಂಬುದನ್ನು ಹೊಂದಿಸಲು ನೀವು ಸ್ಥಾನೀಕರಣವನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು. ವಿನ್ಯಾಸಕ್ಕೆ ಲಂಬ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಲು ಇದನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ, ಆದರೆ ಇದು ಆಸಕ್ತಿದಾಯಕ ಪರಿಣಾಮವನ್ನು ಪಡೆಯುವ ಒಂದು ಮಾರ್ಗವಾಗಿದೆ.

ನಿಮ್ಮ ಪುಟಗಳಲ್ಲಿ ಲೈನ್ಸ್ ಪಡೆಯಲು ಮತ್ತೊಂದು ಮಾರ್ಗ

ಎಚ್ಆರ್ ಅಂಶವನ್ನು ಬಳಸುವ ಬದಲು ಕೆಲವು ಜನರು ಇತರ ಅಂಶಗಳ ಗಡಿಗಳನ್ನು ಅವಲಂಬಿಸಬೇಕಾಗಿದೆ. ಆದರೆ ಕೆಲವೊಮ್ಮೆ HR ಗಡಿಗಳನ್ನು ಹೊಂದಿಸಲು ಪ್ರಯತ್ನಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಅನುಕೂಲಕರವಾಗಿದೆ ಮತ್ತು ಬಳಸಲು ಸುಲಭವಾಗಿದೆ. ಕೆಲವು ಬ್ರೌಸರ್ಗಳ ಬಾಕ್ಸ್ ಮಾದರಿಯ ಸಮಸ್ಯೆಗಳು ಗಡಿಯನ್ನು ಸಹ ಚಾತುರ್ಯವನ್ನುಂಟುಮಾಡುತ್ತದೆ.