01 ರ 01
ಹೇಗೆ CSS ಮತ್ತು ಯಾವುದೇ ಚಿತ್ರಗಳು ಟ್ಯಾಬ್ಡ್ ನ್ಯಾವಿಗೇಶನ್ ರಚಿಸಲು
ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ನ್ಯಾವಿಗೇಶನ್ ಒಂದು ಪಟ್ಟಿಯಾಗಿದೆ, ಮತ್ತು ಟಾಬ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಸಮತಲವಾದ ಪಟ್ಟಿಯಾಗಿರುತ್ತದೆ. CSS ನೊಂದಿಗೆ ಸಮತಲ ಟ್ಯಾಬ್ಡ್ ನ್ಯಾವಿಗೇಶನ್ ರಚಿಸಲು ಇದು ತುಂಬಾ ಸುಲಭ, ಆದರೆ ಸಿಎಸ್ಎಸ್ 3 ನಮಗೆ ಇನ್ನಷ್ಟು ಒಳ್ಳೆಯ ಸಾಧನಗಳನ್ನು ನೀಡುತ್ತದೆ.
ಈ ಟ್ಯುಟೋರಿಯಲ್ ಸಿಎಸ್ಎಸ್ ಟಾಬ್ಡ್ ಮೆನುವನ್ನು ರಚಿಸಲು ಅಗತ್ಯವಿರುವ ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಮೂಲಕ ನಿಮ್ಮನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಅದು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂದು ನೋಡಲು ಆ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.
ಈ ಟಾಬ್ಡ್ ಮೆನು ಯಾವುದೇ ಚಿತ್ರಗಳು , ಕೇವಲ ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್ 2 ಮತ್ತು ಸಿಎಸ್ಎಸ್ 3 ಅನ್ನು ಬಳಸುತ್ತದೆ. ಹೆಚ್ಚು ಟ್ಯಾಬ್ಗಳನ್ನು ಸೇರಿಸಲು ಅಥವಾ ಅವುಗಳನ್ನು ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸಲು ಸುಲಭವಾಗಿ ಸಂಪಾದಿಸಬಹುದು.
ಬ್ರೌಸರ್ ಬೆಂಬಲ
ಈ ಟ್ಯಾಬ್ ಮೆನು ಎಲ್ಲಾ ಪ್ರಮುಖ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ತೋರಿಸುವುದಿಲ್ಲ, ಆದರೆ ಅದು ಫೈರ್ಫಾಕ್ಸ್, ಸಫಾರಿ, ಒಪೆರಾ ಮತ್ತು ಕ್ರೋಮ್ನಂತಹ ಟ್ಯಾಬ್ಗಳನ್ನು ತೋರಿಸುತ್ತದೆ.
02 ರ 06
ನಿಮ್ಮ ಮೆನು ಪಟ್ಟಿ ಬರೆಯಿರಿ
ಎಲ್ಲಾ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳು ಮತ್ತು ಟ್ಯಾಬ್ಗಳು ನಿಜವಾಗಿಯೂ ಕೇವಲ ಆರ್ಡರ್ ಮಾಡದ ಪಟ್ಟಿಗಳಾಗಿವೆ. ಆದ್ದರಿಂದ ನೀವು ಮಾಡಬೇಕಾದ ಮೊದಲ ವಿಷಯವು ನಿಮ್ಮ ಟ್ಯಾಬ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಎಲ್ಲಿ ಹೋಗಬೇಕೆಂದು ನೀವು ಬಯಸುವ ಲಿಂಕ್ಗಳ ಪಟ್ಟಿ ಮಾಡದಿರುವ ಪಟ್ಟಿಯನ್ನು ಬರೆಯಿರಿ.
ನೀವು ಪಠ್ಯ ಸಂಪಾದಕದಲ್ಲಿ ನಿಮ್ಮ HTML ಅನ್ನು ಬರೆಯುತ್ತಿದ್ದಾರೆ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಪುಟದಲ್ಲಿ ನಿಮ್ಮ ಮೆನುಗಾಗಿ HTML ಅನ್ನು ಎಲ್ಲಿ ಇರಿಸಬೇಕೆಂದು ನಿಮಗೆ ತಿಳಿದಿದೆ ಎಂದು ಈ ಟ್ಯುಟೋರಿಯಲ್ ಊಹಿಸುತ್ತದೆ.
ನಿಮ್ಮ ಅನಿಯಮಿತ ಪಟ್ಟಿ ಬರೆಯಿರಿ:
- class = "tablist">
- ಸಿಎಸ್ಎಸ್ 3
- id = "current"> ಟ್ಯಾಬ್ಗಳು
- ಫಾರ್
- ಮೆನುಗಳು
ಈ ಕೋಡ್ ಎರಡು ವಿಷಯಗಳನ್ನು ಕರೆಯುತ್ತದೆ ಎಂದು ನೀವು ಗಮನಿಸಬಹುದು: class = "tablist" ಮತ್ತು id = "current". ಮೊದಲನೆಯದು ಅಗತ್ಯವಿದೆ . ನಿಮ್ಮ ಪಟ್ಟಿ ಮಾಡದ ಪಟ್ಟಿಯಲ್ಲಿ ನೀವು ಟ್ಯಾಬ್ಲಿಸ್ಟ್ ವರ್ಗವನ್ನು ಇರಿಸದಿದ್ದರೆ, ಟ್ಯಾಬ್ಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ಎರಡನೆಯದು ಐಚ್ಛಿಕ. ಆ ಪುಟದಲ್ಲಿ ಹೈಲೈಟ್ ಮಾಡಲು ನೀವು ಬಯಸುವ ಯಾವುದೇ ಟ್ಯಾಬ್ನಲ್ಲಿ id = "current" ಅನ್ನು ಹಾಕಿ. ನಾನು ಸಾಮಾನ್ಯವಾಗಿರುವ ಪುಟವನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಇದನ್ನು ನಾನು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುತ್ತಿದ್ದೇನೆ, ಆದರೆ ಪ್ರಮುಖ ಟ್ಯಾಬ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ನೀವು ಅದನ್ನು ಬಳಸಬಹುದು. ಅಥವಾ ನೀವು ಅದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕಬಹುದು.
03 ರ 06
ನಿಮ್ಮ ಸ್ಟೈಲ್ ಶೀಟ್ ಅನ್ನು ಸಂಪಾದಿಸಲು ಪ್ರಾರಂಭಿಸಿ
ನೀವು ಬಾಹ್ಯ ಶೈಲಿಯ ಶೀಟ್ ಅಥವಾ ಆಂತರಿಕ ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ಬಳಸಬಹುದು . ಮಾದರಿ ಮೆನು ಪುಟ ಡಾಕ್ಯುಮೆಂಟ್ನ
ನಲ್ಲಿ ಆಂತರಿಕ ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ಬಳಸುತ್ತದೆ.ಫಸ್ಟ್ ವಿ ವಿಲ್ ಸ್ಟೈಲ್ ಯುಎಲ್ ಇಟ್ಸೆಲ್ಫ್
ಇಲ್ಲಿ ನಾವು ವರ್ಗ ಟ್ಯಾಬ್ಲಿಸ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ. HTML ನಲ್ಲಿ. UL ಟ್ಯಾಗ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದಕ್ಕಿಂತ ಬದಲಾಗಿ, ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ಎಲ್ಲಾ ಪಟ್ಟಿಗಳಿಲ್ಲದ ಶೈಲಿಯನ್ನು ಶೈಲಿಗೆ ಬದಲಾಯಿಸುವಂತೆ, ನೀವು UL ವರ್ಗವನ್ನು ಮಾತ್ರ ಶೈಲಿಯನ್ನಾಗಿ ಮಾಡಬೇಕು. ಟ್ಯಾಬ್ಲಿಸ್ಟ್ ಆದ್ದರಿಂದ ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ನಲ್ಲಿ ಮೊದಲ ಪ್ರವೇಶ ಇರಬೇಕು:
.ಟ್ಯಾಬ್ಲಿಸ್ಟ್ {}ಸಮಯಕ್ಕೆ ಮುಂಚೆಯೇ ಅಂತ್ಯಗೊಳ್ಳುವ ಸುರುಳಿಯಾದ ಬ್ರೇಸ್ (}) ಅನ್ನು ನಾನು ಹಾಕಲು ಇಷ್ಟಪಡುತ್ತೇನೆ, ಹಾಗಾಗಿ ಅದನ್ನು ನಾನು ಮರೆತುಬಿಡುವುದಿಲ್ಲ.
ನಾವು ಟ್ಯಾಬ್ ಮೆನ್ಯು ಪಟ್ಟಿಗಾಗಿ ಆರ್ಡರ್ ಮಾಡದ ಪಟ್ಟಿಯನ್ನು ಟ್ಯಾಗ್ ಬಳಸುತ್ತಿದ್ದರೂ, ಯಾವುದೇ ಗುಂಡುಗಳು ಅಥವಾ ಸಂಖ್ಯೆಗಳು ಸೈನ್ ಇನ್ ಆಗಲು ನಮಗೆ ಇಷ್ಟವಿಲ್ಲ. ಆದ್ದರಿಂದ ನೀವು ಸೇರಿಸಬೇಕಾದ ಮೊದಲ ಶೈಲಿಯಾಗಿದೆ. ಪಟ್ಟಿ-ಶೈಲಿ: ಯಾವುದೂ ಇಲ್ಲ; ಇದು ಪಟ್ಟಿಯಾದರೂ, ಇದು ಪೂರ್ವ ನಿರ್ಧಾರಿತ ಶೈಲಿಗಳಿಲ್ಲದ (ಬುಲೆಟ್ಗಳು ಅಥವಾ ಸಂಖ್ಯೆಗಳಂತೆ) ಪಟ್ಟಿಯನ್ನು ಹೊಂದಿರುವ ಬ್ರೌಸರ್ಗೆ ಇದು ಹೇಳುತ್ತದೆ.
ನಂತರ, ನೀವು ತುಂಬಲು ಬಯಸುವ ಜಾಗವನ್ನು ಹೊಂದಿಸಲು ನಿಮ್ಮ ಪಟ್ಟಿಯ ಎತ್ತರವನ್ನು ನೀವು ಹೊಂದಿಸಬಹುದು. ನನ್ನ ಎತ್ತರಕ್ಕಾಗಿ ನಾನು 2em ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿದ್ದೇನೆ, ಅದು ಪ್ರಮಾಣಿತ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ದ್ವಿಗುಣಗೊಳಿಸುತ್ತದೆ, ಮತ್ತು ಟ್ಯಾಬ್ನ ಪಠ್ಯಕ್ಕಿಂತ ಮೇಲಿರುವ ಅರ್ಧ ಎಮ್ ಅನ್ನು ನೀಡುತ್ತದೆ. ಎತ್ತರ: 2 ಎಮ್; ಆದರೆ ನೀವು ಬಯಸುವ ಯಾವುದೇ ಗಾತ್ರಕ್ಕೆ ನಿಮ್ಮ ಅಗಲವನ್ನು ನೀವು ಹೊಂದಿಸಬಹುದು. UL ಟ್ಯಾಗ್ಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ 100% ಅಗಲವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ಪ್ರಸ್ತುತ ಧಾರಕಕ್ಕಿಂತ ಚಿಕ್ಕದಾಗಿರಬೇಕೆಂದು ಬಯಸಿದರೆ, ನೀವು ಅಗಲವನ್ನು ಬಿಡಬಹುದು.
ಅಂತಿಮವಾಗಿ, ನಿಮ್ಮ ಮಾಸ್ಟರ್ ಸ್ಟೈಲ್ ಹಾಳೆಯಲ್ಲಿ UL ಮತ್ತು OL ಟ್ಯಾಗ್ಗಳಿಗಾಗಿ ಪೂರ್ವನಿಗದಿಗಳು ಇದ್ದಲ್ಲಿ, ನೀವು ಅವುಗಳನ್ನು ಸೇರಿಸಲು ಬಯಸುತ್ತೀರಿ. ಇದರರ್ಥ ನೀವು ನಿಮ್ಮ UL ನಲ್ಲಿ ಅಂಚುಗಳನ್ನು, ಅಂಚುಗಳನ್ನು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಆಫ್ ಮಾಡಬೇಕು. ಪ್ಯಾಡಿಂಗ್: 0; ಅಂಚು: 0; ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ; ನೀವು ಈಗಾಗಲೇ UL ಟ್ಯಾಗ್ ಅನ್ನು ಮರುಹೊಂದಿಸಿದರೆ, ಅಂಚುಗಳು, ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಗಡಿಯನ್ನು ನಿಮ್ಮ ವಿನ್ಯಾಸದೊಂದಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವಂತಹವುಗಳಿಗೆ ನೀವು ಬದಲಾಯಿಸಬಹುದು.
ನಿಮ್ಮ ಅಂತಿಮ .ಟ್ಯಾಬ್ಲಿಸ್ಟ್ ವರ್ಗವು ಹೀಗಿರಬೇಕು:
.ಟ್ಯಾಬ್ಲಿಸ್ಟ್ {ಪಟ್ಟಿ-ಶೈಲಿ: ಯಾವುದೂ ಇಲ್ಲ; ಎತ್ತರ: 2 ಎಮ್; ಪ್ಯಾಡಿಂಗ್: 0; ಅಂಚು: 0; ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ; }04 ರ 04
LI ಪಟ್ಟಿ ಐಟಂಗಳ ಸಂಪಾದನೆ
ನಿಮ್ಮ ಅನಿಯಮಿತ ಪಟ್ಟಿಯನ್ನು ನೀವು ಒಮ್ಮೆ ವಿನ್ಯಾಸ ಮಾಡಿದರೆ, ಅದರೊಳಗೆ ನೀವು LI ಟ್ಯಾಗ್ಗಳನ್ನು ಶೈಲಿ ಮಾಡಬೇಕಾಗಿದೆ. ಇಲ್ಲದಿದ್ದರೆ, ಅವರು ನಿಮ್ಮ ಟ್ಯಾಬ್ಗಳನ್ನು ಸರಿಯಾಗಿ ಇರಿಸುವಂತೆ ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಪಟ್ಟಿಯಂತೆ ಮತ್ತು ಮುಂದಿನ ಸಾಲಿಗೆ ಪ್ರತಿ ನಡೆಸುವಿಕೆಯನ್ನು ವರ್ತಿಸುತ್ತಾರೆ.
ಮೊದಲು, ನಿಮ್ಮ ಶೈಲಿ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿಸಿ:
.tablist li {}ನಂತರ ನೀವು ನಿಮ್ಮ ಟ್ಯಾಬ್ಗಳನ್ನು ತೇಲಾಡಲು ಬಯಸುತ್ತೀರಿ, ಆದ್ದರಿಂದ ಅವರು ಸಮತಲ ಸಮತಲದಲ್ಲಿ ಸಾಲಿನಲ್ಲಿರುತ್ತಾರೆ. ಫ್ಲೋಟ್: ಎಡ;
ಮತ್ತು ಟ್ಯಾಬ್ಗಳ ನಡುವೆ ಕೆಲವು ಅಂಚುಗಳನ್ನು ಸೇರಿಸಲು ಮರೆಯಬೇಡಿ, ಆದ್ದರಿಂದ ಅವರು ಒಟ್ಟಿಗೆ ವಿಲೀನಗೊಳ್ಳುವುದಿಲ್ಲ. ಅಂಚು-ಬಲ: 0.13em;
ನಿಮ್ಮ ಲಿ ಶೈಲಿಗಳು ಹೀಗಿರಬೇಕು:
.tablist li {ಫ್ಲೋಟ್: ಎಡ; ಅಂಚು-ಬಲ: 0.13em; }05 ರ 06
ಟ್ಯಾಬ್ಗಳನ್ನು ಮೇಕಿಂಗ್ ಸಿಎಸ್ಎಸ್ 3 ನೊಂದಿಗೆ ಟ್ಯಾಬ್ಗಳನ್ನು ಕಾಣುತ್ತದೆ
ಈ ಶೈಲಿಯ ಹಾಳೆಯಲ್ಲಿ ಭಾರೀ ತರಬೇತಿ ಮಾಡಲು, ನಾನು ಪಟ್ಟಿ ಮಾಡದ ಪಟ್ಟಿಯಲ್ಲಿರುವ ಲಿಂಕ್ಗಳನ್ನು ಗುರಿಪಡಿಸುತ್ತೇನೆ. ಲಿಂಕ್ಗಳು ಇತರ ಟ್ಯಾಗ್ಗಳಿಗಿಂತ ಹೆಚ್ಚು ವೆಬ್ ಪುಟದಲ್ಲಿರುವುದನ್ನು ಬ್ರೌಸರ್ಗಳು ಗುರುತಿಸುತ್ತವೆ, ಆದ್ದರಿಂದ ಹಳೆಯ ಬ್ರೌಸರ್ಗಳನ್ನು ನೀವು ಆಂಕರ್ ಟ್ಯಾಗ್ (ಲಿಂಕ್ಗಳು) ಗೆ ಲಗತ್ತಿಸಿದರೆ ಹೂವರ್ ರಾಜ್ಯಗಳಂತಹ ವಿಷಯಗಳನ್ನು ಅನುಸರಿಸಲು ಸುಲಭವಾಗಿದೆ. ಆದ್ದರಿಂದ ಮೊದಲು ನಿಮ್ಮ ಶೈಲಿ ಗುಣಗಳನ್ನು ಬರೆಯಿರಿ:
.tablist ಒಂದು {} .tablist ಒಂದು: ಹೂವರ್ {}ಈ ಟ್ಯಾಬ್ಗಳು ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ಟ್ಯಾಬ್ಗಳಂತೆ ವರ್ತಿಸಬೇಕಾದ ಕಾರಣ, ಲಿಂಕ್ ಮಾಡಲಾದ ಪಠ್ಯವಲ್ಲ, ಟ್ಯಾಬ್ನ ಸಂಪೂರ್ಣ ಪ್ರದೇಶವು ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದದು ಎಂದು ನೀವು ಬಯಸುತ್ತೀರಿ. ಇದನ್ನು ಮಾಡಲು, ನೀವು ಒಂದು ಟ್ಯಾಗ್ ಅನ್ನು ಸಾಮಾನ್ಯವಾದ " ಇನ್ಲೈನ್ " ಸ್ಥಿತಿಯಿಂದ ಬ್ಲಾಕ್ ಅಂಶವಾಗಿ ಪರಿವರ್ತಿಸಬೇಕು . ಪ್ರದರ್ಶಿಸು: ನಿರ್ಬಂಧಿಸು; (ವ್ಯತ್ಯಾಸದ ಬಗ್ಗೆ ಹೆಚ್ಚು ತಿಳಿಯಲು ನಿಮಗೆ ಆಸಕ್ತಿ ಇದ್ದರೆ, ಬ್ಲಾಕ್-ಲೆವೆಲ್ vs. ಇನ್ಲೈನ್ ಎಲಿಮೆಂಟ್ಸ್ ಅನ್ನು ಓದಿ .)
ನಂತರ, ನಿಮ್ಮ ಟ್ಯಾಬ್ಗಳು ಒಂದಕ್ಕೊಂದು ಸಮ್ಮಿತೀಯವಾಗಿರಲು ಒತ್ತಾಯಿಸಲು ಸುಲಭವಾದ ಮಾರ್ಗವಾಗಿದೆ, ಆದರೆ ಪಠ್ಯದ ಅಗಲವನ್ನು ಸರಿಹೊಂದಿಸಲು ಇನ್ನೂ ಹೊಂದಿಕೊಳ್ಳುವದು ಬಲ ಮತ್ತು ಎಡವನ್ನು ಪ್ಯಾಡಿಂಗ್ ಮಾಡುವುದು. ಪ್ಯಾಡಿಂಗ್ ಶಾರ್ಟ್ಯಾಂಡ್ ಆಸ್ತಿಯನ್ನು ಮೇಲಿನ ಮತ್ತು ಕೆಳಕ್ಕೆ 0 ಮತ್ತು ಬಲ ಮತ್ತು ಎಡಕ್ಕೆ 1em ಗೆ ಹೊಂದಿಸಲು ನಾನು ಬಳಸಿದೆ. ಪ್ಯಾಡಿಂಗ್: 0 1em;
ಲಿಂಕ್ ಅನ್ನು ಕೂಡಾ ತೆಗೆದುಹಾಕಲು ನಾನು ಆಯ್ಕೆ ಮಾಡಿದೆ, ಆದ್ದರಿಂದ ಟ್ಯಾಬ್ಗಳು ಲಿಂಕ್ಗಳಂತೆ ಕಡಿಮೆ ಕಾಣುತ್ತವೆ. ಆದರೆ ನಿಮ್ಮ ಪ್ರೇಕ್ಷಕರು ಅದನ್ನು ಗೊಂದಲಕ್ಕೀಡಾಗಿದ್ದರೆ, ಈ ಸಾಲನ್ನು ಬಿಟ್ಟುಬಿಡಿ. ಲಿಂಕ್-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ;
ಟ್ಯಾಬ್ಗಳ ಸುತ್ತ ತೆಳುವಾದ ಗಡಿ ಹಾಕುವ ಮೂಲಕ, ಅದು ಅವುಗಳನ್ನು ಟ್ಯಾಬ್ಗಳಂತೆ ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ. ನಾನು ನಾಲ್ಕು ಗಡಿಗಳ ಸುತ್ತಲೂ ಗಡಿಯನ್ನು ಹಾಕಲು ಗಡಿ ಸಂಕ್ಷಿಪ್ತ ಆಸ್ತಿಯನ್ನು ಬಳಸಿದ್ದೇನೆ: 0.06em ಘನ # 000; ತದನಂತರ ಗಡಿ-ಕೆಳಗಿನ ಆಸ್ತಿಯನ್ನು ಕೆಳಗಿನಿಂದ ತೆಗೆದುಹಾಕಲು ಬಳಸಲಾಗುತ್ತದೆ. ಗಡಿ-ಕೆಳಗೆ: 0;
ನಂತರ ನಾನು ಫಾಂಟ್, ಬಣ್ಣ ಮತ್ತು ಟ್ಯಾಬ್ಗಳ ಹಿನ್ನಲೆ ಬಣ್ಣಕ್ಕೆ ಕೆಲವು ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಮಾಡಿದೆ. ನಿಮ್ಮ ಸೈಟ್ಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಶೈಲಿಗಳಿಗೆ ಇದನ್ನು ಹೊಂದಿಸಿ. ಫಾಂಟ್: ದಪ್ಪ 0.88em / 2em ಏರಿಯಲ್, ಜಿನಿವಾ, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; ಬಣ್ಣ: # 000; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #ccc;
ಮೇಲಿನ ಎಲ್ಲಾ ಶೈಲಿಗಳು ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ ಹೋಗಬೇಕು .ಟ್ಯಾಬ್ಲಿಸ್ಟ್ ಲಿ, ಈ ನಿಯಮವು ಸಾಮಾನ್ಯವಾಗಿ ಆಂಕರ್ ಟ್ಯಾಗ್ಗಳನ್ನು ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. ನಂತರ ಟ್ಯಾಬ್ಗಳನ್ನು ಹೆಚ್ಚು ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದಂತೆ ಮಾಡಲು, ನೀವು ಕೆಲವು ರಾಜ್ಯ ನಿಯಮವನ್ನು ಸೇರಿಸಬೇಕು .tablist li: a hover.
ನೀವು ಅದರ ಮೇಲೆ ಮೌಸ್ ಅನ್ನು ಮಾಡಿದಾಗ ಟ್ಯಾಬ್ ಪಾಪ್ ಮಾಡಲು ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಲು ನಾನು ಇಷ್ಟಪಡುತ್ತೇನೆ. ಹಿನ್ನೆಲೆ: # 3cf; ಬಣ್ಣ: #fff;
ಲಿಂಕ್ ಅನ್ನು ಅಂಡರ್ಲೈನ್ ಮಾಡದಿರಲು ನಾನು ಬಯಸುವ ಬ್ರೌಸರ್ಗಳಿಗೆ ಮತ್ತೊಂದು ಜ್ಞಾಪನೆಯನ್ನು ನಾನು ಸೇರಿಸಿದೆ. ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ; ಮತ್ತೊಂದು ಸಾಮಾನ್ಯ ವಿಧಾನವೆಂದರೆ, ಟ್ಯಾಬ್ ಮೇಲೆ ನೀವು ಮೌಸ್ ಇರುವಾಗ ಅಂಡರ್ಲೈನ್ ಅನ್ನು ತಿರುಗಿಸುವುದು. ನೀವು ಅದನ್ನು ಮಾಡಲು ಬಯಸಿದರೆ, ಅದನ್ನು ಪಠ್ಯ-ಅಲಂಕಾರಕ್ಕೆ ಬದಲಾಯಿಸಿ: ಅಂಡರ್ಲೈನ್;
ಆದರೆ ಸಿಎಸ್ಎಸ್ 3 ಎಲ್ಲಿದೆ?
ನೀವು ಗಮನ ಕೇಂದ್ರೀಕರಿಸುತ್ತಿದ್ದರೆ, ಸ್ಟೈಲ್ ಹಾಳೆಯಲ್ಲಿ ಬಳಸಲಾದ ಯಾವುದೇ ಸಿಎಸ್ಎಸ್ 3 ಶೈಲಿಗಳಿಲ್ಲ ಎಂದು ನೀವು ಬಹುಶಃ ಗಮನಿಸಿದ್ದೀರಿ. ಇದು ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ ಸೇರಿದಂತೆ ಯಾವುದೇ ಆಧುನಿಕ ಬ್ರೌಸರ್ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಪ್ರಯೋಜನವನ್ನು ಹೊಂದಿದೆ. ಆದರೆ ಟ್ಯಾಬ್ಗಳು ಚದರ ಪೆಟ್ಟಿಗೆಗಳಿಗಿಂತ ಹೆಚ್ಚಿನದನ್ನು ಕಾಣುವುದಿಲ್ಲ. ಸಿಎಸ್ಎಸ್ 3 ಶೈಲಿಯ ಕರೆ ಗಡಿ-ತ್ರಿಜ್ಯವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ (ಮತ್ತು ಇದು ಬ್ರೌಸರ್-ನಿರ್ದಿಷ್ಟ ಕರೆಗಳಿಗೆ ಸಂಬಂಧಿಸಿರುತ್ತದೆ) ನೀವು ಅಂಚುಗಳನ್ನು ದುಂಡಾದ ಮಾಡಬಹುದು, ಮನಿಲಾ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಹೆಚ್ಚು ಟ್ಯಾಬ್ಗಳನ್ನು ನೋಡಲು.
ನೀವು ಸೇರಿಸಬೇಕಾದ ಶೈಲಿಗಳು .tablist li ಒಂದು ನಿಯಮ: -ವೆಬ್ಕಿಟ್-ಗಡಿ-ಮೇಲಿನ-ಬಲ-ತ್ರಿಜ್ಯ: 0.50em; -ವೆಬ್ಕಿಟ್-ಗಡಿ-ಮೇಲಿನ-ಎಡ-ತ್ರಿಜ್ಯ: 0.50em; -ಮೊಝ್-ಗಡಿ-ತ್ರಿಜ್ಯ-ಅಗ್ರಗಣ್ಯ: 0.50em; -moz- ಗಡಿ-ತ್ರಿಜ್ಯ-ತುದಿ: 0.50em; ಗಡಿ-ಮೇಲಿನ-ಬಲ-ತ್ರಿಜ್ಯ: 0.50em; ಗಡಿ-ಮೇಲಿನ-ಎಡ-ತ್ರಿಜ್ಯ: 0.50em;
ಇವುಗಳು ನಾನು ಬರೆದ ಅಂತಿಮ ಶೈಲಿಯ ನಿಯಮಗಳು:
.tablist ಒಂದು {ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಪ್ಯಾಡಿಂಗ್: 0 1em; ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ; ಗಡಿ: 0.06em ಘನ # 000; ಗಡಿ-ಕೆಳಗೆ: 0; ಫಾಂಟ್: ದಪ್ಪ 0.88em / 2em ಏರಿಯಲ್, ಜಿನಿವಾ, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; ಬಣ್ಣ: # 000; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #ccc; / * ಸಿಎಸ್ಎಸ್ 3 ಅಂಶಗಳು * / ವೆಬ್ಕಿಟ್-ಗಡಿ-ಮೇಲಿನ-ಬಲ-ತ್ರಿಜ್ಯ: 0.50em; -ವೆಬ್ಕಿಟ್-ಗಡಿ-ಮೇಲಿನ-ಎಡ-ತ್ರಿಜ್ಯ: 0.50em; -ಮೊಝ್-ಗಡಿ-ತ್ರಿಜ್ಯ-ಅಗ್ರಗಣ್ಯ: 0.50em; -moz- ಗಡಿ-ತ್ರಿಜ್ಯ-ತುದಿ: 0.50em; ಗಡಿ-ಮೇಲಿನ-ಬಲ-ತ್ರಿಜ್ಯ: 0.50em; ಗಡಿ-ಮೇಲಿನ-ಎಡ-ತ್ರಿಜ್ಯ: 0.50em; } .tablist li: a hover {background: # 3cf; ಬಣ್ಣ: #fff; ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ; }ಈ ಶೈಲಿಗಳೊಂದಿಗೆ, ನೀವು ಟ್ಯಾಬ್ಡ್ ಮೆನುವನ್ನು ಹೊಂದಿದ್ದು ಅದು ಎಲ್ಲಾ ಪ್ರಮುಖ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು CSS 3 ದೂರು ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಸಂತೋಷವನ್ನು ಮುದ್ರಿತ ಟ್ಯಾಬ್ಗಳಂತೆ ಕಾಣುತ್ತದೆ. ಮುಂದಿನ ಪುಟವು ನೀವು ಅದನ್ನು ಇನ್ನಷ್ಟು ಅಲಂಕರಿಸಲು ಬಳಸಬಹುದಾದ ಮತ್ತೊಂದು ಆಯ್ಕೆಯನ್ನು ನೀಡುತ್ತದೆ.
06 ರ 06
ಪ್ರಸ್ತುತ ಟ್ಯಾಬ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಿ
ನಾನು ರಚಿಸಿದ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ, ಯುಎಲ್ ಒಂದು ಪಟ್ಟಿ ಹೊಂದಿರುವ ಒಂದು ಅಂಶವನ್ನು ಹೊಂದಿತ್ತು. ಉಳಿದಂತೆ ಒಂದು LI ಅನ್ನು ಬೇರೆ ಶೈಲಿಯನ್ನು ನೀಡುವುದನ್ನು ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಪ್ರಸಕ್ತ ಟ್ಯಾಬ್ ಅನ್ನು ಕೆಲವು ರೀತಿಯಲ್ಲಿ ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡುವುದು ಸಾಮಾನ್ಯ ಪರಿಸ್ಥಿತಿ. ಇದರ ಬಗ್ಗೆ ಯೋಚಿಸುವುದು ಮತ್ತೊಂದು ಮಾರ್ಗವಾಗಿದೆ, ಅದು ನೇರವಿಲ್ಲದ ಟ್ಯಾಬ್ಗಳನ್ನು ಬೂದುಗೊಳಿಸಲು ಬಯಸುತ್ತದೆ. ಐಡಿ ವಿವಿಧ ಪುಟಗಳಲ್ಲಿ ಎಲ್ಲಿದೆ ಎಂದು ನೀವು ಬದಲಾಯಿಸಬಹುದು.
ನಾನು ಎರಡೂ ಶೈಲಿಯನ್ನು ಒಂದು ಟ್ಯಾಗ್ನಂತೆ ಮತ್ತು #current ಎ: ಶೈಲಿಯನ್ನು ಹೋವರ್ ಮಾಡಿ ಆದ್ದರಿಂದ ಎರಡೂ ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾಗಿದೆ. ಆ ಬಣ್ಣದ ಬಣ್ಣ, ಹಿನ್ನೆಲೆ ಬಣ್ಣ, ಎತ್ತರ, ಅಗಲ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ನೀವು ಬದಲಾಯಿಸಬಹುದು. ನಿಮ್ಮ ವಿನ್ಯಾಸದಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಏನೇ ಮಾಡಿರಿ.
.tablist li # ಪ್ರಸ್ತುತ {background-color: # 777; ಬಣ್ಣ: #fff; } .tablist li # ಪ್ರಸ್ತುತ: hover {background: # 39C; }ಮತ್ತು ನೀವು ಮುಗಿಸಿದ್ದೀರಿ! ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ಗಾಗಿ ನೀವು ಟ್ಯಾಬ್ಡ್ ಮೆನುವನ್ನು ರಚಿಸಿದ್ದೀರಿ.