સાઇટ પોતાને માટે એક આડી મેનુ બનાવો

આડું મેનુ લગભગ કોઈ પણ સાઇટ છે - તે એક મહત્વપૂર્ણ ભાગ છે, કારણ કે તે તેના દેખાવ અને ઉપયોગીતા આકર્ષવા માટે અથવા, તેનાથી વિપરીત, દૂર મુલાકાતીઓ બીક સાથે કરી શકો છો. શીખવાની પ્રાથમિક આડી મેનુ બનાવવા માટે કેવી રીતે દો: બનાવવાની મૂળભૂત કુશળતા માસ્ટર કરવા માટે HTML તેને "હાડપિંજર" બનાવવા. તમે ચોક્કસપણે તૈયાર મેનુ શોધી શકો છો, પરંતુ ખૂબ NICER તે કેવી રીતે જાતે વિકસાવવા માટે જાણવા માટે. તે ખૂબ મજા છે.

મેનુ બનાવવા માટે જાણો

અમે સીમેન્ટિક્સ, જે લેઆઉટ અગ્રણી આંકડા પાલન નથી ચલિત થવું પ્રયાસ કરો. પ્રથમ તમે HTML અમારા મેનુઓ માટે "હાડપિંજર" બનાવવા માટે, તેમના પોતાના આડી મેનુઓ બનાવવા માટે મૂળભૂત કુશળતા શીખવા છે. અને પછી તેને સજાવટ કરશે, સ્ટાઇલ શીટ્સ ઉપયોગ કરે છે. અમારા આડી મેનુ 5 આઇટમ્સ ધરાવે દો. પ્રથમ આઇટમ હોમપેજ પર રીડાયરેક્ટ કરવામાં આવશે. બીજા બિંદુ - "અમારા વિશે". તૃતીય - "અમારા પુરસ્કારો". ચોથી - "તે મજા છે." ફિફ્થ - "અમારો સંપર્ક કરો".

એચટીએમએલ કોડ આના જેવું દેખાય છે:

કોણ ખબર નથી: ઉલ ટેગ માટે વપરાય છે બુલેટ, તેના તત્વો લિ સાથે શરૂ થાય છે. લિ ટૅગ્સ શૈલીઓનો ઉલ લાગુ પડે છે મેળવે છે.

ઉલ - યાદી બ્લોક તત્વ, તે પહોળાઈ ખેંચાઈ આવશે. લી પણ એક બ્લોક છે.

આથી, index.html બનાવો. અમે અમારી કોડ એકત્રિત કરો. આ બિંદુએ, બ્રાઉઝર બદલે એક આડી મેનુ કરતાં ઊભી દર્શાવે છે. પરંતુ અમે તમને ધ્યેય સાથે - સાઇટ માટે એક આડી મેનુ બનાવવા માટે. આ માટે અમે સીએસએસ જરૂર છે.

સીએસએસ શું છે?

તમે હજુ સુધી સાઇટ્સ વિકાસ માસ્ટર હોય, તો તે કેસ્કેડીંગ સ્ટાઇલ શીટ્સ ખ્યાલ સાથે પરિચિત માટે જરૂરી છે. હકીકતમાં, આ ફોર્મેટિંગ, પ્રોસેસિંગ માટે નિયમો, કે જે વેબ સાઇટ પૃષ્ઠો પર વિવિધ તત્વો પર લાગુ કરવામાં આવે છે. અમે પ્રમાણભૂત એચટીએમએલ તત્વો ગુણધર્મો વર્ણવે, તો તમે કોડ એક જ ટુકડાઓ એક નકલ મેળવવા માટે, આ ઘણી વખત પુનરાવર્તન કરવું પડશે. વપરાશકર્તાના કમ્પ્યુટર પર પૃષ્ઠ લોડ સમય વધશે. આને અવગણવા માટે, ત્યાં એક સીએસએસ છે. તે માત્ર એક જ વાર એક નિશ્ચિત તત્વ વર્ણવવા માટે પૂરતા છે, અને પછી ફક્ત જ્યાં ચોક્કસ શૈલી ગુણધર્મો વાપરવા માટે સૂચવે છે. તે માત્ર પૃષ્ઠમાં લખાણ, પણ બીજી ફાઇલ માં વર્ણન કરવા માટે શક્ય છે. આ સાઇટ તમામ પૃષ્ઠો પર વિવિધ શૈલીઓ વર્ણન લાગુ કરવા માટે પરવાનગી આપશે. તે પણ કેટલાક પૃષ્ઠો સુધારવા માટે સીએસએસ ફાઇલ ફેરફાર અનુકૂળ છે. સ્ટાઇલ શીટ્સ તમે HTML કરતાં વધુ સારી સ્તર પર ફોન્ટ્સ સાથે કામ કરવા માટે, આ સાઇટ ની ગ્રાફિક્સ પૃષ્ઠો બગડી ટાળવા મદદ પરવાનગી આપે છે.

મેનુ વિકાસ માટે સ્ટાઇલ શીટ્સ ઉપયોગ કરીને

મેનુ માટે સીએસએસ કોડ:

1. # My_1menu {યાદી-શૈલી: none; પેડિંગ: 6; પહોળાઈ: 800px; ગાળો: ઓટો;}
2. # My_1menu લિ {ફ્લોટ: બાકી; ફૉન્ટ: ઇટાલિક 18px એરિયલ;}
3. એક {રંગ # My_1menu: # 756; પ્રદર્શન: બ્લોક; ઊંચાઈ: 55px; લાઇન ઊંચાઇ: 55px; પેડિંગ: 0px 15px 0px 15px; પૃષ્ઠભૂમિ: #dfc; text-decoration: none;}
4. # My_1menu A: હોવર {રંગ: #foa; બેકગ્રાઉન્ડ: # 788;}

હવે ચાલો પરિણામી આડી સીએસએસ મેનુ જોવા દો.

- માર્ક્સ સુનિશ્ચિત વસ્તુઓ દ્વારા છોડી દૂર કરવા માટે આ આદેશ નહીં: - # My_1menu તેથી ત્યાં id = my_1menu, સૂચિ-શૈલી સાથે UL- તત્વ માટે શૈલી સોંપણી છે.

પહોળાઈ: 800px - અમારા મેનુ પહોળાઈ 800 પિક્સેલ્સ છે.

પેડિંગ: 0 - આ અંદર પેડિંગ દૂર કરે છે.

ગાળો: ઓટો - અમારા પાનું કેન્દ્રમાં આડી મેનુ vyravnivnie.

# My_1menu લિ - સોંપણી શૈલીઓ લિ-તત્વો છે.

ઊંચાઈ: 55px - મેનુ ઊંચાઇ.

# એક My_1menu: હોવર - સોંપણી તત્વ પ્રકારો અને જ્યારે તે ઉદભવે છે માઉસ લઈ જાઓ.

અમે વિગતવાર દરેક લીટી વર્ણવે નહીં કારણ કે દરેક ડેવલપર વ્યાખ્યાયિત કરી પોતાના પરિમાણો છે. વેબસાઇટ પર મેનુમાં શૈલીઓ ઉપયોગ કરવા માટે આ આધાર. તમે તેને વધુ ફિનિશ્ડ અને સુંદર દેખાવ ચિત્રોનો ઉપયોગ કરીને આપી શકો છો. તત્વ સોંપો પરંતુ ઉદાહરણ તરીકે, પૃષ્ઠભૂમિ માટે: URL (img1.png) પુનરાવર્તન-X. ત્યાં દો હોઈ પૃષ્ઠભૂમિ: URL (img2.png) પુનરાવર્તન-X માટે: હોવર.

તમારી કલ્પનાને, સર્જનાત્મક પસંદગીઓનો ઉપયોગ કરો. પછી કેવી રીતે વેબસાઇટ પર એક સરળ મેનુ બનાવવા માટે પર જ્ઞાન પર આધારિત છે, તમે તેના પોતાના અનન્ય ડિઝાઇન સાથે એક પાનું વિકસી શકે છે.