CSS લેઆઉટ માટે જરૂરી છે કે તમે તમારી વેબસાઇટ લેઆઉટને સંપૂર્ણ લાગે, અને પછી ટુકડા લઈ અને તેમને એકસાથે મૂકો. CSS સાથે સરળ 3 કૉલમ લેઆઉટ કેવી રીતે બનાવવી તે જાણો.
09 ના 01
તમારું લેઆઉટ દોરો
તમે તમારા લેઆઉટને કાગળ પર અથવા ગ્રાફિક્સ પ્રોગ્રામમાં ડ્રો કરી શકો છો. જો તમારી પાસે પહેલેથી વાયર-ફ્રેમ હોય અથવા તો વધુ વ્યાપક રચના ધ્યાનમાં હોય, તો સાઇટને બનાવેલા મૂળભૂત બૉક્સમાં તેને સરળ બનાવો. આ લેખમાં આ લેખમાં મુખ્ય વિષયવસ્તુના ત્રણ સ્તંભો છે, તેમજ હેડર અને ફૂટર છે. જો તમે નજીકથી જુઓ છો, તો તમે જોઈ શકો છો કે ત્રણ કૉલમ પહોળાઈ સમાન નથી.
તમે તમારા લેઆઉટને બહાર કાઢ્યા પછી, તમે પરિમાણો વિશે વિચારી શકો છો. આ ઉદાહરણ ડિઝાઇનમાં નીચેના મૂળભૂત પરિમાણો છે:
- 900 પિક્સેલથી વધુ પહોળી નથી
- ડાબી બાજુએ 20 પીએક્સ ગટર
- કૉલમ અને પંક્તિઓ વચ્ચે 10 પીએક્સ
- 250px, 300px, અને 300px વિશાળ છે તે સ્તંભો
- ટોચની પંક્તિ 150px ઊંચી છે
- નીચે પંક્તિ 100px ઊંચી છે
09 નો 02
મૂળભૂત HTML / CSS લખો અને કન્ટેઈનર એલિમેન્ટ બનાવો
કારણ કે આ પૃષ્ઠ એક માન્ય HTML દસ્તાવેજ હશે, એક ખાલી HTML કન્ટેનરથી પ્રારંભ કરો
પૃષ્ઠ માર્જિન, બોર્ડર્સ અને પેડિંગ્સને શૂન્ય કરવા માટે મૂળભૂત CSS સ્ટાઇલમાં ઉમેરો. જ્યારે નવા દસ્તાવેજો માટે અન્ય પ્રમાણભૂત CSS શૈલીઓ છે , આ શૈલીઓ એ શુદ્ધ લેઆઉટ મેળવવા માટે તમારે ઓછામાં ઓછી જરૂર છે. તમારા દસ્તાવેજના વડા પર તેમને ઉમેરો: