06 ਦਾ 01
CSS ਅਤੇ ਨੋ ਚਿੱਤਰ ਨਾਲ ਟੈਬਡ ਨੇਵੀਗੇਸ਼ਨ ਕਿਵੇਂ ਤਿਆਰ ਕਰੀਏ
ਵੈਬ ਪੇਜਾਂ ਤੇ ਨੇਵੀਗੇਸ਼ਨ ਇੱਕ ਸੂਚੀ ਦਾ ਇੱਕ ਰੂਪ ਹੈ, ਅਤੇ ਟੈਬਡ ਨੇਵੀਗੇਸ਼ਨ ਹਰੀਜੱਟਲ ਸੂਚੀ ਵਰਗੀ ਹੈ ਸੀਡੀਐਸ ਨਾਲ ਹਰੀਜ਼ਟਲ ਟੈਬਡ ਨੇਵੀਗੇਸ਼ਨ ਬਣਾਉਣਾ ਬੜਾ ਸੌਖਾ ਹੈ, ਪਰ ਸੀਐਸਐਸ 3 ਸਾਨੂੰ ਕੁਝ ਹੋਰ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਵਾਉਂਦੀ ਹੈ ਤਾਂ ਕਿ ਉਹਨਾਂ ਨੂੰ ਹੋਰ ਵੀ ਵਧੀਆ ਬਣਾ ਸਕੀਏ.
ਇਹ ਟਯੂਟੋਰਿਯਲ ਤੁਹਾਨੂੰ CSS ਟੈਬਾਡ ਮੀਨੂ ਬਣਾਉਣ ਲਈ ਲੋੜੀਂਦੇ HTML ਅਤੇ CSS ਰਾਹੀਂ ਲੈ ਜਾਵੇਗਾ. ਇਹ ਦੇਖਣ ਲਈ ਉਸ ਲਿੰਕ ਤੇ ਕਲਿਕ ਕਰੋ ਕਿ ਇਹ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਵੇਗੀ.
ਇਹ ਟੈਬਡ ਮੇਨੂ ਸਿਰਫ਼ ਕੋਈ ਵੀ ਚਿੱਤਰ ਨਹੀਂ ਵਰਤਦਾ ਹੈ, ਸਿਰਫ HTML ਅਤੇ CSS 2 ਅਤੇ CSS 3. ਇਸ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਹੋਰ ਟੈਬਸ ਜੋੜਨ ਜਾਂ ਉਹਨਾਂ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਬਦਲਣ ਲਈ ਸੰਪਾਦਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ.
ਬਰਾਊਜ਼ਰ ਸਹਿਯੋਗ
ਇਹ ਟੈਬ ਮੇਨੇ ਸਾਰੇ ਮੁੱਖ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਕੰਮ ਕਰੇਗਾ. ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਗੋਲ ਕੋਨੇਰਾਂ ਨੂੰ ਨਹੀਂ ਦਿਖਾਏਗਾ, ਪਰ ਹੋਰ ਤਾਂ ਇਹ ਫਾਇਰਫਾਕਸ, ਸਫਾਰੀ, ਓਪੇਰਾ ਅਤੇ ਕਰੋਮ ਵਰਗੀਆਂ ਟੈਬਾਂ ਨੂੰ ਦਿਖਾਏਗਾ.
06 ਦਾ 02
ਆਪਣੀ ਮੇਨ ਸੂਚੀ ਲਿੱਖੋ
ਸਾਰੇ ਨੇਵੀਗੇਸ਼ਨ ਮੀਨੂ ਅਤੇ ਟੈਬਸ ਸੱਚਮੁੱਚ ਸਿਰਫ ਇੱਕ ਅਣ-ਸੂਚੀਬੱਧ ਸੂਚੀ ਹੈ ਇਸਲਈ, ਜੋ ਤੁਸੀਂ ਪਹਿਲੀ ਗੱਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਉਹ ਲਿੰਕ ਦੀ ਇੱਕ ਅਣ-ਸੂਚੀਬੱਧ ਸੂਚੀ ਲਿਖੋ ਜਿੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਟੈਬਡ ਨੇਵੀਗੇਸ਼ਨ ਨੂੰ ਜਾਣਾ ਚਾਹੁੰਦੇ ਹੋ.
ਇਹ ਟਿਊਟੋਰਿਅਲ ਇਹ ਮੰਨ ਰਿਹਾ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੇ HTML ਨੂੰ ਇੱਕ ਟੈਕਸਟ ਐਡੀਟਰ ਵਿੱਚ ਲਿਖ ਰਹੇ ਹੋ ਅਤੇ ਤੁਹਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਆਪਣੇ ਵੈਬ ਪੰਨੇ ਤੇ ਤੁਹਾਡੇ ਮੀਨੂ ਲਈ HTML ਕਿੱਥੇ ਰੱਖਣਾ ਹੈ.
ਆਪਣੀ ਅਣ-ਲੜੀਬੱਧ ਸੂਚੀ ਇਸ ਤਰਾਂ ਲਿਖੋ:
- class = "tablist">
- CSS 3
- id = "current"> ਟੈਬਸ
- ਲਈ
- ਮੀਨੂ
ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਕੋਡ ਦੋ ਗੱਲਾਂ ਦੱਸਦਾ ਹੈ: class = "tablist" ਅਤੇ id = "current". ਪਹਿਲੇ ਦੀ ਲੋੜ ਹੈ ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਅਣ-ਸੂਚੀਬੱਧ ਸੂਚੀ ਤੇ ਟੇਬਲਿਸਟ ਕਲਾਸ ਨਹੀਂ ਪਾਉਂਦੇ, ਤਾਂ ਟੈਬ ਕੰਮ ਨਹੀਂ ਕਰਨਗੇ. ਦੂਜਾ ਵਿਕਲਪਿਕ ਹੈ ਉਸ ਪੰਨੇ 'ਤੇ ਜੋ ਵੀ ਟੈਬ ਨੂੰ ਉਭਾਰਨਾ ਚਾਹੁੰਦੇ ਹੋ,' ਤੇ id = "current" ਪਾਓ. ਮੈਂ ਆਮ ਤੌਰ 'ਤੇ ਇਸ ਪੰਨੇ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ ਵਰਤਦਾ ਹਾਂ ਜੋ ਮੈਂ ਕਰਦਾ ਹਾਂ, ਪਰ ਤੁਸੀਂ ਇਸਨੂੰ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਟੈਬ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਨ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ. ਜਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾ ਸਕਦੇ ਹੋ.
03 06 ਦਾ
ਆਪਣੀ ਸਟਾਈਲ ਸ਼ੀਟ ਸੰਪਾਦਿਤ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ
ਤੁਸੀਂ ਇੱਕ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਜਾਂ ਇੱਕ ਅੰਦਰੂਨੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਰਤ ਸਕਦੇ ਹੋ ਨਮੂਨਾ ਮੇਨੂ ਪੇਜ ਦਸਤਾਵੇਜ਼ ਦੇ
ਵਿਚ ਇੱਕ ਅੰਦਰੂਨੀ ਸਟਾਈਲ ਸ਼ੀਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ.ਪਹਿਲਾਂ ਅਸੀਂ ਯੂਐਲ ਆਪ ਦੀ ਸ਼ੈਲੀ ਲਵਾਂਗੇ
ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਕਲਾਸ ਟੇਬਲਿਸਟ ਵਰਤਦੇ ਹਾਂ. HTML ਵਿੱਚ. ਯੂ-ਐੱਲ ਟੈਗ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੀ ਬਜਾਏ, ਜੋ ਤੁਹਾਡੇ ਪੰਨੇ 'ਤੇ ਸਾਰੀਆਂ ਅਸਧਾਰਣ ਸੂਚੀਆਂ ਨੂੰ ਛਾਪੇਗਾ, ਤੁਹਾਨੂੰ ਸਿਰਫ ਯੂ ਐੱਲ ਕਲਾਸ ਦੀ ਸ਼ੈਲੀ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ. ਟੇਬਲਿਸਟ: ਤਾਂ ਤੁਹਾਡੇ CSS ਵਿਚ ਪਹਿਲਾ ਐਂਟਰੀ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ:
.tablist {}ਮੈਨੂੰ ਅੰਤ ਤੋਂ ਪਹਿਲਾਂ ਕਰਲੀ ਬਰੇਸ (}) ਨੂੰ ਅੱਗੇ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ, ਇਸ ਲਈ ਮੈਂ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਨਹੀਂ ਭੁੱਲਦਾ.
ਜਦੋਂ ਅਸੀਂ ਟੈਬ ਮੇਨ ਸੂਚੀ ਲਈ ਇੱਕ ਅਨੋਰਡ ਲਿਸਟ ਟੈਗ ਦਾ ਉਪਯੋਗ ਕਰ ਰਹੇ ਹੁੰਦੇ ਹਾਂ, ਪਰ ਅਸੀਂ ਕੋਈ ਬੁਲੇਟਸ ਜਾਂ ਨੰਬਰ ਨਹੀਂ ਲੰਘਣਾ ਚਾਹੁੰਦੇ. ਇਸ ਲਈ ਪਹਿਲ ਵਾਲੀ ਸਟਾਈਲ ਜੋ ਤੁਸੀਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ, ਉਹ ਹੈ. ਸੂਚੀ-ਸ਼ੈਲੀ: ਕੋਈ ਨਹੀਂ; ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਜਦੋਂ ਇਹ ਇੱਕ ਸੂਚੀ ਹੈ, ਤਾਂ ਇਹ ਇੱਕ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਸਟਾਈਲ (ਜਿਵੇਂ ਗੋਲੀਆਂ ਜਾਂ ਨੰਬਰ) ਦੇ ਨਾਲ ਇੱਕ ਸੂਚੀ ਹੈ.
ਫਿਰ, ਤੁਸੀਂ ਆਪਣੀ ਸੂਚੀ ਦੀ ਉਚਾਈ ਨੂੰ ਉਸ ਥਾਂ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸਨੂੰ ਤੁਸੀਂ ਭਰਨਾ ਚਾਹੁੰਦੇ ਹੋ. ਮੈਂ ਆਪਣੀ ਉਚਾਈ ਲਈ 2 ਐਮ ਦੀ ਚੋਣ ਕੀਤੀ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਸਟੈਂਡਰਡ ਫੌਂਟ ਸਾਈਜ਼ ਤੋਂ ਦੁੱਗਣਾ ਹੈ, ਅਤੇ ਟੈਬ ਦੇ ਟੈਕਸਟ ਦੇ ਉੱਪਰ ਅਤੇ ਹੇਠਾਂ ਅੱਧਾ ਇੱਕ ਐਮ ਹੈ ਉਚਾਈ: 2ਮ; ਪਰ ਤੁਸੀਂ ਆਪਣੀ ਚੌੜਾਈ ਜਿਸ ਹੱਦ ਤੱਕ ਤੁਸੀ ਚਾਹੁੰਦੇ ਹੋ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ. ਉਲਟ ਟੈਗ ਆਟੋਮੈਟਿਕਲੀ 100% ਚੌੜਾਈ ਨੂੰ ਆਪਣੇ ਆਪ ਲੈ ਲੈਂਦਾ ਹੈ, ਸੋ ਜਦੋਂ ਤਕ ਤੁਸੀਂ ਇਸ ਨੂੰ ਮੌਜੂਦਾ ਕੰਟੇਨਰ ਤੋਂ ਘੱਟ ਨਾ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤੁਸੀਂ ਚੌੜਾਈ ਨੂੰ ਛੱਡ ਸਕਦੇ ਹੋ
ਅੰਤ ਵਿੱਚ, ਜੇ ਤੁਹਾਡੀ ਮਾਸਟਰ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ UL ਅਤੇ OL ਟੈਗਸ ਲਈ ਪ੍ਰੀਸੈਟਸ ਨਹੀਂ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਅੰਦਰ ਰੱਖਣਾ ਚਾਹੋਗੇ. ਇਸ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਆਪਣੇ ਉਲ 'ਤੇ ਬਾਰਡਰ, ਮਾਰਜਿਨ ਅਤੇ ਪੈਡਿੰਗ ਨੂੰ ਬੰਦ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ. ਪੈਡਿੰਗ: 0; ਹਾਸ਼ੀਆ: 0; ਬਾਰਡਰ: ਕੋਈ ਨਹੀਂ; ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਯੂ ਐਲ ਟੈਗ ਰੀਸੈੱਟ ਕੀਤਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਮਾਰਜਿਨ, ਪੈਡਿੰਗ, ਜਾਂ ਬਾਰਡਰ ਨੂੰ ਕਿਸੇ ਚੀਜ਼ ਦੇ ਬਦਲ ਸਕਦੇ ਹੋ ਜੋ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਦੇ ਨਾਲ ਫਿੱਟ ਹੈ.
ਤੁਹਾਡਾ ਫਾਈਨਲ .ਟੈਬਲਿਸਟ ਕਲਾਸ ਇਸ ਤਰ੍ਹਾਂ ਦਿੱਸਣਾ ਚਾਹੀਦਾ ਹੈ:
.tablist {list-style: none; ਉਚਾਈ: 2ਮ; ਪੈਡਿੰਗ: 0; ਹਾਸ਼ੀਆ: 0; ਬਾਰਡਰ: ਕੋਈ ਨਹੀਂ; }04 06 ਦਾ
ਲਿਸਟ ਸੂਚੀ ਆਈਟਮਾਂ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨਾ
ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੀ ਅਣ-ਸੂਚੀਬੱਧ ਸੂਚੀ ਨੂੰ ਸਟਾਇਲ ਕਰ ਲਿਆ ਹੈ, ਤੁਹਾਨੂੰ ਇਸਦੇ ਅੰਦਰਲੀ ਟੈਗ ਨੂੰ ਸਟਾਇਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ. ਨਹੀਂ ਤਾਂ, ਉਹ ਤੁਹਾਡੀਆਂ ਟੈਬਸ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦਿੱਤੇ ਬਿਨਾਂ ਇੱਕ ਸਟੈਂਡਰਡ ਸੂਚੀ ਅਤੇ ਅਗਲੀ ਲਾਈਨ ਤੇ ਹਰ ਇੱਕ ਚਾਲ ਵਾਂਗ ਕੰਮ ਕਰਨਗੇ.
ਪਹਿਲਾਂ, ਆਪਣੀ ਸ਼ੈਲੀ ਦੀ ਜਾਇਦਾਦ ਨੂੰ ਸੈੱਟ ਕਰੋ:
.tablist li {}ਫਿਰ ਤੁਸੀਂ ਆਪਣੀਆਂ ਟੈਬਸ ਫਲੋਟ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਜੋ ਉਹ ਹਰੀਜੱਟਲ ਸਪਲਾਈ ਤੇ ਲਾਈਨ ਬਣਾ ਸਕਣ. ਫਲੋਟ: ਖੱਬੇ;
ਅਤੇ ਟੈਬਸ ਦੇ ਵਿਚਕਾਰ ਕੁਝ ਹਾਸ਼ੀਏਲ ਨੂੰ ਜੋੜਣਾ ਨਾ ਭੁੱਲੋ, ਤਾਂ ਜੋ ਉਹ ਇਕੱਠੇ ਰਲਗਣ ਨਾ ਕਰ ਸਕਣ. ਹਾਸ਼ੀਆ-ਸੱਜਾ: 0.13ਮ;
ਤੁਹਾਡੀਆਂ Li ਸ਼ੀਲਾਂ ਨੂੰ ਇਸ ਤਰਾਂ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ:
.tablist li {ਫਲੋਟ: ਖੱਬੇ; ਹਾਸ਼ੀਆ-ਸੱਜਾ: 0.13ਮ; }06 ਦਾ 05
ਟੈਬਸ ਬਣਾਉਣਾ CSS 3 ਨਾਲ ਟੈਬਸ ਵਾਂਗ ਦੇਖੋ
ਇਸ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਿਚ ਜ਼ਿਆਦਾਤਰ ਭਾਰ ਚੁੱਕਣ ਲਈ, ਮੈਂ ਅਣ-ਸੂਚੀਬੱਧ ਸੂਚੀ ਦੇ ਅੰਦਰ ਲਿੰਕ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾ ਰਿਹਾ ਹਾਂ. ਬਰਾਊਜ਼ਰ ਮੰਨਦੇ ਹਨ ਕਿ ਲਿੰਕਾਂ ਹੋਰ ਟੈਗਾਂ ਤੋਂ ਇੱਕ ਵੈਬ ਪੇਜ ਤੇ ਵਧੇਰੇ ਕਰਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਪੁਰਾਣੇ ਬ੍ਰਾਉਜ਼ਰਾਂ ਨੂੰ ਹੋਰਾਂ ਦੇ ਰਾਜਾਂ ਵਾਂਗ ਪਾਲਣਾ ਕਰਨਾ ਅਸਾਨ ਹੁੰਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਐਂਕਰ ਟੈਗ (ਲਿੰਕ) ਨਾਲ ਜੋੜਦੇ ਹੋ ਇਸ ਲਈ ਪਹਿਲਾਂ ਆਪਣੀਆਂ ਸ਼ੈਲੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਿਖੋ:
.tablist li a {} .tablist li a: ਹੋਵਰ {}ਕਿਉਂਕਿ ਇਹ ਟੈਬਾਂ ਨੂੰ ਕਿਸੇ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਟੈਬਸ ਵਾਂਗ ਕੰਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਟੈਬ ਦੇ ਪੂਰੇ ਖੇਤਰ ਨੂੰ ਕਲਿਕਯੋਗ ਨਾ ਹੋਵੇ, ਕੇਵਲ ਲਿੰਕ ਕੀਤੇ ਪਾਠ ਹੀ ਨਹੀਂ. ਅਜਿਹਾ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਇੱਕ ਟੈਗ ਨੂੰ ਇੱਕ " ਬਲਾਕ ਐਲੀਮੈਂਟ " ਵਿੱਚ ਆਮ " ਇਨਲਾਈਨ " ਸਥਿਤੀ ਵਿੱਚ ਤਬਦੀਲ ਕਰਨਾ ਪਵੇਗਾ. ਡਿਸਪਲੇ: ਬਲਾਕ; (ਜੇ ਤੁਸੀਂ ਫਰਕ ਬਾਰੇ ਹੋਰ ਜਾਣਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਬਲਾਕ-ਲੈਵਲ ਬਨਾਮ ਇਨਲਾਈਨ ਐਲੀਮੈਂਟਸ ਨੂੰ ਪੜ੍ਹੋ .)
ਫਿਰ, ਤੁਹਾਡੀਆਂ ਟੈਬਾਂ ਨੂੰ ਇੱਕ ਦੂਜੇ ਨਾਲ ਸਮਮਿਤ ਕਰਨ ਲਈ ਇੱਕ ਆਸਾਨ ਤਰੀਕਾ ਹੈ, ਲੇਕਿਨ ਟੈਕਸਟ ਦੀ ਚੌੜਾਈ ਨੂੰ ਫਿੱਟ ਕਰਨ ਲਈ ਫੈਕਸ ਵੀ ਹੈ ਕਿ ਇਹ ਸਹੀ ਅਤੇ ਖੱਬਾ ਪੈਡਿੰਗ ਨੂੰ ਉਸੇ ਤਰ੍ਹਾਂ ਬਣਾਵੇ. ਮੈਂ ਚੋਟੀ ਅਤੇ ਤਲ ਨੂੰ 0 ਅਤੇ ਸੱਜੇ ਅਤੇ 1ਮ ਤੱਕ ਖੱਬੇ ਕਰਨ ਲਈ ਪੈਡਿੰਗ ਸ਼ਾਲਾਂਦ ਦੀ ਜਾਇਦਾਦ ਦਾ ਇਸਤੇਮਾਲ ਕੀਤਾ. ਪੈਡਿੰਗ: 0 1em;
ਮੈਂ ਲਿੰਕ ਨੂੰ ਹੇਠਾਂ ਖਿੱਚਣ ਦਾ ਫੈਸਲਾ ਵੀ ਕੀਤਾ ਹੈ, ਤਾਂ ਕਿ ਟੈਬਸ ਘੱਟ ਲਿੰਕ ਦੀ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇ. ਪਰ ਜੇ ਤੁਹਾਡੇ ਦਰਸ਼ਕਾਂ ਦੁਆਰਾ ਉਸ ਨੂੰ ਉਲਝਣ ਵਿਚ ਪਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਤਾਂ ਇਸ ਲਾਈਨ ਨੂੰ ਛੱਡ ਦਿਓ. ਲਿੰਕ-ਸਜਾਵਟ: ਕੋਈ ਨਹੀਂ;
ਟੈਬਸ ਦੇ ਦੁਆਲੇ ਇੱਕ ਪਤਲੇ ਦੀ ਹੱਦ ਲਗਾ ਕੇ, ਇਹ ਉਹਨਾਂ ਨੂੰ ਟੈਬਸ ਵਾਂਗ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ. ਮੈਂ ਬਾਰਡਰ ਦੇ ਚਾਰੇ ਪਾਸਿਆਂ ਦੀ ਸਰਹੱਦ ਨੂੰ ਬਾਰਡਰ ਤੇ ਰੱਖਣ ਲਈ ਸੀਮਾ ਲਾਂਘੇ ਦੀ ਜਾਇਦਾਦ ਦੀ ਵਰਤੋਂ ਕੀਤੀ: 0.06: ਸੌ ਫੀਸਦੀ # 000; ਅਤੇ ਫਿਰ ਬਾਰਡਰ-ਥੱਲਥ ਦੀ ਵਰਤੋਂ ਨੂੰ ਇਸ ਨੂੰ ਤਲ ਤੋਂ ਹਟਾਉਣ ਲਈ ਵਰਤਿਆ. ਬਾਰਡਰ-ਥੱਲੇ: 0;
ਫਿਰ ਮੈਂ ਟੈਬਾਂ ਦੇ ਫੋਂਟ, ਰੰਗ ਅਤੇ ਬੈਕਗਰਾਉਂਡ ਰੰਗ ਵਿੱਚ ਕੁਝ ਅਨੁਕੂਲਤਾਵਾਂ ਕੀਤੀਆਂ ਇਹਨਾਂ ਸਟਾਈਲ ਵਿੱਚ ਸੈੱਟ ਕਰੋ ਜੋ ਤੁਹਾਡੀ ਸਾਈਟ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ. ਫੌਂਟ: ਬੋਲਡਰ 0.88ਮੇ / 2 ਐਮ ਏਰੀਅਲ, ਜੀਨੇਵਾ, ਹੈਲੈਟਿਕਕਾ, ਸੀਨਸ-ਸੀਰੀਫ; ਰੰਗ: # 000; ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: #ccc;
ਉਪਰੋਕਤ ਸਾਰੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਚੋਣਕਾਰ ਵਿੱਚ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ .ਟੈਬਲਿਸਟ ਲੀ a, ਨਿਯਮ ਇਸ ਲਈ ਕਿ ਉਹ ਆਮ ਤੌਰ ਤੇ ਐਂਕਰ ਟੈਗ ਨੂੰ ਪ੍ਰਭਾਵਤ ਕਰਦੇ ਹਨ. ਫਿਰ ਟੈਬਾਂ ਨੂੰ ਵਧੇਰੇ ਕਲਿਕ ਕਰਨਯੋਗ ਬਣਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਕੁਝ ਰਾਜ ਨਿਯਮ ਨੂੰ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ .ਟੈਬਲਿਸਟ ਲੀ a: ਹੋਵਰ
ਜਦੋਂ ਤੁਸੀਂ ਇਸਦੇ ਉੱਤੇ ਮਾਊਸ ਕਰਦੇ ਹੋ ਤਾਂ ਮੈਂ ਟੈਕਸਟ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਦਾ ਰੰਗ ਬਦਲਣਾ ਚਾਹੁੰਦਾ ਹਾਂ ਤਾਂ ਟੈਬ ਪੌਪ ਬਣਾਉ. ਪਿਛੋਕੜ: # 3 ਸੀਐਫ; ਰੰਗ: #fff;
ਅਤੇ ਮੈਂ ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਇਕ ਹੋਰ ਯਾਦ ਦਿਲਾਉਂਦਾ ਸੀ ਜਿਸ ਦੀ ਮੈਂ ਚਾਹਾਂਗਾ ਕਿ ਉਹ ਰਹਿਣ ਲਈ ਲਿੰਕ ਨੂੰ ਹੇਠਾਂ ਰੇਖਾ ਨਾ ਹੋਵੇ. ਪਾਠ-ਸਜਾਵਟ: ਕੋਈ ਨਹੀਂ; ਇਕ ਹੋਰ ਆਮ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਟੈਬ ਉੱਤੇ ਮਾਊਸ ਲਗਾਉਂਦੇ ਹੋ ਤਾਂ ਹੇਠਾਂ ਲਾਈਨ ਖਿੱਚੋ. ਜੇ ਤੁਸੀਂ ਅਜਿਹਾ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਪਾਠ-ਸਜਾਵਟ ਵਿਚ ਤਬਦੀਲ ਕਰੋ: ਹੇਠਾਂ ਲਕੀਰ;
ਪਰ CSS 3 ਕਿੱਥੇ ਹੈ?
ਜੇ ਤੁਸੀਂ ਧਿਆਨ ਦੇ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸ਼ਾਇਦ ਦੇਖਿਆ ਹੋਵੇਗਾ ਕਿ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਵਰਤੀਆਂ ਗਈਆਂ ਕੋਈ CSS 3 ਸਟਾਈਲ ਨਹੀਂ ਹਨ. ਇਸ ਵਿੱਚ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਸਮੇਤ ਕਿਸੇ ਵੀ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਕੰਮ ਕਰਨ ਦਾ ਫਾਇਦਾ ਹੈ. ਪਰ ਇਹ ਟੈਬ ਨੂੰ ਵਰਗ ਬਕਸਿਆਂ ਤੋਂ ਵੱਧ ਹੋਰ ਕੋਈ ਚੀਜ਼ ਨਹੀਂ ਬਣਾਉਂਦਾ. ਇੱਕ CSS 3 ਸਟਾਇਲ ਕਾਲ ਬਾਰ ਬਾਰਡਰ-ਰੈਡਸ (ਅਤੇ ਇਹ ਬਰਾਡਜ਼ਰ-ਵਿਸ਼ੇਸ਼ ਕਾੱਲਾਂ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ) ਨੂੰ ਜੋੜ ਕੇ ਤੁਸੀਂ ਇੱਕ ਅਨੁਕੂਲਫੋਲਡਰ ਤੇ ਟੈਬਸ ਵਰਗੀਆਂ ਹੋਰ ਦੇਖਣ ਲਈ ਕਿਨਾਰੇ ਗੋਲ ਕਰ ਸਕਦੇ ਹੋ.
ਸਟਾਈਲ ਜੋ ਤੁਹਾਨੂੰ .tablist ਨੂੰ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ, ਇੱਕ ਨਿਯਮ ਹਨ: - ਵੈਬਕੀਟ-ਸਰਹੱਦ-ਉੱਪਰ-ਸੱਜੇ-ਰੇਡੀਅਸ: 0.50æਮੈ; -webkit-border-top-left-radius: 0.50em; -ਮੋਜ਼-ਸੀਮਾ-ਰੇਡੀਅਸ-ਸੁੱਰਖੀ: 0.50ੇਮ; -ਮੋਜ਼-ਸੀਮਾ-ਰੇਡੀਅਸ-ਟੂਪਲੈਟ: 0.50ੇਮ; ਬਾਰਡਰ-ਟਾਪ-ਰਾਈਟ-ਰੇਡੀਅਸ: 0.50ੈਮ; ਬਾਰਡਰ-ਚੋਟੀ-ਖੱਬੇ-ਰੇਡੀਅਸ: 0.50ਮ;
ਇਹ ਉਹ ਆਖਰੀ ਸਟਾਈਲ ਨਿਯਮ ਹਨ ਜੋ ਮੈਂ ਲਿਖਿਆ:
.tablist li {display: block; ਪੈਡਿੰਗ: 0 1em; ਪਾਠ-ਸਜਾਵਟ: ਕੋਈ ਨਹੀਂ; ਸਰਹੱਦ: 0.06em ਠੋਸ # 000; ਬਾਰਡਰ-ਥੱਲੇ: 0; ਫੌਂਟ: ਬੋਲਡਰ 0.88ਮੇ / 2 ਐਮ ਏਰੀਅਲ, ਜੀਨੇਵਾ, ਹੈਲੈਟਿਕਕਾ, ਸੀਨਸ-ਸੀਰੀਫ; ਰੰਗ: # 000; ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: #ccc; / * CSS 3 ਐਲੀਮੈਂਟਸ * / ਵੈਬਕਿਟ-ਸੀਮਾ-ਚੋਟੀ-ਸੱਜੇ-ਰੇਡੀਅਸ: 0.50ੇਮ; -webkit-border-top-left-radius: 0.50em; -ਮੋਜ਼-ਸੀਮਾ-ਰੇਡੀਅਸ-ਸੁੱਰਖੀ: 0.50ੇਮ; -ਮੋਜ਼-ਸੀਮਾ-ਰੇਡੀਅਸ-ਟੂਪਲੈਟ: 0.50ੇਮ; ਬਾਰਡਰ-ਟਾਪ-ਰਾਈਟ-ਰੇਡੀਅਸ: 0.50ੈਮ; ਬਾਰਡਰ-ਚੋਟੀ-ਖੱਬੇ-ਰੇਡੀਅਸ: 0.50ਮ; } .ਟੈਬਲਿਸਟ ਲੀ a: ਹੋਵਰ (ਪਿੱਠਭੂਮੀ: # 3 ਸੀਫ; ਰੰਗ: #fff; ਪਾਠ-ਸਜਾਵਟ: ਕੋਈ ਨਹੀਂ; }ਇਹਨਾਂ ਸਟਾਈਲ ਦੇ ਨਾਲ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਟੈਬਡ ਮੇਨੂ ਹੈ ਜੋ ਸਾਰੇ ਮੁੱਖ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ ਅਤੇ CSS 3 ਅਨੁਕੂਲ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਪ੍ਰਿੰਟ ਕੀਤੀ ਟੈਬਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ. ਅਗਲਾ ਪੇਜ ਤੁਹਾਨੂੰ ਇੱਕ ਹੋਰ ਵਿਕਲਪ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਇਸ ਨੂੰ ਹੋਰ ਜ਼ਿਆਦਾ ਤਿਆਰ ਕਰਨ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ.
06 06 ਦਾ
ਮੌਜੂਦਾ ਟੈਬ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰੋ
ਐਚਟੀਏਮ ਵਿੱਚ ਜੋ ਮੈਂ ਬਣਾਇਆ ਹੈ, ਉਸ ਵਿੱਚ ਇੱਕ ਆਈ.ਡੀ. ਇਹ ਤੁਹਾਨੂੰ ਇੱਕ LI ਨੂੰ ਬਾਕੀ ਦੇ ਇੱਕ ਵੱਖਰਾ ਸ਼ੈਲੀ ਦੇਣ ਲਈ ਸਹਾਇਕ ਹੈ. ਸਭ ਤੋਂ ਆਮ ਸਥਿਤੀ ਇਹ ਹੈ ਕਿ ਮੌਜੂਦਾ ਟੈਬ ਕਿਸੇ ਤਰੀਕੇ ਨਾਲ ਬਾਹਰ ਖੜ੍ਹੇ ਹੋਣ. ਇਸ ਬਾਰੇ ਸੋਚਣ ਦਾ ਇੱਕ ਹੋਰ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਟੈਗਾਂ ਨੂੰ ਸਲੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਲਾਇਨ ਨਹੀਂ ਹਨ. ਤਦ ਤੁਸੀਂ ਬਦਲਦੇ ਹੋ ਜਿੱਥੇ ਆਈਡੀ ਵੱਖਰੇ ਪੰਨਿਆਂ ਤੇ ਹੈ.
ਮੈਂ # ਟੈਕਸਟ ਦੋਨਾਂ ਅਤੇ # ਕੈਰੀਅਰ A: ਹੋਵਰ ਸਟੇ ਦੋ ਤਰ੍ਹਾਂ ਦੀ ਸਟਾਈਲ ਬਣਾਉਂਦਾ ਹਾਂ ਤਾਂ ਕਿ ਦੋਵੇਂ ਥੋੜ੍ਹਾ ਵੱਖਰੇ ਹੋਣ. ਤੁਸੀਂ ਰੰਗ, ਬੈਕਗ੍ਰਾਉਂਡ ਕਲਰ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਉਚਾਈ, ਚੌੜਾਈ ਅਤੇ ਉਸ ਤੱਤ ਦੇ ਪੈਡਿੰਗ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ. ਆਪਣੀ ਡਿਜਾਇਨ ਵਿੱਚ ਜੋ ਵੀ ਬਦਲਾਵ ਆਉਂਦੇ ਹਨ ਉਸਨੂੰ ਕਰੋ.
.tablist li # current a {background-color: # 777; ਰੰਗ: #fff; } .tablist li # current a: hover {background: # 39C; }ਅਤੇ ਤੁਸੀਂ ਪੂਰਾ ਕਰ ਲਿਆ ਹੈ! ਤੁਸੀਂ ਆਪਣੀ ਵੈਬਸਾਈਟ ਲਈ ਹੁਣੇ ਹੀ ਇੱਕ ਟੈਬਡ ਮੀਨੂ ਬਣਾਈ ਹੈ.