HR ਟੈਗਸ ਵਾਲੇ ਵੈਬ ਪੇਜਾਂ ਤੇ ਦਿਲਚਸਪ ਦੇਖਰੇ ਲਾਈਨ ਬਣਾਉਣਾ
ਜੇ ਤੁਹਾਨੂੰ ਆਪਣੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਲਈ ਹਰੀਜੱਟਲ, ਵੱਖਰੇਵਾਂ-ਸਟਾਇਲ ਲਾਈਨਾਂ ਜੋੜਨ ਦੀ ਲੋੜ ਹੈ, ਤੁਹਾਡੇ ਕੋਲ ਕੁਝ ਵਿਕਲਪ ਹਨ ਤੁਸੀਂ ਆਪਣੇ ਪੰਨਿਆਂ ਤੇ ਇਹਨਾਂ ਲਾਈਨਾਂ ਦੀ ਅਸਲ ਚਿੱਤਰ ਫਾਈਲਾਂ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ, ਪਰ ਇਸ ਲਈ ਤੁਹਾਡੇ ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਇਨ੍ਹਾਂ ਫਾਈਲਾਂ ਨੂੰ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ, ਜਿਸਦਾ ਪ੍ਰਦਰਸ਼ਨ ਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਤੇ ਮਾੜਾ ਅਸਰ ਪਾ ਸਕਦਾ ਹੈ.
ਤੁਸੀਂ ਬਾਰਡਰ ਨੂੰ ਜੋੜਨ ਲਈ ਸੀਐਸਸੀ ਸਰਹੱਦ ਦੀ ਜਾਇਦਾਦ ਦਾ ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਕਿਸੇ ਤਲ ਤੇ ਜਾਂ ਤਲ ਦੇ ਤਲ 'ਤੇ ਲਾਈਨਾਂ ਦੇ ਤੌਰ ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ, ਅਸਰਦਾਰ ਢੰਗ ਨਾਲ ਆਪਣੇ ਵੱਖਰੇਵੇਂ ਲਾਈਨ ਨੂੰ ਬਣਾਉ.
ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਖਿਤਿਜੀ ਨਿਯਮ ਲਈ HTML ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ - the
ਖਿਤਿਜੀ ਨਿਯਮ ਐਲੀਮੈਂਟ
ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਵੈਬ ਪੇਜ 'ਤੇ ਇਕ ਤੱਤ ਪਾ ਦਿੱਤੀ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਸ਼ਾਇਦ ਦੇਖਿਆ ਹੋਵੇਗਾ ਕਿ ਇਹ ਲਾਈਨਾਂ ਵਿਖਾਈਆਂ ਜਾਣ ਦਾ ਮੂਲ ਤਰੀਕਾ ਆਦਰਸ਼ਕ ਨਹੀਂ ਹੈ. ਇਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਆਪਣੀ ਸਾਮੱਗਰੀ ਨੂੰ ਵੇਖਣ ਦੀ ਲੋੜ ਹੈ, ਇਸਦੇ ਅਨੁਸਾਰ ਲਾਈਨ ਵਿੱਚ ਇਹਨਾਂ ਤੱਤਾਂ ਦੇ ਵਿਜੁਅਲ ਦਿੱਖ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ CSS ਨੂੰ ਚਾਲੂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ.
ਇੱਕ ਬੁਨਿਆਦੀ ਐਚਆਰ ਟੈਗ ਉਸ ਤਰੀਕੇ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਬਰਾਊਜ਼ਰ ਇਸ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਚਾਹੁੰਦਾ ਹੈ. ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਆਮ ਤੌਰ ਤੇ 100% ਦੀ ਚੌੜਾਈ, 2px ਦੀ ਉਚਾਈ, ਅਤੇ ਲਾਈਨ ਨੂੰ ਬਣਾਉਣ ਲਈ ਕਾਲਾ ਵਿੱਚ ਇੱਕ 3D ਸਰਹੱਦ ਦੇ ਨਾਲ ਅਣਸਟਾਈਬਲ ਐਚਆਰ ਟੈਗਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ.
ਇੱਥੇ ਇੱਕ ਮਿਆਰੀ ਐਚਆਰ ਐਲੀਮੈਂਟ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜਾਂ ਤੁਸੀਂ ਇਸ ਚਿੱਤਰ ਵਿੱਚ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਅਜੋਕੇ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ.
ਚੌੜਾਈ ਅਤੇ ਕੱਦ ਬਰਾਬਰ ਬਰਾਬਰ ਹੁੰਦੇ ਹਨ
ਸਿਰਫ ਉਹੀ ਸਟਾਈਲ ਜੋ ਸਾਰੇ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਭਰ ਵਿੱਚ ਇਕਸਾਰ ਹਨ, ਚੌੜਾਈ ਅਤੇ ਸਟਾਈਲ ਹਨ ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਨ ਕਿ ਲਾਈਨ ਕਿੰਨੀ ਵੱਡੀ ਹੋਵੇਗੀ ਜੇ ਤੁਸੀਂ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਪਰਿਭਾਸ਼ਤ ਨਹੀਂ ਕਰਦੇ ਤਾਂ ਡਿਫਾਲਟ ਚੌੜਾਈ 100% ਹੈ ਅਤੇ ਡਿਫਾਲਟ ਉਚਾਈ 2 ਪੈਕਸ ਹੈ.
ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ ਦੀ ਚੌੜਾਈ 50% ਹੈ (ਨੋਟ ਕਰੋ ਕਿ ਇਨ੍ਹਾਂ ਤੋਂ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਉਦਾਹਰਨਾਂ ਵਿੱਚ ਇਨਲਾਈਨ ਸਟਾਈਲ ਸ਼ਾਮਲ ਹਨ. ਉਤਪਾਦਨ ਸੈਟਿੰਗ ਵਿੱਚ, ਤੁਹਾਡੀਆਂ ਸਟੋਰਾਂ ਨੂੰ ਤੁਹਾਡੇ ਸਾਰੇ ਪੰਨਿਆਂ ਵਿੱਚ ਪ੍ਰਬੰਧਨ ਦੇ ਸੌਖ ਲਈ ਇੱਕ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਲਿਖਿਆ ਜਾਵੇਗਾ):
ਸ਼ੈਲੀ = "ਚੌੜਾਈ: 50%;">
ਅਤੇ ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਉਚਾਈ 2em ਹੈ:
ਸ਼ੈਲੀ = "ਉੱਚਾਈ: 2ਮ;">
ਬਾਰਡਰ ਬਦਲਣਾ ਚੁਣੌਤੀਪੂਰਨ ਹੋ ਸਕਦਾ ਹੈ
ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ, ਬ੍ਰਾਊਜ਼ਰ ਬਾਰਡਰ ਨੂੰ ਸਮਾਯੋਜਿਤ ਕਰਕੇ ਲਾਈਨ ਬਣਾਉਂਦਾ ਹੈ. ਇਸ ਲਈ ਜੇ ਤੁਸੀਂ ਸ਼ੈਲੀ ਦੀ ਸੰਪਤੀ ਨਾਲ ਬਾਰਡਰ ਨੂੰ ਹਟਾਉਂਦੇ ਹੋ, ਤਾਂ ਲਾਈਨ ਪੇਜ਼ ਉੱਤੇ ਅਲੋਪ ਹੋ ਜਾਵੇਗੀ. ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ (ਠੀਕ ਹੈ, ਤੁਸੀਂ ਕੁਝ ਵੇਖ ਨਹੀਂ ਸਕੋਗੇ, ਜਿਵੇਂ ਕਿ ਲਾਈਨਾਂ ਅਦਿੱਖ ਹੋਣਗੀਆਂ) ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ:
ਸ਼ੈਲੀ = "ਬਾਰਡਰ: ਕੋਈ ਨਹੀਂ;">
ਸਰਹੱਦ ਦੇ ਆਕਾਰ, ਰੰਗ ਅਤੇ ਸ਼ੈਲੀ ਨੂੰ ਐਡਜਸਟ ਕਰਨ ਨਾਲ ਲਾਈਨ ਵੱਖਰੀ ਹੋਵੇਗੀ ਅਤੇ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰ ਵਿਚ ਵੀ ਇਹੀ ਪ੍ਰਭਾਵ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਇਸ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਸਰਹੱਦ ਲਾਲ, ਡੈਸ਼ ਅਤੇ 1 ਪੈਕਸ ਚੌੜਾ ਹੈ:
ਸ਼ੈਲੀ = "ਬਾਰਡਰ: 1 ਪੈਕਸ ਡਾਸ਼ੈਡ # 000;">
ਪਰ ਜੇ ਤੁਸੀਂ ਬਾਰਡਰ ਅਤੇ ਉਚਾਈ ਨੂੰ ਬਦਲਦੇ ਹੋ, ਤਾਂ ਇਹ ਸਟਾਈਲ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਬਹੁਤ ਘੱਟ ਪੁਰਾਣਾ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਥੋੜ੍ਹਾ ਵੱਖਰੀ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ. ਜਿਵੇਂ ਤੁਸੀਂ ਇਸ ਉਦਾਹਰਨ ਵਿਚ ਦੇਖ ਸਕਦੇ ਹੋ, ਜੇ ਤੁਸੀਂ ਇਸ ਨੂੰ IE7 ਅਤੇ ਹੇਠਾਂ (ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਜਿਹੜਾ ਮਾਈਕਰੋਸਾਫਟ ਦੁਆਰਾ ਪੁਰਾਣਾ ਪੁਰਾਣਾ ਹੈ ਅਤੇ ਹੁਣ ਸਹਿਯੋਗੀ ਨਹੀਂ ਹੈ) ਵਿੱਚ ਵੇਖਦਾ ਹੈ ਤਾਂ ਇੱਕ ਬੇਲੀਡ ਅੰਦਰਲੀ ਲਾਈਨ ਹੁੰਦੀ ਹੈ ਜੋ ਹੋਰ ਬ੍ਰਾਉਜ਼ਰ (IE8 ਅਤੇ ਉੱਪਰ ਸਮੇਤ) ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਕਰਦੀ. :
ਸ਼ੈਲੀ = "ਉਚਾਈ: 1.5ਮ, ਚੌੜਾਈ: 25ਮ; ਬਾਰਡਰ: 1 ਪੈਕਸ ਠੋਸ # 000;">
ਉਹ ਪੁਰਾਣਾ ਬ੍ਰਾਉਜ਼ਰ ਸੱਚਮੁੱਚ ਵੈਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਅਸਲ ਵਿੱਚ ਜ਼ਿਆਦਾ ਚਿੰਤਾ ਦਾ ਵਿਸ਼ਾ ਨਹੀਂ ਹਨ, ਕਿਉਂਕਿ ਉਨ੍ਹਾਂ ਨੂੰ ਜ਼ਿਆਦਾਤਰ ਆਧੁਨਿਕ ਵਿਕਲਪਾਂ ਨਾਲ ਬਦਲ ਦਿੱਤਾ ਗਿਆ ਹੈ.
ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਨਾਲ ਸਜਾਵਟੀ ਲਾਈਨ ਬਣਾਉ
ਇੱਕ ਰੰਗ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਆਪਣੇ ਐਚਆਰ ਲਈ ਇੱਕ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਤਾਂ ਕਿ ਇਹ ਬਿਲਕੁਲ ਉਸੇ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇ ਜਿਵੇਂ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ, ਪਰ ਫਿਰ ਵੀ ਤੁਹਾਡੇ ਮਾਰਕਅੱਪ ਵਿੱਚ ਅਰਥਪੂਰਨ ਰੂਪ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ.
ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਅਸੀਂ ਇੱਕ ਚਿੱਤਰ ਵਰਤਿਆ ਹੈ ਜੋ ਕਿ ਤਿੰਨ ਲਹਿਰਾਂ ਦੀਆਂ ਲਾਈਨਾਂ ਦੀ ਹੈ. ਇਸ ਨੂੰ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਦੇ ਤੌਰ ਤੇ ਨਹੀਂ ਦੁਹਰਾਉਂਦੇ ਹੋਏ, ਇਹ ਸਮੱਗਰੀ ਵਿੱਚ ਇੱਕ ਬ੍ਰੇਕ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਲਗਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿਤਾਬਾਂ ਵਿੱਚ ਦੇਖਦੇ ਹੋ.
ਸ਼ੈਲੀ = "ਉਚਾਈ: 20px; ਪਿੱਠਭੂਮੀ: #fff url (aa010307.gif) ਨੋ-ਦੁਹਰਾਓ ਸਕੋਲ ਕੇਂਦਰ; ਬਾਰਡਰ: ਕੋਈ ਨਹੀਂ;">
ਟ੍ਰਾਂਸਫਰਮਿੰਗ ਐਚ ਆਰ ਐਲੀਮੈਂਟਸ
CSS3 ਦੇ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਹੋਰ ਦਿਲਚਸਪ ਬਣਾ ਸਕਦੇ ਹੋ HR ਇਕਾਈ ਰਵਾਇਤੀ ਤੌਰ ਤੇ ਇੱਕ ਲੇਟਵੀਂ ਲਾਈਨ ਹੁੰਦੀ ਹੈ, ਪਰ CSS ਟਰਾਂਸਫਰ ਪ੍ਰਾਪਰਟੀ ਦੇ ਨਾਲ, ਤੁਸੀ ਬਦਲ ਸਕਦੇ ਹੋ ਉਹ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ. ਐਚ ਆਰ ਐਲੀਮੈਂਟ ਤੇ ਇੱਕ ਪਸੰਦੀਦਾ ਪਰਿਵਰਤਨ ਰੋਟੇਸ਼ਨ ਨੂੰ ਬਦਲਣਾ ਹੈ.
ਤੁਸੀਂ ਆਪਣੇ ਐਚਆਰ ਐਲੀਮੈਂਟ ਨੂੰ ਘੁੰਮਾ ਸਕਦੇ ਹੋ ਤਾਂ ਕਿ ਇਹ ਸਿਰਫ ਥੋੜਾ ਜਿਹਾ ਹੋਵੇ:
ਘੰਟੇ {
-ਮੋਜ-ਬਦਲਾਅ: ਘੁੰਮਾਓ (10 ਡਿਗਰੀ);
-webkit-transform: ਘੁੰਮਾਓ (10 ਡਿਗਰੀ);
-o-transform: ਘੁੰਮਾਓ (10 ਡਿਗਰੀ);
-ਮੀਜ਼-ਤਬਦੀਲੀ: ਘੁੰਮਾਓ (10 ਡਿਗਰੀ);
ਤਬਦੀਲੀ: ਘੁੰਮਾਓ (10 ਡਿਗਰੀ);
}
ਜਾਂ ਤੁਸੀਂ ਇਸ ਨੂੰ ਰੋਟੇਟ ਕਰ ਸਕਦੇ ਹੋ ਤਾਂ ਕਿ ਇਹ ਪੂਰੀ ਤਰਾਂ ਵਰਟੀਕਲ ਹੋਵੇ:
ਘੰਟੇ {
-ਮੋਜ-ਬਦਲਾਅ: ਘੁੰਮਾਓ (90 ਡਿਗਰੀ);
-webkit-transform: ਘੁੰਮਾਓ (90 ਡਿਗਰੀ);
-o- ਤਬਦੀਲੀ: ਘੁੰਮਾਓ (90 ਡਿਗਰੀ);
-ਮੀਜ਼-ਟਰਾਂਸਫਾਰਮ: ਘੁੰਮਾਓ (90 ਡਿਗਰੀ);
ਤਬਦੀਲੀ: ਘੁੰਮਾਓ (90 ਡਿਗਰੀ);
}
ਯਾਦ ਰੱਖੋ ਕਿ ਇਹ ਦਸਤਾਵੇਜ ਵਿੱਚ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦੇ ਆਧਾਰ ਤੇ HR ਘੁੰਮਾਉਂਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਇਹ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਪੋਜੀਸ਼ਨਿੰਗ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਇਹ ਡਿਜ਼ਾਈਨ ਲਈ ਲੰਬਕਾਰੀ ਰੇਖਾਵਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਨਹੀਂ ਕਰਦਾ, ਪਰ ਦਿਲਚਸਪ ਪ੍ਰਭਾਵ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ
ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਤੇ ਲਾਈਨਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਇਕ ਹੋਰ ਤਰੀਕਾ
ਇੱਕ ਚੀਜ਼ ਜੋ ਕੁਝ ਲੋਕ ਐਚ ਆਰ ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਬਜਾਏ ਹੋਰ ਤੱਤ ਦੇ ਬਾਰਡਰ ਤੇ ਨਿਰਭਰ ਕਰਨਾ ਹੈ. ਪਰ ਕਈ ਵਾਰ ਐਚ.ਆਰ. ਬਾਰਡਰ ਸਥਾਪਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਨਾਲੋਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸੁਵਿਧਾਜਨਕ ਅਤੇ ਵਰਤਣ ਲਈ ਆਸਾਨ ਹੈ. ਕੁਝ ਬ੍ਰਾਊਜ਼ਰਸ ਦੇ ਬੌਕਸ ਮਾਡਲ ਦੇ ਮੁੱਦੇ ਇੱਕ ਬਾਰਡਰ ਸਥਾਪਤ ਕਰ ਸਕਦੇ ਹਨ ਅਤੇ ਇਹ ਵੀ ਪੇਚੀਦਾ ਹੈ