ನೋಟ್ಪಾಡ್ ವಿನ್ಯಾಸ ಸಿಎಸ್ಎಸ್ ಜೊತೆ ವೆಬ್ ಪುಟ ರಚಿಸಲಾಗಿದೆ

10 ರಲ್ಲಿ 01

ಸಿಎಸ್ಎಸ್ ಶೈಲಿ ಹಾಳೆ ರಚಿಸಿ

ಸಿಎಸ್ಎಸ್ ಶೈಲಿ ಹಾಳೆ ರಚಿಸಿ. ಜೆನ್ನಿಫರ್ Kyrnin

ನಾವು HTML ಗಾಗಿ ಪ್ರತ್ಯೇಕ ಪಠ್ಯ ಫೈಲ್ ಅನ್ನು ರಚಿಸಿದ ರೀತಿಯಲ್ಲಿ, ನೀವು CSS ಗಾಗಿ ಪಠ್ಯ ಫೈಲ್ ಅನ್ನು ರಚಿಸುತ್ತೀರಿ. ಈ ಪ್ರಕ್ರಿಯೆಗಾಗಿ ನೀವು ದೃಷ್ಟಿಗೋಚರ ಅಗತ್ಯವಿದ್ದರೆ ದಯವಿಟ್ಟು ಮೊದಲ ಟ್ಯುಟೋರಿಯಲ್ ಅನ್ನು ನೋಡಿ. ನೋಟ್ಪಾಡ್ನಲ್ಲಿ ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ರಚಿಸಲು ಹಂತಗಳು ಇಲ್ಲಿವೆ:

  1. ಖಾಲಿ ವಿಂಡೋವನ್ನು ಪಡೆಯಲು ನೋಟ್ಪಾಡ್ನಲ್ಲಿ ಫೈಲ್> ಹೊಸದನ್ನು ಆಯ್ಕೆಮಾಡಿ
  2. ಫೈಲ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರ ಮೂಲಕ ಫೈಲ್ ಅನ್ನು ಸಿಎಸ್ಎಸ್ ಎಂದು ಉಳಿಸಿ
  3. ನಿಮ್ಮ ಹಾರ್ಡ್ ಡ್ರೈವ್ನಲ್ಲಿನ my_website ಫೋಲ್ಡರ್ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿ
  4. "ಉಳಿಸಿ ಪ್ರಕಾರ:" "ಎಲ್ಲ ಫೈಲ್ಗಳನ್ನು" ಗೆ ಬದಲಾಯಿಸಿ
  5. ನಿಮ್ಮ ಫೈಲ್ಗೆ "styles.css" ಹೆಸರಿಸಿ (ಉಲ್ಲೇಖಗಳನ್ನು ಬಿಟ್ಟುಬಿಡಿ) ಮತ್ತು ಉಳಿಸು ಕ್ಲಿಕ್ ಮಾಡಿ

10 ರಲ್ಲಿ 02

ನಿಮ್ಮ HTML ಗೆ ಸಿಎಸ್ಎಸ್ ಶೈಲಿ ಹಾಳೆ ಲಿಂಕ್

ನಿಮ್ಮ HTML ಗೆ ಸಿಎಸ್ಎಸ್ ಶೈಲಿ ಹಾಳೆ ಲಿಂಕ್. ಜೆನ್ನಿಫರ್ Kyrnin

ನಿಮ್ಮ ವೆಬ್ ಸೈಟ್ಗಾಗಿ ನೀವು ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ಒಮ್ಮೆ ಪಡೆದುಕೊಂಡ ಬಳಿಕ, ನೀವು ಅದನ್ನು ವೆಬ್ ಪುಟಕ್ಕೆ ಸಂಯೋಜಿಸಬೇಕು. ಇದನ್ನು ಮಾಡಲು ನೀವು ಲಿಂಕ್ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಿ. ನಿಮ್ಮ pets.htm ಡಾಕ್ಯುಮೆಂಟ್ನ ಟ್ಯಾಗ್ಗಳಲ್ಲಿನ ಕೆಳಗಿನ ಲಿಂಕ್ ಟ್ಯಾಗ್ ಅನ್ನು ಇರಿಸಿ:

03 ರಲ್ಲಿ 10

ಪುಟ ಅಂಚುಗಳನ್ನು ಸರಿಪಡಿಸಿ

ಪುಟ ಅಂಚುಗಳನ್ನು ಸರಿಪಡಿಸಿ. ಜೆನ್ನಿಫರ್ Kyrnin

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

ಮೇಲಿನ ಎಡ ಮೂಲೆಯಲ್ಲಿ ನನ್ನ ಪುಟಗಳನ್ನು ಪ್ರಾರಂಭಿಸಲು ನಾನು ಬಯಸುತ್ತೇನೆ, ಪಠ್ಯವನ್ನು ಸುತ್ತುವರೆದಿರುವ ಹೆಚ್ಚುವರಿ ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಅಂಚು ಇಲ್ಲ. ನಾನು ವಿಷಯಗಳನ್ನು ಪ್ಯಾಡ್ ಮಾಡಲು ಹೋಗಿದ್ದರೂ, ನಾನು ಅಂಚುಗಳನ್ನು ಶೂನ್ಯಕ್ಕೆ ಹೊಂದಿಸಿದೆ, ಆದ್ದರಿಂದ ನಾನು ಅದೇ ಖಾಲಿ ಸ್ಲೇಟನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತಿದ್ದೇನೆ. ಇದನ್ನು ಮಾಡಲು, ನಿಮ್ಮ styles.css ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಕೆಳಗಿನದನ್ನು ಸೇರಿಸಿ:

HTML, ದೇಹ {
ಅಂಚು: 0px;
ಪ್ಯಾಡಿಂಗ್: 0px;
ಗಡಿ: 0px;
ಎಡ: 0px;
ಉನ್ನತ: 0px;
}

10 ರಲ್ಲಿ 04

ಪುಟದಲ್ಲಿ ಫಾಂಟ್ ಬದಲಾಯಿಸುವುದು

ಪುಟದಲ್ಲಿ ಫಾಂಟ್ ಬದಲಾಯಿಸುವುದು. ಜೆನ್ನಿಫರ್ Kyrnin

ಫಾಂಟ್ ಸಾಮಾನ್ಯವಾಗಿ ನೀವು ವೆಬ್ ಪುಟದಲ್ಲಿ ಬದಲಾಯಿಸಲು ಬಯಸುವಿರಿ ಎಂದು ಮೊದಲ ವಿಷಯ. ವೆಬ್ ಪುಟದಲ್ಲಿನ ಪೂರ್ವನಿಯೋಜಿತ ಫಾಂಟ್ ಕೊಳಕು ಆಗಿರಬಹುದು, ಮತ್ತು ವಾಸ್ತವವಾಗಿ ವೆಬ್ ಬ್ರೌಸರ್ ಕೂಡಾ, ಆದ್ದರಿಂದ ನೀವು ಫಾಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸದಿದ್ದರೆ, ನಿಮ್ಮ ಪುಟವು ಏನೆಲ್ಲಾ ಕಾಣುತ್ತದೆ ಎಂದು ನಿಮಗೆ ನಿಜವಾಗಿ ತಿಳಿದಿರುವುದಿಲ್ಲ.

ವಿಶಿಷ್ಟವಾಗಿ, ನೀವು ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳ ಮೇಲೆ ಫಾಂಟ್ ಬದಲಾಯಿಸಬಹುದು, ಅಥವಾ ಕೆಲವೊಮ್ಮೆ ಇಡೀ ಡಾಕ್ಯುಮೆಂಟ್ ಸ್ವತಃ. ಈ ಸೈಟ್ಗಾಗಿ ನಾವು ಹೆಡರ್ ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್ ಮಟ್ಟದಲ್ಲಿ ಫಾಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ. ನಿಮ್ಮ styles.css ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಿ:

p, li {
ಫಾಂಟ್: 1 ಎಮ್ ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್;
}
h1 {
ಫಾಂಟ್: 2 ಎಮ್ ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್;
}
h2 {
ಫಾಂಟ್: 1.5 ಎಮ್ ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್;
}
h3 {
font: 1.25em Arial, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್;
}

ನಾನು ಪ್ಯಾರಾಗಳು ಮತ್ತು ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ನನ್ನ ಬೇಸ್ ಗಾತ್ರವನ್ನು 1em ಪ್ರಾರಂಭವಾಯಿತು, ತದನಂತರ ನನ್ನ ಮುಖ್ಯಾಂಶಗಳು ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ನಾನು H4 ಗಿಂತ ಆಳವಾದ ಶಿರೋನಾಮೆಯನ್ನು ಬಳಸಲು ಅಪೇಕ್ಷಿಸುವುದಿಲ್ಲ, ಆದರೆ ನೀವು ಯೋಜಿಸಿದರೆ ಅದನ್ನು ಶೈಲಿಗೆ ಸಹ ಬೇಕು.

10 ರಲ್ಲಿ 05

ನಿಮ್ಮ ಲಿಂಕ್ಗಳನ್ನು ಹೆಚ್ಚು ಆಸಕ್ತಿಕರಗೊಳಿಸುವುದು

ನಿಮ್ಮ ಲಿಂಕ್ಗಳನ್ನು ಹೆಚ್ಚು ಆಸಕ್ತಿಕರಗೊಳಿಸುವುದು. ಜೆನ್ನಿಫರ್ Kyrnin

ಕೊಂಡಿಗಳು ಡೀಫಾಲ್ಟ್ ಬಣ್ಣಗಳನ್ನು ಅನುಕ್ರಮವಾಗಿ ಭೇಟಿ ಮತ್ತು ಭೇಟಿ ಕೊಂಡಿಗಳು ನೀಲಿ ಮತ್ತು ನೇರಳೆ ಇವೆ. ಇದು ಪ್ರಮಾಣಕವಾಗಿದ್ದರೂ, ಅದು ನಿಮ್ಮ ಪುಟಗಳ ಬಣ್ಣದ ಯೋಜನೆಗೆ ಸರಿಹೊಂದುವುದಿಲ್ಲ, ಹಾಗಾಗಿ ಅದನ್ನು ಬದಲಾಯಿಸೋಣ. ನಿಮ್ಮ styles.css ಕಡತದಲ್ಲಿ, ಈ ಕೆಳಗಿನ ಸೇರಿಸಿ:

a: link {
ಫಾಂಟ್-ಕುಟುಂಬ: ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್;
ಬಣ್ಣ: # FF9900;
ಪಠ್ಯ ಅಲಂಕಾರ: ಅಂಡರ್ಲೈನ್;
}
a: ಭೇಟಿ ಮಾಡಲಾದ {
ಬಣ್ಣ: # FFCC66;
}
a: ಹೂವರ್ {
ಹಿನ್ನೆಲೆ: #FFFFCC;
ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ;
}

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

10 ರ 06

ನ್ಯಾವಿಗೇಷನ್ ವಿಭಾಗವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು

ನ್ಯಾವಿಗೇಷನ್ ವಿಭಾಗವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು. ಜೆನ್ನಿಫರ್ Kyrnin

ನಾವು ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಮೊದಲು ಸಂಚರಣೆ (ಐಡಿ = "ನ್ಯಾವಿ") ವಿಭಾಗವನ್ನು ಹಾಕಿದ ನಂತರ, ಮೊದಲು ಅದನ್ನು ಶೈಲಿ ಮಾಡೋಣ. ಮುಖ್ಯ ಪಠ್ಯವು ಅದರ ವಿರುದ್ಧ ಬಂಪ್ ಮಾಡುವುದಿಲ್ಲ ಎಂದು ನಾವು ಎಷ್ಟು ವಿಶಾಲವಾದ ಅಗಲವನ್ನು ಸೂಚಿಸಬೇಕು ಮತ್ತು ಸರಿಯಾದ ಬದಿಯಲ್ಲಿ ವಿಶಾಲ ಅಂತರವನ್ನು ಹಾಕಬೇಕು. ನಾನು ಅದರ ಸುತ್ತಲೂ ಗಡಿ ಹಾಕಿದ್ದೇನೆ.

ನಿಮ್ಮ styles.css ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಕೆಳಗಿನ ಸಿಎಸ್ಎಸ್ ಸೇರಿಸಿ:

#nav {
ಅಗಲ: 225 px;
ಅಂಚು-ಬಲ: 15px;
ಗಡಿ: ಮಧ್ಯಮ ಘನ # 000000;
}
# ನ್ಯಾವ್ ಲಿ {
ಪಟ್ಟಿ-ಶೈಲಿ: ಯಾವುದೂ ಇಲ್ಲ;
}
.ಫೂಟರ್ {
ಫಾಂಟ್-ಗಾತ್ರ: .75em;
ಸ್ಪಷ್ಟ: ಎರಡೂ;
ಅಗಲ: 100%;
text-align: center;
}

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

10 ರಲ್ಲಿ 07

ಮುಖ್ಯ ವಿಭಾಗವನ್ನು ಸ್ಥಾನಪಲ್ಲಟಗೊಳಿಸುವುದು

ಮುಖ್ಯ ವಿಭಾಗವನ್ನು ಸ್ಥಾನಪಲ್ಲಟಗೊಳಿಸುವುದು. ಜೆನ್ನಿಫರ್ Kyrnin

ಸಂಪೂರ್ಣ ಸ್ಥಾನದೊಂದಿಗೆ ನಿಮ್ಮ ಮುಖ್ಯ ವಿಭಾಗವನ್ನು ಸ್ಥಾನಕ್ಕೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ವೆಬ್ ಪುಟದಲ್ಲಿ ಉಳಿಯಬೇಕೆಂಬುದನ್ನು ನೀವು ನಿಖರವಾಗಿ ಎಲ್ಲಿಯೇ ಇಟ್ಟುಕೊಳ್ಳುತ್ತೀರಿ ಎಂದು ಖಚಿತವಾಗಿ ತಿಳಿಯಬಹುದು. ನಾನು ದೊಡ್ಡ ಮಾನಿಟರ್ಗಳನ್ನು ಹೊಂದಲು 800px ಅಗಲವನ್ನು ಹೊಂದಿದ್ದೇನೆ, ಆದರೆ ನೀವು ಚಿಕ್ಕ ಮಾನಿಟರ್ ಹೊಂದಿದ್ದರೆ, ನೀವು ಕಿರಿದಾದಂತೆ ಮಾಡಲು ಬಯಸಬಹುದು.

ನಿಮ್ಮ styles.css ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಕೆಳಗಿನವುಗಳನ್ನು ಇರಿಸಿ:

# ಮುಖ್ಯ {
ಅಗಲ: 800px;
ಉನ್ನತ: 0px;
ಸ್ಥಾನ: ಸಂಪೂರ್ಣ;
ಎಡ: 250px;
}

10 ರಲ್ಲಿ 08

ನಿಮ್ಮ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು

ನಿಮ್ಮ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು. ಜೆನ್ನಿಫರ್ Kyrnin

ನಾನು ಈಗಾಗಲೇ ಮೇಲಿನ ಪ್ಯಾರಾಗ್ರಾಫ್ ಫಾಂಟ್ ಅನ್ನು ಹೊಂದಿದ್ದರಿಂದ, ಪ್ರತಿ ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ ಸ್ವಲ್ಪ ಹೆಚ್ಚುವರಿ "ಕಿಕ್" ಅನ್ನು ನೀಡಲು ಅದು ಉತ್ತಮವಾಗಿದೆ. ಕೇವಲ ಚಿತ್ರಕ್ಕಿಂತಲೂ ಹೆಚ್ಚು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಿದ ಮೇಲಿರುವ ಅಂಚನ್ನು ಹಾಕುವ ಮೂಲಕ ನಾನು ಇದನ್ನು ಮಾಡಿದೆ.

ನಿಮ್ಮ styles.css ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಕೆಳಗಿನವುಗಳನ್ನು ಇರಿಸಿ:

.ಮೇಲಿನ ಸಾಲು {
ಗಡಿ-ಮೇಲಿನ: ದಪ್ಪ ಘನ # FFCC00;
}

ಆ ರೀತಿಯಲ್ಲಿ ಎಲ್ಲಾ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳನ್ನು ವಿವರಿಸುವ ಬದಲು "ಟೊಪ್ಲೈನ್" ಎಂಬ ವರ್ಗವಾಗಿ ನಾನು ಅದನ್ನು ಮಾಡಲು ನಿರ್ಧರಿಸಿದೆ. ಈ ರೀತಿಯಲ್ಲಿ, ನಾನು ಉನ್ನತ ಹಳದಿ ರೇಖೆಯಿಲ್ಲದೆ ಪ್ಯಾರಾಗ್ರಾಫ್ ಹೊಂದಬೇಕೆಂದು ನಾನು ನಿರ್ಧರಿಸಿದರೆ, ಪ್ಯಾರಾಗ್ರಾಫ್ ಟ್ಯಾಗ್ನಲ್ಲಿ ವರ್ಗ = "ಟೊಪ್ಲೈನ್" ಅನ್ನು ನಾನು ಸರಳವಾಗಿ ಬಿಟ್ಟುಬಿಡಬಹುದು ಮತ್ತು ಅದು ಉನ್ನತ ಗಡಿಯನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ.

09 ರ 10

ಚಿತ್ರಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು

ಚಿತ್ರಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು. ಜೆನ್ನಿಫರ್ Kyrnin

ಚಿತ್ರಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅವುಗಳ ಸುತ್ತಲಿನ ಗಡಿಯನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಚಿತ್ರವು ಲಿಂಕ್ ಆಗಿರದೆ ಇದ್ದಲ್ಲಿ ಇದು ಯಾವಾಗಲೂ ಗೋಚರಿಸುವುದಿಲ್ಲ, ಆದರೆ ನನ್ನ CSS ಸ್ಟೈಲ್ಶೀಟ್ನಲ್ಲಿ ವರ್ಗವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಂಟಿಸುವಂತೆ ನಾನು ಬಯಸುತ್ತೇನೆ. ಈ ಸ್ಟೈಲ್ಶೀಟ್ಗಾಗಿ, ನಾನು "ನೊವೊಡರ್" ವರ್ಗವನ್ನು ರಚಿಸಿದೆ, ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಹೆಚ್ಚಿನ ಚಿತ್ರಗಳು ಈ ವರ್ಗದ ಭಾಗವಾಗಿದೆ.

ಈ ಚಿತ್ರಗಳ ಇತರ ವಿಶೇಷ ಭಾಗವು ಪುಟದಲ್ಲಿನ ಸ್ಥಳವಾಗಿದೆ. ನಾನು ಅವುಗಳನ್ನು ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಭಾಗವಾಗಿ ಇಟ್ಟುಕೊಳ್ಳಲು ಕೋಷ್ಟಕಗಳನ್ನು ಬಳಸದೆ ಇರುತ್ತೇನೆ ಎಂದು ನಾನು ಬಯಸುತ್ತೇನೆ. ಫ್ಲೋಟ್ ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವುದು ಸರಳವಾದ ಮಾರ್ಗವಾಗಿದೆ.

ನಿಮ್ಮ styles.css ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಕೆಳಗಿನವುಗಳನ್ನು ಇರಿಸಿ:

#ಮೇನ್ img {
ಫ್ಲೋಟ್: ಎಡ;
ಅಂಚು-ಬಲ: 5 px;
ಅಂಚು-ಕೆಳಗೆ: 15px;
}
.noborder {
ಗಡಿ: 0px ಯಾವುದೂ ಇಲ್ಲ;
}

ನೀವು ನೋಡಬಹುದು ಎಂದು, ಚಿತ್ರಗಳಲ್ಲಿ ಸೆಟ್ ಅಂಚು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸಹ, ಅವರು ಪ್ಯಾರಾಗಳು ಅವುಗಳನ್ನು ಪಕ್ಕದಲ್ಲಿ ಎಂದು ತೇಲಾಡುವ ಪಠ್ಯ ವಿರುದ್ಧ ಒಡೆದುಹಾಕಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು.

10 ರಲ್ಲಿ 10

ಈಗ ನಿಮ್ಮ ಪೂರ್ಣಗೊಂಡ ಪುಟವನ್ನು ನೋಡಿ

ಈಗ ನಿಮ್ಮ ಪೂರ್ಣಗೊಂಡ ಪುಟವನ್ನು ನೋಡಿ. ಜೆನ್ನಿಫರ್ Kyrnin

ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ನೀವು ಉಳಿಸಿದ ನಂತರ ನಿಮ್ಮ ವೆಬ್ ಬ್ರೌಸರ್ನಲ್ಲಿ ನೀವು pets.htm ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಬಹುದು. ಈ ಪುಟದಲ್ಲಿ ತೋರಿಸಿದಂತೆ ನಿಮ್ಮ ಪುಟವು ಹೋಲುತ್ತದೆ, ಚಿತ್ರಗಳನ್ನು ಜೋಡಿಸಿದ ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್ ಪುಟದ ಎಡಭಾಗದಲ್ಲಿ ಸರಿಯಾಗಿ ಇರಿಸಲಾಗಿದೆ.

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