ಟೇಬಲ್ಸ್ ಇಲ್ಲದೆ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಲು ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣವನ್ನು ಹೇಗೆ ಬಳಸುವುದು

ಟೇಬಲ್ಲೆಸ್ ಲೇಔಟ್ಗಳ ಹೊಸ ವಿನ್ಯಾಸ ಫ್ರಾಂಟಿಯರ್ಗಳನ್ನು ತೆರೆಯಿರಿ

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

ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣದ ಬ್ರೌಸರ್ ಬೆಂಬಲ

ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣ ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆ. ನೀವು ನೆಟ್ಸ್ಕೇಪ್ 4 ಅಥವಾ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 4 ಗಾಗಿ ಸೈಟ್ ಅನ್ನು ನಿರ್ಮಿಸದಿದ್ದರೆ, ನಿಮ್ಮ ಓದುಗರು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್-ಸ್ಥಾನದಲ್ಲಿರುವ ವೆಬ್ ಪುಟಗಳನ್ನು ನೋಡುವಲ್ಲಿ ಯಾವುದೇ ತೊಂದರೆ ಇರಬಾರದು.

ನೀವು ಪುಟವನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುತ್ತೀರಿ ಎಂಬುದನ್ನು ಮರುಕಳಿಸುವ

ಕೋಷ್ಟಕಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಸೈಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿದಾಗ, ನೀವು ಕೋಷ್ಟಕ ಸ್ವರೂಪದಲ್ಲಿ ಯೋಚಿಸಬೇಕು. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ನೀವು ಕೋಶಗಳು ಮತ್ತು ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್ಗಳ ಪರಿಭಾಷೆಯಲ್ಲಿ ಯೋಚಿಸುತ್ತಿದ್ದೀರಿ. ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳು ಈ ವಿಧಾನವನ್ನು ಪ್ರತಿಫಲಿಸುತ್ತದೆ. ನೀವು ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣ ವಿನ್ಯಾಸಕ್ಕೆ ತೆರಳಿದಾಗ, ವಿಷಯದ ವಿಷಯದಲ್ಲಿ ನಿಮ್ಮ ಪುಟಗಳನ್ನು ನೀವು ಆಲೋಚಿಸುತ್ತೀರಿ, ಏಕೆಂದರೆ ನೀವು ಲೇಔಟ್ನಲ್ಲಿ ಎಲ್ಲಿ ಬೇಕಾದರೂ ಇರಿಸಬಹುದು - ಇತರ ವಿಷಯದ ಮೇಲಿರುವ ಲೇಯರ್ ಸಹ.

ವಿವಿಧ ವೆಬ್ಸೈಟ್ಗಳು ವಿಭಿನ್ನ ರಚನೆಗಳನ್ನು ಹೊಂದಿವೆ. ಪರಿಣಾಮಕಾರಿಯಾದ ಪುಟವನ್ನು ನಿರ್ಮಿಸಲು, ನೀವು ಅದಕ್ಕೆ ವಿಷಯವನ್ನು ನಿಗದಿಪಡಿಸುವ ಮೊದಲು ಯಾವುದೇ ಪುಟದ ರಚನೆಯನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ. ಉದಾಹರಣೆ ಪುಟವು ಐದು ವಿಭಿನ್ನ ವಿಭಾಗಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು:

1. ಶಿರೋಲೇಖ . ಬ್ಯಾನರ್ ಜಾಹಿರಾತು, ಸೈಟ್ ಹೆಸರು, ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ಗಳು, ಒಂದು ಲೇಖನ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಕೆಲವು ಇತರ ವಿಷಯಗಳಿಗೆ ಮುಖಪುಟ.
2. ಬಲ ಕಾಲಮ್ . ಹುಡುಕಾಟ ಪೆಟ್ಟಿಗೆ, ಜಾಹೀರಾತುಗಳು, ವೀಡಿಯೊ ಪೆಟ್ಟಿಗೆಗಳು ಮತ್ತು ಶಾಪಿಂಗ್ ಪ್ರದೇಶಗಳೊಂದಿಗೆ ಇದು ಪುಟದ ಬಲಭಾಗವಾಗಿದೆ.
3. ವಿಷಯ . ಲೇಖನದ ಪಠ್ಯ, ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಅಥವಾ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್-ಪುಟದ ಮಾಂಸ ಮತ್ತು ಆಲೂಗಡ್ಡೆ.
4. ಇನ್ಲೈನ್ ​​ಜಾಹೀರಾತುಗಳು . ವಿಷಯದ ಒಳಗೆ ಇನ್ಲೈನ್ ​​ಜಾಹೀರಾತುಗಳು.
5. ಅಡಿಟಿಪ್ಪಣಿ . ಕೆಳಗೆ ಸಂಚರಣೆ, ಲೇಖಕ ಮಾಹಿತಿ, ಹಕ್ಕುಸ್ವಾಮ್ಯ ಮಾಹಿತಿ, ಕಡಿಮೆ ಬ್ಯಾನರ್ ಜಾಹೀರಾತುಗಳು, ಮತ್ತು ಸಂಬಂಧಿತ ಲಿಂಕ್ಗಳು.

ಟೇಬಲ್ನಲ್ಲಿ ಆ ಐದು ಅಂಶಗಳನ್ನು ಹಾಕುವ ಬದಲು, ವಿಷಯದ ವಿಭಿನ್ನ ಭಾಗಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು HTML5 ವಿಭಾಗೀಕರಣ ಅಂಶಗಳನ್ನು ಬಳಸಿ, ತದನಂತರ ಪುಟದ ವಿಷಯ ಅಂಶಗಳನ್ನು ಇರಿಸಲು ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಳಸಿ.

ನಿಮ್ಮ ವಿಷಯ ವಿಭಾಗಗಳನ್ನು ಗುರುತಿಸುವುದು

ನಿಮ್ಮ ಸೈಟ್ನ ವಿವಿಧ ವಿಷಯ ಪ್ರದೇಶಗಳನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಿದ ನಂತರ, ನಿಮ್ಮ HTML ಗೆ ಅವುಗಳನ್ನು ಬರೆಯಬೇಕಾಗಿದೆ. ಸಾಮಾನ್ಯವಾಗಿ, ನೀವು ಯಾವುದೇ ವಿಭಾಗದಲ್ಲಿ ನಿಮ್ಮ ವಿಭಾಗಗಳನ್ನು ಇರಿಸಬಹುದು, ನಿಮ್ಮ ಪುಟದ ಪ್ರಮುಖ ಭಾಗಗಳನ್ನು ಮೊದಲಿಗೆ ಇರಿಸುವುದು ಒಳ್ಳೆಯದು. ಹುಡುಕಾಟ ವಿಧಾನ ಎಂಜಿನ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಜೊತೆಗೆ ಈ ವಿಧಾನವು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

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

ಮೂರು ಕಾಲಮ್ ಲೇಔಟ್ಗಾಗಿ, ಮೂರು ವಿಭಾಗಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ: ಎಡ ಕಾಲಮ್, ಬಲ ಕಾಲಮ್ ಮತ್ತು ವಿಷಯ.

ಈ ವಿಭಾಗಗಳು ವಿಷಯಕ್ಕಾಗಿ ARTICLE ಎಲಿಮೆಂಟ್ ಮತ್ತು ಎರಡು ಕಾಲಮ್ಗಳಿಗಾಗಿ ಎರಡು SECTION ಅಂಶಗಳನ್ನು ಬಳಸಿಕೊಂಡು ತತ್ಕ್ಷಣವೇ ಅಳವಡಿಸಲ್ಪಡುತ್ತವೆ. ಪ್ರತಿಯೊಂದೂ ಅದನ್ನು ಗುರುತಿಸುವ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ನೀವು id ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವಾಗ, ನೀವು ಪ್ರತಿ ಐಡಿಗೆ ವಿಶಿಷ್ಟವಾದ ಹೆಸರನ್ನು ನೀಡಬೇಕು.

ವಿಷಯ ಸ್ಥಾನೀಕರಣ

ಸಿಎಸ್ಎಸ್ ಬಳಸಿ, ನಿಮ್ಮ ID'd ಅಂಶಗಳಿಗಾಗಿ ಸ್ಥಾನವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ. ನಿಮ್ಮ ಸ್ಥಾನ ಮಾಹಿತಿಯನ್ನು ಈ ರೀತಿ ಶೈಲಿಯ ಕರೆನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ:

#content {

}

ಈ ಅಂಶಗಳಲ್ಲಿನ ವಿಷಯವು ಸಾಧ್ಯವಾದಷ್ಟು ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಅವುಗಳೆಂದರೆ ಪ್ರಸ್ತುತ ಸ್ಥಳ ಅಥವಾ ಪುಟದ ಅಗಲದ 100 ಪ್ರತಿಶತ. ಒಂದು ವಿಭಾಗದ ಸ್ಥಳವನ್ನು ಅದನ್ನು ಸ್ಥಿರ ಅಗಲಕ್ಕೆ ಒತ್ತಾಯಿಸದೆ ಪರಿಣಾಮ ಬೀರಲು, ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಅಂಚು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸಿ.

ಈ ಲೇಔಟ್ಗಾಗಿ, ಎರಡು ಲಂಬಸಾಲುಗಳನ್ನು ಸ್ಥಿರ ಅಗಲಕ್ಕೆ ಹೊಂದಿಸಿ ನಂತರ ಅವುಗಳ ಸ್ಥಾನವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಸಿ, ಆದ್ದರಿಂದ ಅವು ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಎಲ್ಲಿ ಕಂಡುಬಂದಿದೆ ಎಂಬುದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.

# ಎಡ-ಕಾಲಮ್ {
ಸ್ಥಾನ: ಸಂಪೂರ್ಣ;
ಎಡ: 0;
ಅಗಲ: 150px;
ಅಂಚು-ಎಡ: 10px;
ಅಂಚು-ಮೇಲಿನ: 20px;
ಬಣ್ಣ: # 000000;
ಪ್ಯಾಡಿಂಗ್: 3 px;
}
# ಬಲ-ಕಾಲಮ್ {
ಸ್ಥಾನ: ಸಂಪೂರ್ಣ;
ಎಡ: 80%;
ಉನ್ನತ: 20px;
ಅಗಲ: 140px;
ಪ್ಯಾಡಿಂಗ್-ಎಡ: 10px;
z- ಸೂಚ್ಯಂಕ: 3;
ಬಣ್ಣ: # 000000;
ಪ್ಯಾಡಿಂಗ್: 3 px;
}

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

#content {
ಉನ್ನತ: 0px;
ಅಂಚು: 0px 25% 0 165px;
ಪ್ಯಾಡಿಂಗ್: 3 px;
ಬಣ್ಣ: # 000000;
}

HTML ಟೇಬಲ್ನ ಬದಲಾಗಿ ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ನಿಮ್ಮ ಪುಟವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ತಾಂತ್ರಿಕ ಕೌಶಲ್ಯದ ಅಗತ್ಯವಿರುತ್ತದೆ, ಆದರೆ ಪ್ರತಿಫಲವು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವಿನ್ಯಾಸಗಳಿಂದ ಅನುಸರಿಸುತ್ತದೆ ಮತ್ತು ನಂತರ ನಿಮ್ಮ ಪುಟಕ್ಕೆ ರಚನಾತ್ಮಕ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಮಾಡುವಲ್ಲಿ ಹೆಚ್ಚು ಸುಲಭವಾಗುತ್ತದೆ.