ਸਾਈਟ ਆਪਣੇ ਲਈ ਇੱਕ ਖਿਤਿਜੀ ਮੇਨੂ ਬਣਾਉ

ਹਰੀਜ਼ਟਲ ਮੇਨੂ ਲਗਭਗ ਕਿਸੇ ਵੀ ਸਾਈਟ ਹੈ - ਇਸ ਨੂੰ, ਇਕ ਜ਼ਰੂਰੀ ਹਿੱਸਾ ਹੈ ਦੇ ਰੂਪ ਵਿੱਚ ਇਸ ਨੂੰ ਇਸ ਦੀ ਦਿੱਖ ਅਤੇ ਵਰਤਣਯੋਗਤਾ ਨੂੰ ਆਕਰਸ਼ਿਤ ਕਰਨ ਲਈ ਜ, ਇਸ ਦੇ ਉਲਟ, ਦੂਰ ਸੈਲਾਨੀ ਧਮਕਾਣਾ ਨਾਲ ਕਰ ਸਕਦੇ ਹੋ. ਦੇ ਸਿੱਖ ਇੱਕ ਐਲੀਮਟਰੀ ਖਿਤਿਜੀ ਮੇਨੂ ਬਣਾਉਣ ਲਈ ਕਿਸ ਕਰੀਏ: ਬਣਾਉਣ ਦੇ ਬੁਨਿਆਦੀ ਹੁਨਰ ਪੰਗਾ ਕਰਨ ਨੂੰ HTML ਕਰਨ ਲਈ ਇਸ ਨੂੰ "ਫਿਰਦੀ" ਕਰ,. ਤੁਹਾਨੂੰ ਜ਼ਰੂਰ ਇੱਕ ਤਿਆਰ ਮੇਨੂ ਪਤਾ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਬਹੁਤ ਕੁਝ ਯੂ ਨੂੰ ਇਸ ਨੂੰ ਆਪਣੇ ਆਪ ਨੂੰ ਵਿਕਸਤ ਕਰਨ ਲਈ ਸਿੱਖਣ ਲਈ. ਇਹ ਪਰੈਟੀ ਮਜ਼ੇਦਾਰ ਹੈ.

ਮੇਨੂ ਬਣਾਉਣ ਲਈ ਸਿੱਖੋ

ਸਾਨੂੰ Semantics ਹੈ, ਜੋ ਕਿ ਲੇਆਉਟ ਦੇ ਮੋਹਰੀ ਅੰਕੜੇ ਦੀ ਪਾਲਣਾ ਤੱਕ ਭਟਕ ਨਾ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ. ਪਹਿਲੀ ਤੁਹਾਨੂੰ ਕਿ HTML ਲਈ ਸਾਡੀ ਮੇਨੂ ਲਈ ਇੱਕ "ਫਿਰਦੀ" ਬਣਾਉਣ ਲਈ, ਆਪਣੇ ਹੀ ਖਿਤਿਜੀ ਮੇਨੂ ਬਣਾਉਣ ਲਈ ਬੁਨਿਆਦੀ ਹੁਨਰ ਸਿੱਖਣ ਦੀ ਹੈ. ਅਤੇ ਫਿਰ ਇਸ ਨੂੰ ਸਜਾਉਣ ਜਾਵੇਗਾ, ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਰਤ. ਸਾਡੇ ਖਿਤਿਜੀ ਮੇਨੂ 5 ਇਕਾਈ ਸ਼ਾਮਿਲ ਹੈ ਕਰੀਏ. ਪਹਿਲੀ ਇਕਾਈ ਨੂੰ ਹੋਮਪੇਜ ਨੂੰ ਨਿਰਦੇਸ਼ਤ ਕੀਤਾ ਜਾਵੇਗਾ. ਦੂਜਾ ਬਿੰਦੂ - "ਸਾਡੇ ਬਾਰੇ". ਤੀਜੇ - "ਸਾਡਾ ਇਨਾਮ". ਚੌਥਾ - "ਇਹ ਮਜ਼ੇਦਾਰ ਹੈ." ਪੰਚਮ - "ਸਾਡੇ ਨਾਲ ਸੰਪਰਕ ਕਰੋ".

ਨੂੰ HTML-ਕੋਡ ਇਸ ਨੂੰ ਦਿਸਦਾ ਹੈ:

ਕੌਣ ਜਾਣਦਾ ਹੈ: ਉਲ ਟੈਗ ਲਈ ਵਰਤਿਆ ਗਿਆ ਹੈ ਗੋਲੀ, ਇਸ ਦੇ ਤੱਤ li ਨਾਲ ਸ਼ੁਰੂ. ਲੀ ਟੈਗ ਸਟਾਈਲ ਹੈ, ਜੋ ਕਿ ਉਲ ਲਈ ਲਾਗੂ ਕਰ ਰਹੇ ਹਨ ਦੇ ਵਾਰਸ.

ਉਲ - ਸੂਚੀ ਦੇ ਬਲਾਕ ਤੱਤ ਹੈ, ਇਸ ਨੂੰ ਚੌੜਾਈ ਕਰਨ ਲਈ ਖਿੱਚਿਆ ਕੀਤਾ ਜਾਵੇਗਾ. ਲੀ ਨੇ ਇਹ ਵੀ ਇੱਕ ਬਲਾਕ ਹੈ.

ਇਸ ਲਈ, ਇੱਕ index.html ਬਣਾਉਣ. ਸਾਨੂੰ ਸਾਡੇ ਕੋਡ ਨੂੰ ਇਕੱਠਾ. ਇਸ ਮੌਕੇ 'ਤੇ, ਬਰਾਊਜ਼ਰ ਨੂੰ, ਨਾ ਕਿ ਇੱਕ ਖਿਤਿਜੀ ਮੇਨੂ ਵੱਧ, ਇੱਕ ਲੰਬਕਾਰੀ ਵੇਖਾਉਦਾ ਹੈ. ਪਰ ਸਾਨੂੰ ਤੁਹਾਡੇ ਦਾ ਟੀਚਾ ਦੇ ਨਾਲ - ਸਾਈਟ ਲਈ ਇੱਕ ਖਿਤਿਜੀ ਮੇਨੂ ਬਣਾਉਣ ਲਈ. ਇਸ ਲਈ ਸਾਨੂੰ CSS ਦੀ ਲੋੜ ਹੈ.

CSS ਕੀ ਹੈ?

ਜੇਕਰ ਤੁਹਾਨੂੰ ਅਜੇ ਵੀ ਸਾਈਟ ਦੇ ਵਿਕਾਸ ਪੰਗਾ ਕਰਨ ਦੀ ਹੈ, ਜੇ, ਇਸ ਸਕੇਵਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟ ਦੇ ਸੰਕਲਪ ਦੇ ਨਾਲ ਜਾਣਦੇ ਹੀ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ. ਅਸਲ ਵਿਚ, ਇਹ ਫਾਰਮਿਟ, ਨੂੰ ਕਾਰਵਾਈ ਕਰਨ ਲਈ ਨਿਯਮ ਹੈ, ਜੋ ਕਿ ਇੱਕ ਵੈੱਬ-ਸਾਈਟ ਦੇ ਸਫ਼ੇ 'ਤੇ ਵੱਖ-ਵੱਖ ਤੱਤ ਨੂੰ ਲਾਗੂ ਕਰ ਰਹੇ ਹਨ ਹਨ. ਸਾਨੂੰ ਮਿਆਰੀ HTML ਵਿੱਚ ਤੱਤ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਵਰਣਨ ਹੈ, ਜੇ, ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਕੋਡ ਦੇ ਉਸੇ ਟੁਕੜੇ ਦੀ ਇੱਕ ਨਕਲ ਪ੍ਰਾਪਤ ਹੈ, ਇਸ ਨੂੰ ਕਈ ਵਾਰ ਦੁਹਰਾ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ. ਉਪਭੋਗੀ ਦੇ ਕੰਪਿਊਟਰ 'ਤੇ ਸਫ਼ਾ ਲੋਡ ਵਾਰ ਫੈਲ ਜਾਵੇਗਾ. ਇਸ ਨੂੰ ਬਚਣ ਲਈ, ਇੱਕ CSS ਹੈ. ਇਹ ਕੇਵਲ ਇੱਕ ਵਾਰ ਹੀ ਕਿਸੇ ਖਾਸ ਤੱਤ ਦਾ ਵਰਣਨ ਕਰਨ ਲਈ ਕਾਫ਼ੀ ਹੈ, ਅਤੇ ਫਿਰ ਬਸ, ਜਿੱਥੇ ਇੱਕ ਖਾਸ ਸ਼ੈਲੀ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਵਰਤਣ ਲਈ ਪਤਾ ਲੱਗਦਾ ਹੈ. ਇਹ ਨਾ ਸਿਰਫ ਸਫ਼ੇ ਦਾ ਪਾਠ ਹੈ, ਪਰ ਇਹ ਵੀ ਇਕ ਹੋਰ ਫਾਇਲ ਵਿੱਚ ਦੇ ਵੇਰਵੇ ਬਣਾਉਣ ਲਈ ਸੰਭਵ ਹੈ. ਇਹ ਸਾਈਟ ਦੇ ਸਾਰੇ ਪੰਨੇ 'ਤੇ ਵੱਖ-ਵੱਖ ਸਟਾਈਲ ਦੇ ਵੇਰਵੇ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਸਹਾਇਕ ਹੋਵੇਗਾ. ਇਸ ਵਿਚ ਇਹ ਵੀ, ਕੁਝ ਸਫ਼ੇ ਨੂੰ ਤਬਦੀਲ ਕਰਨ ਲਈ CSS-ਫਾਇਲ ਸੋਧਣ ਸੁਵਿਧਾਜਨਕ ਹੈ. ਸ਼ੈਲੀ ਸ਼ੀਟ ਤੁਹਾਨੂੰ HTML ਵੱਧ ਇੱਕ ਬਿਹਤਰ ਪੱਧਰ 'ਤੇ ਫੋਰ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ, ਸਾਈਟ ਦੀ ਗਰਾਫਿਕਸ ਸਫ਼ੇ ਵਿਗੜ ਬਚਣ ਲਈ ਮਦਦ ਕਰ ਲਈ ਸਹਾਇਕ ਹੈ.

ਮੇਨੂ ਵਿਕਾਸ ਲਈ ਸਟਾਇਲ ਦਾ ਇਸਤੇਮਾਲ

ਮੇਨੂ ਲਈ CSS-ਕੋਡ:

1. # My_1menu {ਸੂਚੀ ਵਿੱਚ-ਸ਼ੈਲੀ: ਕਿਸੇ ਨੂੰ ਨਾ ਚੁਣੋ; ਚਿਣਨ: 6; ਚੌੜਾਈ: 800px; ਫਰਕ: ਆਟੋ;}
2. # My_1menu li {ਫਲੋਟ: ਛੱਡ ਦਿੱਤਾ; ਫੋਟ: ਤਿਰਛੇ 18px Arial;}
3. ਇੱਕ {ਦਾ ਰੰਗ # My_1menu: # 756; ਡਿਸਪਲੇਅ: ਬਲਾਕ; ਕੱਦ: 55px; ਲਾਈਨ-ਉਚਾਈ: 55px; ਚਿਣਨ: 0px 15px 0px 15px; ਦੀ ਪਿੱਠਭੂਮੀ: #dfc; ਪਾਠ-ਸਜਾਵਟ: ਕਿਸੇ ਨੂੰ ਨਾ ਚੁਣੋ;}
4. # My_1menu ਨੂੰ ਇੱਕ: ਹੋਵਰ {ਦਾ ਰੰਗ: #foa; ਦੀ ਪਿੱਠਭੂਮੀ ': # 788;}

ਹੁਣ ਦੇ ਨਤੀਜੇ ਖਿਤਿਜੀ CSS ਮੇਨੂ ਵੇਖਣ ਦਿਓ.

- ਅੰਕ ਤਹਿ ਇਕਾਈ ਦੇ ਕੇ ਛੱਡ ਦਿੱਤਾ ਨੂੰ ਹਟਾਉਣ ਲਈ ਇਸ ਹੁਕਮ ਨੂੰ ਕੋਈ ਵੀ: - # My_1menu ਇਸ id = my_1menu, ਸੂਚੀ-ਸ਼ੈਲੀ ਨਾਲ UL- ਤੱਤ ਲਈ ਸ਼ੈਲੀ ਜ਼ਿੰਮੇਵਾਰੀ ਹੈ.

ਚੌੜਾਈ: 800px - ਸਾਡੇ ਮੇਨੂ ਦੀ ਚੌੜਾਈ 800 ਪਿਕਸਲ ਹੈ.

ਚਿਣਨ: 0 - ਇਸ ਦੇ ਅੰਦਰ ਚਿਣਨ ਨੂੰ ਹਟਾ.

ਫਰਕ: ਆਟੋ - ਸਾਡੇ ਸਫ਼ੇ ਦੇ ਕਦਰ 'ਤੇ ਖਿਤਿਜੀ ਮੇਨੂ vyravnivnie.

# My_1menu li - ਨਿਰਧਾਰਤ ਸਟਾਈਲ li-ਤੱਤ.

ਕੱਦ: 55px - ਮੇਨੂ ਉਚਾਈ ਹੈ.

# ਨੂੰ ਇੱਕ My_1menu: ਹੋਵਰ - ਨਿਰਧਾਰਤ ਤੱਤ ਨੂੰ ਸਟਾਈਲ ਅਤੇ ਇਸ ਨੂੰ ਫੁਸਲਾ ਹੈ ਮਾਊਸ ਨੂੰ.

ਸਾਨੂੰ ਵਿਸਥਾਰ ਵਿੱਚ, ਹਰ ਲਾਈਨ ਦਾ ਵਰਣਨ ਨਹੀ ਕਰੇਗਾ ਦੇ ਤੌਰ ਤੇ ਹਰ ਡਿਵੈਲਪਰ ਇਸ ਦੇ ਪੈਰਾਮੀਟਰ ਇੱਥੇ ਦੇ ਸਕਦੇ ਹੋ. ਦੀ ਵੈਬਸਾਈਟ 'ਤੇ ਮੇਨੂ ਵਿੱਚ ਸਟਾਈਲ ਦੇ ਵਰਤਣ ਲਈ ਇਹ ਆਧਾਰ. ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ ਇੱਕ ਹੋਰ ਮੁਕੰਮਲ ਅਤੇ ਸੁੰਦਰ ਦਿੱਖ ਤਸਵੀਰ ਵਰਤ ਦੇ ਸਕਦਾ ਹੈ. ਤੱਤ ਨਿਰਧਾਰਤ ਪਰ ਮਿਸਾਲ, ਦੀ ਪਿੱਠਭੂਮੀ ਲਈ,: URL (img1.png) ਦੁਹਰਾ-X. ਉਥੇ ਕਰੀਏ ਪਿਛੋਕੜ ਦੀ: URL (img2.png) ਦੁਹਰਾ-X ਲਈ ਇੱਕ: ਹੋਵਰ.

ਆਪਣੇ ਕਲਪਨਾ, ਰਚਨਾਤਮਕ ਵਰਤੋ. ਫਿਰ ਕਿਸ ਦੀ ਵੈੱਬਸਾਈਟ 'ਤੇ ਇੱਕ ਸਧਾਰਨ ਮੇਨੂ ਬਣਾਉਣ ਲਈ ਕਿਸ' ਤੇ ਹੈ, ਜੋ ਕਿ ਗਿਆਨ ਦੇ ਅਧਾਰ 'ਤੇ, ਤੁਹਾਨੂੰ ਇਸ ਦੇ ਆਪਣੇ ਵਿਲੱਖਣ ਡਿਜ਼ਾਈਨ ਦੇ ਨਾਲ ਇੱਕ ਸਫ਼ੇ ਦਾ ਵਿਕਾਸ ਕਰ ਸਕਦਾ ਹੈ.