ਕਿਸੇ ਵੈਬਪੇਜ ਲੇਆਉਟ ਦੇ ਖੱਬੇ ਪਾਸੇ ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਐਲਬਮ ਕਰਨ ਲਈ CSS ਦਾ ਉਪਯੋਗ ਕਰਨਾ
ਅੱਜ ਤਕਰੀਬਨ ਕਿਸੇ ਵੀ ਵੈਬ ਪੇਜ ਤੇ ਨਜ਼ਰ ਮਾਰੋ ਅਤੇ ਤੁਸੀਂ ਉਹਨਾਂ ਪੰਨਿਆਂ ਦੇ ਵੱਡੇ ਹਿੱਸੇ ਨੂੰ ਟੈਕਸਟ ਅਤੇ ਚਿੱਤਰਾਂ ਦੇ ਸੰਯੋਗ ਦੇਖ ਸਕੋਗੇ. ਇੱਕ ਪੇਜ਼ ਵਿੱਚ ਟੈਕਸਟ ਅਤੇ ਚਿੱਤਰ ਜੋੜਨਾ ਬਹੁਤ ਸੌਖਾ ਹੈ. ਪਾਠ ਨੂੰ ਮਿਆਰੀ HTML ਟੈਗਾਂ ਜਿਵੇਂ ਪੈਰਾਗ੍ਰਾਫਿਆਂ, ਸੂਚੀਆਂ, ਅਤੇ ਹੈਡਿੰਗਸ ਦੀ ਵਰਤੋਂ ਨਾਲ ਕੋਡਬੱਧ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਦੋਂ ਕਿ ਚਿੱਤਰਾਂ ਨੂੰ ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ .
ਉਹ ਟੈਕਸਟ ਬਣਾਉਣ ਦੀ ਸਮਰੱਥਾ ਅਤੇ ਉਹ ਤਸਵੀਰਾਂ ਇੱਕਠਿਆਂ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ ਜੋ ਵੱਡੀਆਂ ਵੈਬ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਅਲਗ ਅਲਗ ਕਰਦਾ ਹੈ! ਤੁਸੀਂ ਕੇਵਲ ਆਪਣੇ ਪਾਠ ਅਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਇੱਕ ਤੋਂ ਬਾਅਦ ਇਕ ਤੋਂ ਨਹੀਂ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਇਹ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਭਾਗ ਡਿਫੌਲਟ ਅਨੁਸਾਰ ਲੇਆਉਟ ਹੋਣਗੇ. ਨਹੀਂ, ਤੁਸੀਂ ਕੁਝ ਨਿਯੰਤਰਣ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਪਾਠ ਅਤੇ ਚਿੱਤਰ ਕਿਵੇਂ ਇਕ ਦੂਜੇ ਨਾਲ ਇਕੱਠੇ ਹੁੰਦੇ ਹਨ, ਅਸਲ ਵਿੱਚ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ ਦਾ ਵਿਜ਼ੂਅਲ ਡਿਜਾਈਨ ਕੀ ਹੋਵੇਗਾ.
ਇੱਕ ਚਿੱਤਰ ਜਿਸ ਨੂੰ ਇੱਕ ਪੰਨੇ ਦੇ ਖੱਬੇ ਪਾਸੇ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਇਸ ਪੰਨੇ ਦਾ ਪਾਠ ਇਸਦੇ ਆਲੇ ਦੁਆਲੇ ਵਹਿੰਦਾ ਹੈ ਪ੍ਰਿੰਟਿਡ ਡਿਜ਼ਾਈਨ ਲਈ ਅਤੇ ਵੈਬ ਪੇਜਾਂ ਲਈ ਇੱਕ ਆਮ ਡਿਜ਼ਾਇਨ ਟ੍ਰੇਡ ਹੈ. ਵੈਬ ਸ਼ਬਦਾਂ ਵਿਚ, ਇਸ ਪ੍ਰਭਾਵ ਨੂੰ ਚਿੱਤਰ ਨੂੰ ਫਲੋਟਿੰਗ ਦੇ ਤੌਰ ਤੇ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ . ਇਹ ਸ਼ੈਲੀ "ਫਲੋਟ" ਲਈ CSS ਪ੍ਰਾਪਤੀ ਨਾਲ ਪ੍ਰਾਪਤ ਕੀਤੀ ਗਈ ਹੈ. ਇਹ ਜਾਇਦਾਦ ਖੱਬੇ ਪਾਸੇ ਗੋਲਾਕਾਰ ਚਿੱਤਰ ਦੇ ਆਲੇ ਦੁਆਲੇ ਸੱਜੇ ਪਾਸੇ ਲਿਜਾਣ ਲਈ ਟੈਕਸਟ ਦਿੰਦਾ ਹੈ. (ਜਾਂ ਇਸਦੇ ਖੱਬੀ ਪਾਸਿਓਂ ਇਕ ਸੱਜੇ-ਇਕਸਾਰ ਚਿੱਤਰ ਦੇ ਆਲੇ-ਦੁਆਲੇ.) ਆਓ ਇਹ ਵੇਖੀਏ ਕਿ ਇਹ ਦਿੱਖ ਪ੍ਰਭਾਵ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ.
HTML ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ
ਪਹਿਲੀ ਚੀਜ ਜੋ ਤੁਹਾਨੂੰ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ ਉਹ ਹੈ ਕੁਝ HTML ਜਿਸ ਨਾਲ ਕੰਮ ਕਰਨਾ ਹੈ. ਸਾਡੀ ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ ਪਾਠ ਦੇ ਪੈਰਾਗ੍ਰਾਫ ਨੂੰ ਲਿੱਖਾਂਗੇ ਅਤੇ ਪੈਰਾ ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਇੱਕ ਚਿੱਤਰ ਜੋੜਾਂਗੇ (ਟੈਕਸਟ ਤੋਂ ਪਹਿਲਾਂ, ਪਰ ਉਦਘਾਟਨ ਤੋਂ ਬਾਅਦ
ਟੈਗ). ਇਹ ਉਹ HTML ਮਾਰਕਅਪ ਹੈ ਜੋ ਇਹ ਵੇਖਦਾ ਹੈ:
ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ, ਸਾਡਾ ਵੈਬਪੇਜ ਟੈਕਸਟ ਦੇ ਉੱਪਰ ਚਿੱਤਰ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗਾ. ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਚਿੱਤਰ HTML ਵਿੱਚ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਤੱਤ ਹਨ. ਇਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਚਿੱਤਰ ਤੱਤ ਤੋਂ ਪਹਿਲਾਂ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਲਾਈਨ ਬ੍ਰੇਕਸ ਡਿਸਪਲੇ ਕਰਦਾ ਹੈ. ਅਸੀਂ CSS ਨੂੰ ਬਦਲ ਕੇ ਇਹ ਡਿਫਾਲਟ ਦਿੱਖ ਬਦਲ ਦਿਆਂਗੇ. ਪਹਿਲੀ, ਹਾਲਾਂਕਿ, ਅਸੀਂ ਆਪਣੇ ਚਿੱਤਰ ਤੱਤਾਂ ਲਈ ਇੱਕ ਕਲਾਸ ਮੁੱਲ ਜੋੜਾਂਗੇ . ਉਹ ਕਲਾਸ ਇੱਕ "ਹੁੱਕ" ਦੇ ਰੂਪ ਵਿੱਚ ਕੰਮ ਕਰੇਗਾ ਜੋ ਕਿ ਅਸੀਂ ਬਾਅਦ ਵਿੱਚ ਆਪਣੇ CSS ਵਿੱਚ ਵਰਤਾਂਗੇ.
ਨੋਟ ਕਰੋ ਕਿ "ਖੱਬੇ" ਦਾ ਇਹ ਵਰਗ ਆਪਣੀ ਮਰਜ਼ੀ ਨਾਲ ਕੁਝ ਨਹੀਂ ਕਰਦਾ! ਸਾਡੇ ਲਈ ਸਾਡੀ ਇੱਛਤ ਸਟਾਈਲ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਸਾਨੂੰ ਅਗਲੇ CSS ਨੂੰ ਵਰਤਣ ਦੀ ਲੋੜ ਹੈ.
CSS ਸ਼ੈਲੀ
ਸਾਡੇ "HTML" ਦੇ ਕਲਾਸ ਵਿਸ਼ੇਸ਼ਤਾ ਸਮੇਤ, ਸਾਡੇ HTML ਦੀ ਜਗ੍ਹਾ ਵਿੱਚ, ਅਸੀਂ ਹੁਣ CSS ਨੂੰ ਚਾਲੂ ਕਰ ਸਕਦੇ ਹਾਂ. ਅਸੀਂ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿਚ ਇਕ ਨਿਯਮ ਜੋੜਦੇ ਹਾਂ ਜੋ ਉਸ ਚਿੱਤਰ ਨੂੰ ਫਲੋਟ ਵਿਚ ਲਵਾਂਗੇ ਅਤੇ ਇਸ ਤੋਂ ਅੱਗੇ ਇਕ ਛੋਟਾ ਜਿਹਾ ਪੈਡਿੰਗ ਜੋੜ ਦੇਵਾਂਗੇ ਤਾਂ ਕਿ ਚਿੱਤਰ, ਜੋ ਕਿ ਅੰਤ ਵਿਚ ਚਿੱਤਰ ਦੇ ਦੁਆਲੇ ਲਪੇਟਦਾ ਹੈ, ਇਸ ਦੇ ਵਿਰੁੱਧ ਬਹੁਤ ਨਜ਼ਦੀਕੀ ਨਹੀਂ ਹੈ. ਇੱਥੇ ਤੁਸੀਂ CSS ਲਿਖ ਸਕਦੇ ਹੋ:
ਖੱਬੇ {ਫਲੋਟ: ਖੱਬੇ; ਪੈਡਿੰਗ: 0 20px 20px 0; }ਇਹ ਸਟਾਈਲ ਖੱਬੇ ਪਾਸੇ ਚਿੱਤਰ ਨੂੰ ਫਲੋਟ ਕਰਦਾ ਹੈ ਅਤੇ ਚਿੱਤਰ ਦੇ ਸੱਜੇ ਅਤੇ ਹੇਠਾਂ ਥੋੜਾ ਜਿਹਾ ਪੈਡਿੰਗ (ਕੁਝ CSS ਸ਼ਾਰਟਹੈਂਡ ਵਰਤ ਕੇ) ਜੋੜਦਾ ਹੈ.
ਜੇ ਤੁਸੀਂ ਉਸ ਪੰਨੇ ਦੀ ਸਮੀਖਿਆ ਕੀਤੀ ਹੈ ਜਿਸ ਵਿੱਚ ਇੱਕ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਇਹ HTML ਸ਼ਾਮਲ ਹੈ, ਤਾਂ ਚਿੱਤਰ ਨੂੰ ਹੁਣ ਖੱਬੇ ਪਾਸੇ ਰੱਖਿਆ ਜਾਵੇਗਾ ਅਤੇ ਪੈਰਾ ਦੇ ਪਾਠ ਨੂੰ ਇਸ ਦੇ ਸੱਜੇ ਪਾਸੇ ਦਿਖਾਇਆ ਜਾਵੇਗਾ ਕਿ ਦੋਵਾਂ ਦੇ ਵਿਚਕਾਰ ਸਹੀ ਥਾਂ ਹੈ. ਨੋਟ ਕਰੋ ਕਿ ਅਸੀਂ "ਖੱਬੇ" ਦਾ ਵਰਗ ਮੁੱਲ ਜੋ ਅਸੀਂ ਵਰਤੀ ਹੈ, ਉਹ ਇਖਤਿਆਰੀ ਹੈ. ਅਸੀਂ ਇਸ ਨੂੰ ਕੁਝ ਵੀ ਕਹਿ ਸਕਦੇ ਹਾਂ ਕਿਉਂਕਿ "ਖੱਬੇ" ਸ਼ਬਦ ਆਪਣੇ ਆਪ ਕੁਝ ਨਹੀਂ ਕਰਦਾ. ਇਸ ਵਿੱਚ ਐਚਐਲਟੀ ਵਿੱਚ ਕਲਾਸ ਐਟਰੀਬਿਊਟ ਦੀ ਜਰੂਰਤ ਹੁੰਦੀ ਹੈ ਜੋ ਅਸਲ ਸੀਐਸਐਸ ਸਟਾਇਲ ਨਾਲ ਕੰਮ ਕਰਦੀ ਹੈ ਜੋ ਤੁਹਾਡੇ ਦੁਆਰਾ ਦਿੱਸਣ ਵਾਲੇ ਬਦਲਾਵਾਂ ਦੀ ਤਜਵੀਜ਼ ਕਰਦਾ ਹੈ.
ਇਹ ਸ਼ੈਲੀ ਪ੍ਰਾਪਤ ਕਰਨ ਦੇ ਵਿਕਲਪਕ ਤਰੀਕੇ
ਇਮੇਜ ਤੱਤ ਨੂੰ ਕਲਾਸ ਐਟਰੀਬਿਊਟ ਦੇਣ ਦਾ ਇਹ ਤਰੀਕਾ ਅਤੇ ਫਿਰ ਇੱਕ ਆਮ CSS ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ, ਜੋ ਕਿ ਤੱਤ ਆਰੰਭ ਕਰਦਾ ਹੈ ਕੇਵਲ ਇੱਕ ਹੀ ਤਰੀਕਾ ਹੈ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਇਹ "ਖੱਬੇ ਗੋਲੀ ਚਿੱਤਰ" ਦਿੱਖ ਨੂੰ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹੋ. ਤੁਸੀਂ ਚਿੱਤਰ ਦੀ ਕਲਾਸ ਮੁੱਲ ਨੂੰ ਵੀ ਬੰਦ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਇੱਕ ਹੋਰ ਵਿਸ਼ੇਸ਼ ਚੋਣਕਾਰ ਲਿਖ ਕੇ CSS ਦੇ ਨਾਲ ਇਸ ਨੂੰ ਸਟਾਇਲ ਕਰ ਸਕਦੇ ਹੋ. ਉਦਾਹਰਣ ਦੇ ਲਈ, ਆਓ ਇਕ ਉਦਾਹਰਨ ਵੇਖੀਏ ਕਿ ਇਹ ਚਿੱਤਰ "ਮੁੱਖ-ਸਮਗਰੀ" ਦੇ ਕਲਾਸ ਦੇ ਮੁੱਲ ਦੇ ਨਾਲ ਇੱਕ ਵੰਡ ਦੇ ਅੰਦਰ ਹੈ.
ਇਸ ਚਿੱਤਰ ਨੂੰ ਸ਼ੈਲੀ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਇਹ CSS ਲਿਖ ਸਕਦੇ ਹੋ:
.main- content img {ਫਲੋਟ: ਖੱਬੇ; ਪੈਡਿੰਗ: 0 20px 20px 0; }ਇਸ ਸਿਸਰਿਓ ਵਿਚ, ਸਾਡੀ ਚਿੱਤਰ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਨਾਲ ਜੋੜਿਆ ਜਾਵੇਗਾ, ਜਿਸ ਵਿਚ ਪਹਿਲਾਂ ਵਾਂਗ ਲੱਗੇ ਇਸਦੇ ਆਲੇ-ਦੁਆਲੇ ਟੈਕਸਟ ਹੈ, ਪਰ ਸਾਡੇ ਮਾਰਕਅੱਪ ਲਈ ਇਕ ਵਾਧੂ ਕਲਾਸ ਦੇ ਮੁੱਲ ਨੂੰ ਜੋੜਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ. ਇਸ ਨੂੰ ਪੈਮਾਨੇ 'ਤੇ ਕਰਨ ਨਾਲ ਇਕ ਛੋਟਾ HTML ਫਾਈਲ ਬਣਾਉਣਾ ਮਦਦਗਾਰ ਹੋ ਸਕਦਾ ਹੈ, ਜਿਸਦਾ ਪ੍ਰਬੰਧ ਕਰਨਾ ਸੌਖਾ ਹੋ ਜਾਵੇਗਾ ਅਤੇ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਵਿੱਚ ਵੀ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ.
ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣੇ HTML ਮਾਰਕਅਪ ਵਿੱਚ ਸਿੱਧਾ ਸਟਾਇਲ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ, ਇਸ ਤਰਾਂ ਕਰੋ:
ਇਸ ਵਿਧੀ ਨੂੰ " ਇਨਲਾਈਨ ਸਟਾਈਲ " ਕਿਹਾ ਜਾਂਦਾ ਹੈ. ਇਹ ਸਲਾਹ ਨਹੀਂ ਦਿੱਤੀ ਜਾ ਸਕਦੀ ਹੈ ਕਿਉਂਕਿ ਇਹ ਇਕ ਤੱਤ ਦੀ ਬਣਤਰ ਨੂੰ ਇਸਦੇ ਢਾਂਚੇ ਦੇ ਢਾਂਚੇ ਨਾਲ ਜੋੜਦਾ ਹੈ. ਵੈੱਬ ਵਧੀਆ ਅਭਿਆਸ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਹੈ ਕਿ ਇੱਕ ਪੰਨੇ ਦੀ ਸ਼ੈਲੀ ਅਤੇ ਬਣਤਰ ਵੱਖ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ. ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਹਾਡੇ ਪੰਨੇ ਨੂੰ ਇਸਦੇ ਲੇਆਉਟ ਨੂੰ ਬਦਲਣ ਅਤੇ ਇੱਕ ਸਕ੍ਰੀਨਿੰਗ ਵੈਬਸਾਈਟ ਦੇ ਨਾਲ ਵੱਖਰੇ ਸਕ੍ਰੀਨ ਅਕਾਰ ਅਤੇ ਡਿਵਾਈਸਾਂ ਲੱਭਣ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ. ਐਚਟੀਐਮਈ ਵਿੱਚ ਘੁਲ-ਮਿਲਤ ਹੋਏ ਪੇਜ ਦੀ ਸ਼ੈਲੀ ਰੱਖਣ ਨਾਲ ਮੀਡੀਆ ਦੀਆਂ ਉਹਨਾਂ ਲੇਖਕਾਂ ਲਈ ਬਹੁਤ ਮੁਸ਼ਕਲ ਹੋ ਜਾਵੇਗਾ ਜੋ ਤੁਹਾਡੇ ਵੱਖਰੇ ਸਕਰੀਨਾਂ ਲਈ ਲੋੜੀਂਦੀ ਆਪਣੀ ਸਾਈਟ ਦੀ ਦਿੱਖ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾ ਸਕਦੇ ਹਨ.
ਜੈਨੀਫਰ ਕ੍ਰਿਨਿਨ ਦੁਆਰਾ ਮੂਲ ਲੇਖ. 4/3/17 ਤੇ ਜਰਮੀ ਗੀਅਰਡ ਦੁਆਰਾ ਸੰਪਾਦਿਤ