01 ਦਾ 10
CSS ਸ਼ੈਲੀ ਸ਼ੀਟ ਬਣਾਓ
ਇਸੇ ਤਰ੍ਹਾਂ ਅਸੀਂ HTML ਲਈ ਇੱਕ ਵੱਖਰੀ ਪਾਠ ਫਾਇਲ ਬਣਾਈ ਹੈ, ਤੁਸੀਂ CSS ਲਈ ਇੱਕ ਟੈਕਸਟ ਫਾਇਲ ਬਣਾਉਗੇ. ਜੇ ਤੁਹਾਨੂੰ ਇਸ ਪ੍ਰਕਿਰਿਆ ਲਈ ਦਿੱਖ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਤਾਂ ਕਿਰਪਾ ਕਰਕੇ ਪਹਿਲੇ ਟਿਊਟੋਰਿਯਲ ਨੂੰ ਦੇਖੋ. ਨੋਟਪੈਡ ਵਿਚ ਆਪਣੀ CSS ਸਟਾਈਲ ਸ਼ੀਟ ਬਣਾਉਣ ਲਈ ਇੱਥੇ ਕਦਮ ਹਨ:
- ਖਾਲੀ ਵਿੰਡੋ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਫੋਟਕ> ਨੋਟਪੈਡ ਵਿਚ ਨਵਾਂ ਚੁਣੋ
- ਫਾਇਲ ਨੂੰ ਕਲਿਕ ਕਰਕੇ CSS ਨੂੰ ਸੇਵ ਕਰੋ ... ਇੰਝ ਸੰਭਾਲੋ ...
- ਆਪਣੀ ਹਾਰਡ ਡਰਾਈਵ ਤੇ my_website ਫੋਲਡਰ ਤੇ ਜਾਓ
- "ਸਾਰੇ ਫਾਈਲਾਂ" ਨੂੰ "ਐਜ਼ ਕਿਸਮ ਸੇਵ ਕਰੋ" ਨੂੰ ਬਦਲੋ
- ਆਪਣੀ ਫਾਇਲ ਨੂੰ "styles.css" (ਕੋਟਸ ਛੱਡੋ) ਅਤੇ ਸੁਰੱਖਿਅਤ ਕਰੋ ਤੇ ਕਲਿੱਕ ਕਰੋ
02 ਦਾ 10
CSS ਸਟਾਇਲ ਸ਼ੀਟ ਨੂੰ ਆਪਣੀ HTML ਤੇ ਲਿੰਕ ਕਰੋ
ਇੱਕ ਵਾਰੀ ਤੁਸੀਂ ਆਪਣੀ ਵੈਬ ਸਾਈਟ ਲਈ ਸ਼ੈਲੀ ਸ਼ੀਟ ਪ੍ਰਾਪਤ ਕਰ ਲਵੋਂ, ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ ਵੈਬ ਪੇਜ ਉੱਤੇ ਜੋੜਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ. ਅਜਿਹਾ ਕਰਨ ਲਈ ਤੁਸੀਂ ਲਿੰਕ ਟੈਗ ਵਰਤਦੇ ਹੋ ਆਪਣੇ ਪਾਲਤੂ ਜਾਨਵਰਾਂ ਦੇ
ਟੈਗ ਦੇ ਅੰਦਰ ਕਿਤੇ ਵੀ ਹੇਠਾਂ ਦਿੱਤੇ ਲਿੰਕ ਟੈਗ ਨੂੰ ਰੱਖੋ:03 ਦੇ 10
ਸਫ਼ਾ ਮਾਰਜਨ ਨੂੰ ਠੀਕ ਕਰੋ
ਜਦੋਂ ਤੁਸੀਂ ਵੱਖਰੇ ਬ੍ਰਾਊਜ਼ਰ ਲਈ XHTML ਲਿਖ ਰਹੇ ਹੋ, ਇੱਕ ਗੱਲ ਜੋ ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਉਹ ਇਹ ਹੈ ਕਿ ਉਹਨਾਂ ਵਿੱਚ ਵੱਖ ਵੱਖ ਮਾਰਜਿਨ ਅਤੇ ਨਿਯਮ ਹੁੰਦੇ ਹਨ ਕਿ ਉਹ ਚੀਜ਼ਾਂ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ. ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਹੈ ਕਿ ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਤੁਹਾਡੀ ਸਾਈਟ ਇਕੋ ਜਿਹੀ ਹੈ, ਮਾਰਜਿਨ ਵਰਗੀਆਂ ਚੀਜਾਂ ਜਿਵੇਂ ਕਿ ਬ੍ਰਾਉਜ਼ਰ ਦੀ ਚੋਣ ਵਿੱਚ ਡਿਫੌਲਟ ਕਰਨ ਦੀ ਆਗਿਆ ਨਹੀਂ ਦਿੰਦਾ.
ਮੈਂ ਉੱਪਰਲੇ ਖੱਬੀ ਕੋਨੇ 'ਤੇ ਆਪਣੇ ਪੇਜ਼ਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦਾ ਹਾਂ, ਪਾਠ ਦੇ ਆਲੇ ਦੁਆਲੇ ਕੋਈ ਵਾਧੂ ਪੈਡਿੰਗ ਜਾਂ ਮਾਰਜਿਨ ਨਹੀਂ. ਭਾਵੇਂ ਮੈਂ ਸਮੱਗਰੀ ਨੂੰ ਪੈਡ ਕਰਨ ਜਾ ਰਿਹਾ ਹਾਂ, ਮੈਂ ਮਾਰਜਿਨ ਨੂੰ ਸ਼ੁੱਧ ਕਰ ਦਿੱਤਾ ਹੈ ਤਾਂ ਜੋ ਮੈਂ ਉਸੇ ਖਾਲੀ ਸਲੇਟ ਨਾਲ ਸ਼ੁਰੂ ਕਰ ਸਕਾਂ. ਅਜਿਹਾ ਕਰਨ ਲਈ, ਆਪਣੇ styles.css ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਹੇਠ ਲਿਖੋ:
html, body {
ਹਾਸ਼ੀਆ: 0 ਪੈਕਸ;
ਪੈਡਿੰਗ: 0 ਪੈਕਸ;
ਬਾਰਡਰ: 0 ਪੈਕਸ;
ਖੱਬੇ: 0 ਪੈਕਸ;
ਸਿਖਰ: 0 ਪੈਕਸ;
}
04 ਦਾ 10
ਪੰਨਾ ਉੱਤੇ ਫੋਂਟ ਬਦਲਣਾ
ਫੌਂਟ ਅਕਸਰ ਉਹ ਸਭ ਤੋਂ ਪਹਿਲੀ ਚੀਜ ਹੈ ਜੋ ਤੁਸੀਂ ਵੈਬ ਪੇਜ ਤੇ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋਵੋਗੇ. ਵੈਬ ਪੇਜ ਤੇ ਡਿਫਾਲਟ ਫੌਂਟ ਭੁਰਭਗਤ ਹੋ ਸਕਦਾ ਹੈ, ਅਤੇ ਅਸਲ ਵਿੱਚ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਹੀ ਹੈ, ਸੋ ਜੇਕਰ ਤੁਸੀਂ ਫੌਂਟ ਨਹੀਂ ਪਰਿਭਾਸ਼ਤ ਕਰਦੇ, ਤਾਂ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਤੁਹਾਡਾ ਸਫ਼ਾ ਕਿਹੋ ਜਿਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ.
ਆਮ ਤੌਰ ਤੇ, ਤੁਸੀਂ ਪੈਰਾਗ੍ਰਾਫ ਤੇ ਫੌਂਟ ਬਦਲਦੇ ਹੋ, ਜਾਂ ਕਦੇ-ਕਦੇ ਪੂਰੇ ਦਸਤਾਵੇਜ਼ ਉੱਤੇ ਵੀ. ਇਸ ਸਾਈਟ ਲਈ ਅਸੀਂ ਸਿਰਲੇਖ ਅਤੇ ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਪੱਧਰ ਤੇ ਫੋਂਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਾਂਗੇ. ਆਪਣੇ styles.css ਦਸਤਾਵੇਜ਼ ਨੂੰ ਹੇਠਾਂ ਸ਼ਾਮਲ ਕਰੋ:
p, li {
ਫੌਂਟ: 1ਮ ਏਰੀਅਲ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸ-ਸੀਰੀਫ;
}
h1 {
ਫੌਂਟ: 2ਮ ਏਰੀਅਲ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸ-ਸੀਰੀਫ;
}
h2 {
ਫੌਂਟ: 1.5ਮ ਏਰੀਅਲ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸ-ਸੀਰੀਫ;
}
h3 {
ਫੌਂਟ: 1.25ਮ ਆਰੀਅਲ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸ-ਸੀਰੀਫ;
}
ਮੈਂ ਪੈਰਾਗ੍ਰਾਫਿਆਂ ਅਤੇ ਸੂਚੀ ਵਸਤੂਆਂ ਲਈ ਮੇਰੇ ਬੇਸ ਆਕਾਰ ਦੇ 1e ਦੇ ਨਾਲ ਅਰੰਭ ਕੀਤਾ, ਅਤੇ ਫਿਰ ਇਸਦੀ ਵਰਤੋਂ ਮੇਰੀ ਸੁਰਖੀਆ ਲਈ ਅਕਾਰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੀਤੀ. ਮੈਨੂੰ ਇੱਕ ਹੈੱਡਲਾਈਨ ਨੂੰ h4 ਨਾਲੋਂ ਡੂੰਘੇ ਵਰਤਣ ਦੀ ਉਮੀਦ ਨਹੀਂ ਹੈ, ਪਰ ਜੇ ਤੁਸੀਂ ਯੋਜਨਾ ਬਣਾਉਂਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਇਸ ਨੂੰ ਵੀ ਸਟਾਈਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ.
05 ਦਾ 10
ਆਪਣੇ ਲਿੰਕ ਵਧੇਰੇ ਦਿਲਚਸਪ ਬਣਾਉਣਾ
ਲਿੰਕਸ ਲਈ ਡਿਫਾਲਟ ਰੰਗ ਅਨੁਸਾਰੀ ਅਤੇ ਵਿਜ਼ਿਟ ਕੀਤੇ ਲਿੰਕ ਲਈ ਕ੍ਰਮਵਾਰ ਨੀਲੇ ਅਤੇ ਜਾਮਨੀ ਹਨ. ਹਾਲਾਂਕਿ ਇਹ ਮਿਆਰੀ ਹੈ, ਇਹ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਦੀ ਰੰਗ ਸਕੀਮ ਵਿੱਚ ਫਿੱਟ ਨਹੀਂ ਹੋ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਆਓ ਇਸ ਨੂੰ ਬਦਲੀਏ. ਤੁਹਾਡੀ styles.css ਫਾਇਲ ਵਿੱਚ, ਹੇਠ ਲਿਖੋ:
a: ਲਿੰਕ {
ਫੌਂਟ-ਫੈਮਿਲੀ: ਏਅਅਲ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸ-ਸੀਰੀਫ;
ਰੰਗ: # FF9900;
ਪਾਠ-ਸਜਾਵਟ: ਹੇਠਾਂ ਲਕੀਰ;
}
a: ਦੌਰਾ ਕੀਤਾ ਗਿਆ {
color: # FFCC66;
}
a: ਹੋਵਰ {
ਪਿਛੋਕੜ: #FFFFCC;
ਫੌਂਟ-ਭਾਰ: ਬੋਲਡ;
}
ਮੈਂ ਤਿੰਨ ਲਿੰਕ ਸਟਾਈਲ ਸਥਾਪਤ ਕੀਤੀ, ਇੱਕ: ਲਿੰਕ ਡਿਫਾਲਟ ਵਜੋਂ, ਇੱਕ: ਜਦੋਂ ਇਹ ਖੋਲ੍ਹਿਆ ਗਿਆ ਸੀ ਤਾਂ ਦੌਰਾ ਕੀਤਾ ਗਿਆ, ਮੈਂ ਰੰਗ ਬਦਲਦਾ ਹਾਂ, ਅਤੇ ਏ: ਹੋਵਰ. ਇੱਕ ਦੇ ਨਾਲ: ਹੋਵਰ ਵਿੱਚ ਮੇਰੇ ਕੋਲ ਲਿੰਕ ਨੂੰ ਬੈਕਗਰਾਉਂਡ ਕਲਰ ਪ੍ਰਾਪਤ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇਸ ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਦਲੇਰ ਹੋ ਜਾਂਦਾ ਹੈ ਕਿ ਇਸਨੂੰ ਕਲਿੱਕ ਕਰਨ ਲਈ ਇੱਕ ਲਿੰਕ ਹੈ.
06 ਦੇ 10
ਨੇਵੀਗੇਸ਼ਨ ਸੈਕਸ਼ਨ ਸਟਾਇਲਿੰਗ
ਕਿਉਂਕਿ ਅਸੀਂ ਨੇਵੀਗੇਸ਼ਨ (id = "nav") ਸੈਕਸ਼ਨ ਨੂੰ ਐਚਟੀਐਮਐਲ ਵਿੱਚ ਪਹਿਲਦੇ ਹਾਂ, ਆਓ ਇਸਦਾ ਪਹਿਲਾ ਸਟਾਇਲ ਕਰੀਏ. ਸਾਨੂੰ ਇਹ ਦਰਸਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਕਿ ਇਸ ਨੂੰ ਕਿੰਨੀ ਚੌੜਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਸੱਜੇ ਪਾਸਿਓਂ ਇਕ ਵਿਆਪਕ ਮਾਤ ਪਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜੋ ਮੁੱਖ ਟੈਕਸਟ ਇਸਦੇ ਉਲਟ ਨਾ ਆਵੇ. ਮੈਂ ਇਸ ਦੇ ਦੁਆਲੇ ਇੱਕ ਬਾਰਡਰ ਵੀ ਲਗਾਇਆ
ਆਪਣੇ styles.css ਦਸਤਾਵੇਜ਼ ਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ CSS ਸ਼ਾਮਲ ਕਰੋ:
#nav {
ਚੌੜਾਈ: 225 ਪੈਕਸ;
ਹਾਸ਼ੀਆ-ਸੱਜੇ: 15px;
ਸਰਹੱਦ: ਮੱਧਮ ਠੋਸ # 000000;
}
#nav li {
ਸੂਚੀ-ਸ਼ੈਲੀ: ਕੋਈ ਨਹੀਂ;
}
.footer {
ਫੌਂਟ-ਆਕਾਰ: .75em;
ਸਾਫ਼: ਦੋਵੇਂ;
ਚੌੜਾਈ: 100%;
text-align: ਸੈਂਟਰ;
}
ਸੂਚੀ-ਸ਼ੈਲੀ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੇ ਸੂਚੀ ਵਿੱਚ ਗੋਲੀ ਜਾਂ ਸੰਖਿਆਵਾਂ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਨ ਲਈ ਨੈਵੀਗੇਸ਼ਨ ਸੈਕਸ਼ਨ ਦੇ ਅੰਦਰ ਸਥਾਪਤ ਕੀਤੀ ਹੈ, ਅਤੇ .footer ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਭਾਗਾਂ ਵਿੱਚ ਛੋਟਾ ਅਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਕਾਪੀਰਾਈਟ ਭਾਗ ਹੈ.
10 ਦੇ 07
ਮੁੱਖ ਸੈਕਸ਼ਨ ਪਾਉਣਾ
ਆਪਣੇ ਮੁੱਖ ਭਾਗ ਨੂੰ ਸੰਪੂਰਨ ਸਥਿਤੀ ਨਾਲ ਸਥਾਪਤ ਕਰਕੇ ਤੁਸੀਂ ਨਿਸ਼ਚਤ ਹੋ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਉਹੀ ਰਹੇਗਾ ਜਿੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਵੈਬ ਪੇਜ ਤੇ ਰਹਿਣਾ ਚਾਹੁੰਦੇ ਹੋ. ਮੈਂ ਵੱਡੇ ਮਾਨੀਟਰਾਂ ਨੂੰ ਰੱਖਣ ਲਈ 800px ਚੌੜਾ ਬਣਾਇਆ, ਪਰ ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਛੋਟਾ ਮਾਨੀਟਰ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਉਸ ਸੰਕੁਚਨ ਨੂੰ ਬਣਾਉਣਾ ਚਾਹੋਗੇ.
ਆਪਣੇ styles.css ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਹੇਠ ਲਿਖੇ ਸਥਾਨ ਨੂੰ ਰੱਖੋ:
#ਮੁੱਖ {
ਚੌੜਾਈ: 800px;
ਸਿਖਰ: 0 ਪੈਕਸ;
ਸਥਿਤੀ: ਸੰਪੂਰਨ;
ਖੱਬੇ: 250px;
}
08 ਦੇ 10
ਤੁਹਾਡੇ ਪੈਰਿਆਂ ਦੀ ਸਟਾਈਲਿੰਗ
ਕਿਉਂਕਿ ਮੈਂ ਉਪਰੋਕਤ ਪੈਰਾਗ੍ਰਾਫ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਪਹਿਲਾਂ ਹੀ ਸੈਟ ਕਰ ਚੁੱਕਾ ਹਾਂ, ਮੈਂ ਹਰ ਪੈਰਾ ਨੂੰ ਥੋੜ੍ਹਾ ਜਿਹਾ ਵਾਧੂ "ਕਿੱਕ" ਦੇਣਾ ਚਾਹੁੰਦਾ ਸੀ ਤਾਂ ਜੋ ਇਸ ਨੂੰ ਵਧੀਆ ਬਣ ਸਕੇ. ਮੈਂ ਅਜਿਹਾ ਕਰਨ ਲਈ ਚੋਟੀ ਉੱਤੇ ਇੱਕ ਬਾਰਡਰ ਪਾ ਕੇ ਕੀਤਾ ਜੋ ਸਿਰਫ ਪੈਰਾ ਸਿਰਫ਼ ਚਿੱਤਰ ਹੀ ਨਹੀਂ ਹੈ.
ਆਪਣੇ styles.css ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਹੇਠ ਲਿਖੇ ਸਥਾਨ ਨੂੰ ਰੱਖੋ:
.topline {
ਸਰਹੱਦੀ ਚੋਟੀ: ਮੋਟਾ ਠੋਸ # ਐੱਫ.ਐੱਫ.ਸੀ.ਸੀ.
}
ਮੈਂ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਸਾਰੇ ਪੈਰਿਆਂ ਦੀ ਪਰਿਭਾਸ਼ਾ ਨਾ ਕਰਾਉਣ ਦੀ ਬਜਾਏ "ਟਾਪਲਲਾਈਨ" ਨਾਂ ਦੀ ਇਕ ਕਲਾਸ ਦੇ ਤੌਰ ਤੇ ਇਹ ਕਰਨ ਦਾ ਫੈਸਲਾ ਕੀਤਾ ਹੈ. ਇਸ ਤਰੀਕੇ ਨਾਲ, ਜੇ ਮੈਂ ਫੈਸਲਾ ਕਰਦਾ ਹਾਂ ਕਿ ਇੱਕ ਉੱਚੀ ਪੀਲਾ ਲਾਈਨ ਦੇ ਬਿਨਾਂ ਪੈਰਾਗ੍ਰਾਫ ਕਰਨਾ ਚਾਹੁੰਦਾ ਹਾਂ, ਤਾਂ ਮੈਂ ਪੈਰਾਗ੍ਰਾਫ ਟੈਗ ਵਿੱਚ ਕਲਾਸ = "ਟਾਪਲਨ" ਨੂੰ ਛੱਡ ਸਕਦਾ ਹਾਂ ਅਤੇ ਇਸਦੇ ਉਪਰਲੇ ਬਾਰਡਰ ਨਹੀਂ ਹੋਣਗੇ
10 ਦੇ 9
ਚਿੱਤਰਾਂ ਨੂੰ ਸਟਾਇਲਿੰਗ
ਚਿੱਤਰਾਂ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਉਨ੍ਹਾਂ ਦੇ ਆਲੇ ਦੁਆਲੇ ਇਕ ਬਾਰਡਰ ਹੁੰਦਾ ਹੈ, ਇਹ ਹਮੇਸ਼ਾ ਉਦੋਂ ਤੱਕ ਨਜ਼ਰ ਨਹੀਂ ਆਉਂਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਚਿੱਤਰ ਇੱਕ ਲਿੰਕ ਨਹੀਂ ਹੁੰਦਾ, ਪਰ ਮੈਨੂੰ ਆਪਣੀ CSS ਸਟਾਈਲਸ਼ੀਟ ਦੇ ਅੰਦਰ ਇੱਕ ਕਲਾਸ ਹੈ ਜੋ ਬਾਰਡਰ ਨੂੰ ਆਟੋਮੈਟਿਕਲੀ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ. ਇਸ ਸਟਾਈਲਸ਼ੀਟ ਲਈ, ਮੈਂ "ਅਮੀਡਰ" ਕਲਾਸ ਬਣਾਈ ਹੈ, ਅਤੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਜ਼ਿਆਦਾਤਰ ਚਿੱਤਰ ਇਸ ਕਲਾਸ ਦਾ ਹਿੱਸਾ ਹਨ.
ਇਹਨਾਂ ਤਸਵੀਰਾਂ ਦਾ ਦੂਜਾ ਸਪੈਸ਼ਲ ਭਾਗ ਉਨ੍ਹਾਂ ਦਾ ਪੰਨਾ ਤੇ ਹੈ. ਮੈਂ ਉਨ੍ਹਾਂ ਨੂੰ ਪੈਰਾਗ੍ਰਾਫ਼ ਦਾ ਇਕ ਹਿੱਸਾ ਬਣਨ ਲਈ ਕਿਹਾ ਸੀ ਜੋ ਉਨ੍ਹਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਨ ਲਈ ਟੇਬਲ ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾਂ ਸਨ. ਇਹ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਸੌਖਾ ਢੰਗ ਫਲੋਟ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੈ
ਆਪਣੇ styles.css ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਹੇਠ ਲਿਖੇ ਸਥਾਨ ਨੂੰ ਰੱਖੋ:
#main img {
ਫਲੋਟ: ਖੱਬੇ;
ਹਾਸ਼ੀਆ-ਸੱਜੇ: 5px;
ਹਾਸ਼ੀਆ-ਤਲ: 15px;
}
.noborder {
ਬਾਰਡਰ: 0 ਪੈਕਸ ਕੋਈ ਨਹੀਂ;
}
ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ, ਤਸਵੀਰਾਂ 'ਤੇ ਤੈਅ ਕੀਤੇ ਮਾਰਜਿਨ ਸੰਪਤੀਆਂ ਵੀ ਹਨ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਉਹ ਉਨ੍ਹਾਂ ਦੇ ਨਾਲ-ਨਾਲ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਟੈਕਸਟ ਦੇ ਵਿਰੁੱਧ ਨਹੀਂ ਸੁੱਟੇ ਜਾਂਦੇ.
10 ਵਿੱਚੋਂ 10
ਹੁਣ ਆਪਣੀ ਮੁਕੰਮਲ ਪੇਜ ਵੱਲ ਦੇਖੋ
ਇਕ ਵਾਰ ਤੁਸੀਂ ਆਪਣਾ CSS ਸਾਂਭ ਲੈਂਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਆਪਣੇ ਵੈੱਬ ਬਰਾਊਜ਼ਰ ਵਿਚ pets.htm ਪੇਜ਼ ਨੂੰ ਮੁੜ ਲੋਡ ਕਰ ਸਕਦੇ ਹੋ. ਤੁਹਾਡਾ ਪੇਜ਼ ਇਸ ਤਸਵੀਰ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਇੱਕ ਵਰਗਾ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ, ਚਿੱਤਰਾਂ ਨੂੰ ਜੋੜਿਆ ਗਿਆ ਹੈ ਅਤੇ ਨੇਵੀਗੇਸ਼ਨ ਸਫ਼ੇ ਦੇ ਖੱਬੇ ਪਾਸੇ ਸਹੀ ਢੰਗ ਨਾਲ ਲਗਾਇਆ ਗਿਆ ਹੈ.
ਇਸ ਸਾਈਟ ਲਈ ਤੁਹਾਡੇ ਸਾਰੇ ਅੰਦਰੂਨੀ ਪੰਨਿਆਂ ਲਈ ਇਹੋ ਕਦਮ ਚੁੱਕੋ. ਤੁਸੀਂ ਆਪਣੇ ਨੇਵੀਗੇਸ਼ਨ ਦੇ ਹਰ ਸਫ਼ੇ ਲਈ ਇੱਕ ਪੰਨਾ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ.