CSS அமைப்பை நீங்கள் உங்கள் வலைத்தள அமைப்பை ஒட்டுமொத்தமாக நினைத்து, அதன் பிறகு துண்டுகளை எடுத்து அவற்றை ஒன்றாக வைக்க வேண்டும். CSS உடன் எளிய 3-நெடுவரிசை அமைப்பை எப்படி உருவாக்குவது என்பதை அறிக.
09 இல் 01
உங்கள் லேஅவுட் வரைக
காகிதத்தில் அல்லது கிராபிக் திட்டத்தில் உங்கள் அமைப்பை வரையலாம். நீங்கள் ஏற்கனவே ஒரு கம்பி-சட்ட அல்லது மனதில் இன்னும் விரிவான வடிவமைப்பை வைத்திருந்தால், தளத்தை உருவாக்கும் அடிப்படை பெட்டிகளுக்கு இதை எளிதாக்குங்கள். இந்த கட்டுரையில் சேர்ந்து வரும் இந்த வடிவமைப்பு முக்கிய உள்ளடக்கம் பகுதியில் மூன்று நெடுவரிசைகளைக் கொண்டுள்ளது, அத்துடன் தலைப்பு மற்றும் அடிக்குறிப்பு. நீங்கள் நெருக்கமாகப் பார்த்தால், மூன்று பத்திகள் அகலத்தில் சமமாக இருக்காது என்பதை நீங்கள் காணலாம்.
உங்கள் அமைப்பை இழுத்த பின், நீங்கள் பரிமாணங்களை சிந்திக்கத் தொடங்கலாம். இந்த மாதிரி வடிவமைப்பு பின்வரும் அடிப்படை பரிமாணங்களைக் கொண்டிருக்கும்:
- 900 பிக்சல்கள் அகலத்தில் இல்லை
- இடது புறத்தில் 20 px நீரோட்டம்
- பத்திகள் மற்றும் வரிசைகள் இடையே 10 px
- 250px, 300px மற்றும் 300px அகலமான நெடுவரிசைகள்
- மேல் வரிசையில் 150px உயரம்
- கீழே வரிசையில் 100px உயரம்
09 இல் 02
அடிப்படை HTML / CSS எழுது மற்றும் ஒரு கொள்கலன் உறுப்பு உருவாக்க
இந்தப் பக்கம் செல்லுபடியான HTML ஆவணம் ஆக இருப்பதால், வெற்று HTML கொள்கலன் மூலம் தொடங்கவும்
பக்கம் விளிம்புகள், எல்லைகள் மற்றும் paddings வெளியே பூஜ்யம் அடிப்படை CSS பாணியை சேர்க்க. புதிய ஆவணங்கள் மற்ற நிலையான CSS பாணிகள் உள்ளன போது, இந்த பாணியை நீங்கள் ஒரு சுத்தமான அமைப்பை பெற வேண்டும் குறைந்தபட்ச உள்ளன. அவற்றை உங்கள் ஆவணத்தின் தலைப்பிற்கு சேர்க்கவும்:
<பாணி வகை = "உரை / CSS"> html, உடல் {margin: 0px; திணிப்பு: 0px; எல்லை: 0px; } style>அமைப்பை உருவாக்க தொடங்க, ஒரு கொள்கலன் உறுப்பு வைக்கவும். இது சில நேரங்களில் நீங்கள் கொள்கலன் அகற்ற முடியும் என்று நடக்கும், ஆனால் மிக நிலையான அகல அமைப்புகளுக்காக, கொள்கலன் உறுப்பு கொண்டிருக்கும் எளிதாக பல்வேறு வலை உலாவிகளில் முழுவதும் நிர்வகிக்க செய்கிறது. எனவே உடலில் இந்த வைத்து:
மற்றும் CSS நடை தாள், வைத்து:
#container {}09 ல் 03
உடை கொள்கலன்
வலைப்பக்கத்தின் பொருளடக்கம் எப்படி இருக்க வேண்டும் என்பதையும், உள்ளேயும் வெளிப்புறம் உள்ள ஏதேனும் விளிம்புகளையும் எந்த கொள்கையையும் வரையறுக்கிறது. இந்த ஆவணத்திற்கு, கொள்கலன் 870px அகலம் கொண்டது, இது 20 பிக்சல் நீராவி இடது பக்கம் உள்ளது. இரைப்பான் ஒரு விளிம்பு பாணியில் அமைக்கப்பட்டிருக்கும், ஆனால் கொள்கலனில் உள்ள திணிப்பு என்பது எந்த கூறுகளையும் கொள்கையளவில் இருந்து அகற்றுவதை தடுக்கிறது.
#container {width: 870px; விளிம்பு: 0 0 0 20px; / * மேல் வலது கீழ் இடது * / திணிப்பு: 0; }நீங்கள் இப்போது உங்கள் ஆவணத்தைச் சேமித்தால், கொள்கலையை காண முடியாது, ஏனெனில் இதில் எதுவும் இல்லை. நீங்கள் ஒதுக்கிட உரையைச் சேர்த்தால், கொள்கலன் உறுப்பை இன்னும் தெளிவாகக் காண முடியும்.
09 இல் 04
தலைப்புக்கான தலைப்பு தலைப்பு பயன்படுத்தவும்
நீங்கள் தலைப்பை வரிசையில் என்ன முடிவு செய்ய வேண்டும் என்பதை தீர்மானிக்கிறீர்கள். தலைப்பு வரிசையில் ஒரு லோகோ கிராஃபிக் மற்றும் தலைப்பைக் கொண்டிருப்பின், தலைப்பைக் குறிச்சொல் (
) பயன்படுத்தி ஒரு ஐப் பயன்படுத்துவதை விட அதிக அர்த்தமுள்ளதாக இருக்கிறது. நீங்கள் பாணியில் ஒரு பாணியைப் பாணியை அதே பாணியில் பாணியாக்கலாம், மேலும் நீங்கள் புறம்பான குறிச்சொற்களை தவிர்க்கவும்.
தலைப்பு வரிசையின் HTML கொள்கலன் மேலே செல்கிறது மற்றும் இது போல் தெரிகிறது:
என் தலைப்பு வரிசை h1>
பின்னர், பாணிகள் அமைக்க, ஒரு சிவப்பு எல்லை கீழே சேர்க்கப்பட்டுள்ளது, அதனால் நீங்கள் முடிவடைகிறது எங்கே பார்க்க முடியும், விளிம்புகள் மற்றும் திணிப்பு பூஜ்யம், 100% அமைக்க அகலம் மற்றும் 150px உயரம்:
#container h1 {margin: 0; திணிப்பு: 0; அகலம்: 100%; உயரம்: 150px; மிதவை: இடது; எல்லை-கீழே: # c00 திட 3px; } மிதவை இந்த கூறுகளை மிதக்க மறக்க வேண்டாம்: இடது; சொத்து. CSS அமைப்பு எழுதும் முக்கிய எல்லாம் மிதவை உள்ளது - கொள்கலன் அதே அகலம் என்று கூட விஷயங்கள். அந்த வழியில், உறுப்புகள் பக்கத்தில் பொய் எங்கே என்று எப்போதுமே உங்களுக்குத் தெரியும்.
ஒரு CSS வம்சாவளியை தேர்வுக்குழு மட்டுமே #container உறுப்பு உள்ளே இருக்கும் H1 கூறுகளை பாணிகள் பயன்படுத்தப்படும்.
09 இல் 05
மூன்று பத்திகளை பெற, இரண்டு பத்திகளை கட்டியெழுப்ப தொடங்குங்கள்
நீங்கள் CSS உடன் ஒரு மூன்று நெடுவரிசை அமைப்பை உருவாக்கும் போது, உங்கள் அமைப்பை இரண்டு குழுக்களாக பிரிக்க வேண்டும். எனவே இந்த மூன்று-நெடுவரிசை அமைவு, நடு மற்றும் வலது நிரல் மற்றும் இடது பக்க நெடுவரிசையில் இடது பத்தியில் 250px அகலத்தில் இடது பக்க நெடுவரிசைக்கு அடுத்ததாக அமைக்கப்பட்டிருக்கும், மற்றும் வலது நெடுவரிசை 610px அகலம் (இரண்டு பத்திகள் 300 , அவற்றுக்கு இடையில் நீரோட்டத்திற்கான 10 பிக்சல்கள்).
HTML இதுபோல் தெரிகிறது:
இந்த கமிஷன் முடிவுகளைத் தெரிந்து கொள்ளுங்கள். குறைந்தபட்சம் ஒரு நிமிடம், குறைந்த பட்சம், நீங்கள் உங்கள் வணிக வாங்க வேண்டும். எங்கள் பயிற்சிக்கான பயிற்சிக்காக எங்கள் ஓட்டப்பந்தயத்தில் மறுபிரவேசத்தில் மறுபரிசீலனை செய்வோம். Div>
குறைந்தபட்சம் ஒரு மணி நேரத்திற்கும் மேலாக உழைக்க வேண்டும். ஒரு பெரிய வேலை மற்றும் வேலை. P> div>
நெடுவரிசையில் உள்ள ஒதுக்கிட உரையைச் சோதனை செய்யும் போது அவை இன்னும் அதிகம் காணப்படுகின்றன. CSS இதுபோல் தெரிகிறது:
#container # col1 {width: 250px; மிதவை: இடது; } #container # col2outer {width: 610px; மிதவை: சரி; விளிம்பு: 0; திணிப்பு: 0; } இடது பக்கத்தில் உள்ள நெடுவரிசை இடது பக்கம் மிதந்து கொண்டிருக்கும், மற்றொன்று வலதுபுறம் மிதந்து கொண்டிருக்கிறது. இரண்டு நெடுவரிசைகளின் மொத்த அகலம் 860px ஆக இருப்பதால், அவற்றுக்கு இடையே 10px நீரோடை உள்ளது.
09 இல் 06
பரந்த இரண்டாம் வரிசை உள்ளே இரண்டு பத்திகளை சேர்க்கவும்
மூன்று பத்திகளை உருவாக்க, கடைசி படியில் உள்ள கொள்கலன் பத்தியில் 2 பிளாக்ஸ் சேர்த்தது போல், பரந்த இரண்டாவது நெடுவரிசையில் இரண்டு divs ஐ சேர்க்கவும். HTML இதுபோல் தெரிகிறது:
குறைந்தபட்சம், ஒரு பெரிய வேலை மற்றும் வேலை. P>
ஒரு மணி நேரம் கழித்து, உல்லம் நிறுவனமானது தொழிலாளர் நலன்களை ஆதரிக்கிறது. P> div> div> div>
மற்றும் CSS இதுபோல் தெரிகிறது:
# col2outer # col2mid {width: 300px; மிதவை: இடது; } # col2outer # col2side {width: 300px; மிதவை: சரி; } இந்த இரண்டு 300px பரந்த பெட்டிகள் 610px பரந்த பெட்டிக்குள் இருப்பதால், அவற்றுக்கு இடையே மீண்டும் ஒரு 10px கெட்டரே இருக்கும்.
09 இல் 07
அடிக்குறிப்பில் சேர்க்கவும்
இப்போது பக்கத்தின் மற்ற பாணியில், நீங்கள் அடிக்குறிப்பில் சேர்க்கலாம். கடைசியாக ஒரு "footer" id ஐப் பயன்படுத்தி, உள்ளடக்கத்தைச் சேர்க்கலாம், இதன் மூலம் அதை நீங்கள் காணலாம். நீங்கள் மேலே ஒரு எல்லை சேர்க்க முடியும், அது தொடங்குகிறது எங்கே தெரியும்.
HTML:
தலைப்பு வரிசையின் HTML கொள்கலன் மேலே செல்கிறது மற்றும் இது போல் தெரிகிறது:
என் தலைப்பு வரிசை h1>
பின்னர், பாணிகள் அமைக்க, ஒரு சிவப்பு எல்லை கீழே சேர்க்கப்பட்டுள்ளது, அதனால் நீங்கள் முடிவடைகிறது எங்கே பார்க்க முடியும், விளிம்புகள் மற்றும் திணிப்பு பூஜ்யம், 100% அமைக்க அகலம் மற்றும் 150px உயரம்:
#container h1 {margin: 0; திணிப்பு: 0; அகலம்: 100%; உயரம்: 150px; மிதவை: இடது; எல்லை-கீழே: # c00 திட 3px; }மிதவை இந்த கூறுகளை மிதக்க மறக்க வேண்டாம்: இடது; சொத்து. CSS அமைப்பு எழுதும் முக்கிய எல்லாம் மிதவை உள்ளது - கொள்கலன் அதே அகலம் என்று கூட விஷயங்கள். அந்த வழியில், உறுப்புகள் பக்கத்தில் பொய் எங்கே என்று எப்போதுமே உங்களுக்குத் தெரியும்.
ஒரு CSS வம்சாவளியை தேர்வுக்குழு மட்டுமே #container உறுப்பு உள்ளே இருக்கும் H1 கூறுகளை பாணிகள் பயன்படுத்தப்படும்.
09 இல் 05
மூன்று பத்திகளை பெற, இரண்டு பத்திகளை கட்டியெழுப்ப தொடங்குங்கள்
நீங்கள் CSS உடன் ஒரு மூன்று நெடுவரிசை அமைப்பை உருவாக்கும் போது, உங்கள் அமைப்பை இரண்டு குழுக்களாக பிரிக்க வேண்டும். எனவே இந்த மூன்று-நெடுவரிசை அமைவு, நடு மற்றும் வலது நிரல் மற்றும் இடது பக்க நெடுவரிசையில் இடது பத்தியில் 250px அகலத்தில் இடது பக்க நெடுவரிசைக்கு அடுத்ததாக அமைக்கப்பட்டிருக்கும், மற்றும் வலது நெடுவரிசை 610px அகலம் (இரண்டு பத்திகள் 300 , அவற்றுக்கு இடையில் நீரோட்டத்திற்கான 10 பிக்சல்கள்).
HTML இதுபோல் தெரிகிறது:
இந்த கமிஷன் முடிவுகளைத் தெரிந்து கொள்ளுங்கள். குறைந்தபட்சம் ஒரு நிமிடம், குறைந்த பட்சம், நீங்கள் உங்கள் வணிக வாங்க வேண்டும். எங்கள் பயிற்சிக்கான பயிற்சிக்காக எங்கள் ஓட்டப்பந்தயத்தில் மறுபிரவேசத்தில் மறுபரிசீலனை செய்வோம். Div>
குறைந்தபட்சம் ஒரு மணி நேரத்திற்கும் மேலாக உழைக்க வேண்டும். ஒரு பெரிய வேலை மற்றும் வேலை. P> div>
நெடுவரிசையில் உள்ள ஒதுக்கிட உரையைச் சோதனை செய்யும் போது அவை இன்னும் அதிகம் காணப்படுகின்றன. CSS இதுபோல் தெரிகிறது:
#container # col1 {width: 250px; மிதவை: இடது; } #container # col2outer {width: 610px; மிதவை: சரி; விளிம்பு: 0; திணிப்பு: 0; }இடது பக்கத்தில் உள்ள நெடுவரிசை இடது பக்கம் மிதந்து கொண்டிருக்கும், மற்றொன்று வலதுபுறம் மிதந்து கொண்டிருக்கிறது. இரண்டு நெடுவரிசைகளின் மொத்த அகலம் 860px ஆக இருப்பதால், அவற்றுக்கு இடையே 10px நீரோடை உள்ளது.
09 இல் 06
பரந்த இரண்டாம் வரிசை உள்ளே இரண்டு பத்திகளை சேர்க்கவும்
மூன்று பத்திகளை உருவாக்க, கடைசி படியில் உள்ள கொள்கலன் பத்தியில் 2 பிளாக்ஸ் சேர்த்தது போல், பரந்த இரண்டாவது நெடுவரிசையில் இரண்டு divs ஐ சேர்க்கவும். HTML இதுபோல் தெரிகிறது:
குறைந்தபட்சம், ஒரு பெரிய வேலை மற்றும் வேலை. P>
ஒரு மணி நேரம் கழித்து, உல்லம் நிறுவனமானது தொழிலாளர் நலன்களை ஆதரிக்கிறது. P> div> div> div>
மற்றும் CSS இதுபோல் தெரிகிறது:
# col2outer # col2mid {width: 300px; மிதவை: இடது; } # col2outer # col2side {width: 300px; மிதவை: சரி; }இந்த இரண்டு 300px பரந்த பெட்டிகள் 610px பரந்த பெட்டிக்குள் இருப்பதால், அவற்றுக்கு இடையே மீண்டும் ஒரு 10px கெட்டரே இருக்கும்.
09 இல் 07
அடிக்குறிப்பில் சேர்க்கவும்
இப்போது பக்கத்தின் மற்ற பாணியில், நீங்கள் அடிக்குறிப்பில் சேர்க்கலாம். கடைசியாக ஒரு "footer" id ஐப் பயன்படுத்தி, உள்ளடக்கத்தைச் சேர்க்கலாம், இதன் மூலம் அதை நீங்கள் காணலாம். நீங்கள் மேலே ஒரு எல்லை சேர்க்க முடியும், அது தொடங்குகிறது எங்கே தெரியும்.
HTML: