அதில் குறிச்சொல்லிட்டு அதற்கு ஒரு வகுப்பை ஒதுக்கவும் தலைப்பு 'Linuxhint க்கு வரவேற்கிறோம்!' உள்ளடக்கத்தைக் காண்பிக்க:

<தலைப்பு வர்க்கம் = 'தலைப்பு' >

< h1 வர்க்கம் = 'தலைப்பு' > Linuxhint க்கு வரவேற்கிறோம்! < / h1 >

< / தலைப்பு>

அதன் பிறகு, '' என்பதைத் தேர்ந்தெடுக்கவும் <தலைப்பு> ” வகுப்பைக் குறியிட்டு பின்வரும் பாணிகளை ஒதுக்கவும்:

---

---

.தலைப்பு {

பின்னணி படம்: url ( '../bg.jpg' ) ;

பின்னணி - அளவு : கவர்;

பின்னணி-மீண்டும்: இல்லை-மீண்டும்;

நிறம் : வெள்ளை புகை;

பின்னணி-நிலை: மேல்;

திணிப்பு: 0px 20px 20px 20px;

}

மேலே உள்ள குறியீட்டின் விளக்கம் கீழே குறிப்பிடப்பட்டுள்ளது:

• முதலில், படத்தை அமைக்கவும் ' bg.jpg 'தலைப்புப் பகுதியின் பின்னணியாக ' பின்னணி படம் ”சொத்து.
• அடுத்து, ' பின்னணி அளவு 'மற்றும்' பின்னணி-மீண்டும் ” பண்புகள் முறையே படத்தின் அளவை அமைக்கவும் படத்தை மீண்டும் செய்வதை நிறுத்தவும் பயன்படுகிறது.
• அதன் பிறகு, 'என்ற உதவியுடன் உரையின் நிறம் மற்றும் படத்தின் நிலையை மேலே அமைக்கவும். நிறம் 'மற்றும்' பின்னணி-நிலை 'பண்புகள்.
• இறுதியில், ' திணிப்பு 'தலைப்பு உள்ளடக்கத்திற்கும் எல்லைக்கும் இடையில் இடைவெளியை அமைப்பதற்கு சொத்து பயன்படுத்தப்படுகிறது.

மேலே உள்ள குறியீட்டை இயக்கிய பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:

மேலே உள்ள வெளியீடு, தலைப்புப் பிரிவு உருவாக்கப்பட்டதைக் காட்டுகிறது, மேலும் அதற்கு CSS பாணிகள் பயன்படுத்தப்படுகின்றன.

படி 2: வழிசெலுத்தல் பட்டியை உருவாக்கவும்

பெரும்பாலான சந்தர்ப்பங்களில் ஹெடரில் வழிசெலுத்தல் பட்டியும் இருக்கலாம். navbar உருவாக்க HTML ' <இல்லை> ” குறிச்சொல் மிகவும் பயனுள்ளதாக இருக்கும். அதனால்தான், ''ஐப் பயன்படுத்தி navbar உருப்படிகளைச் சேர்க்கவும் 'குறிச்சொற்கள் மற்றும் ஒரு வகுப்பை ஒதுக்கவும்' நாடகம் ”:

மேலே உள்ள குறியீட்டை இயக்கிய பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:

மேலே உள்ள வெளியீடு, navbar உருப்படிகளை விளக்குகிறது ' வீடு ”,” சேவைகள் ”,” எங்களை பற்றி ”,” எங்களை தொடர்பு கொள்ள 'மற்றும்' புதிய வருகை ” உருவாக்கப்பட்டுள்ளன.

படி 3: Navbar உருப்படிகளுக்கு ஸ்டைல்களைப் பயன்படுத்துங்கள்

navbar உருப்படிகளை வடிவமைக்க, '' என்பதைத் தேர்ந்தெடுக்கவும் நாடகம் 'வகுப்பு மற்றும் பின்வரும் CSS பாணிகளின் பண்புகளை ஒதுக்கவும்:

மேலே உள்ள குறியீட்டின் விளக்கம்:

• முதலில், ' உரை-அலங்காரம் 'இன் முன்வரையறுக்கப்பட்ட ஸ்டைலை அகற்ற, 'எதுவுமில்லை' என சொத்து அமைக்கப்பட்டது ” குறிச்சொல்.
• பயனருக்கு உரைத் தெரிவுநிலையை மேம்படுத்த, ' வெள்ளை 'மற்றும்' பெரிய 'மதிப்புகள் வழங்கப்படுகின்றன' நிறம் ' மற்றும் இந்த ' எழுத்துரு அளவு ”சொத்து.
• அதன் பிறகு, ' காட்சி 'மற்றும்' மிதவை 'பண்புகள் உதவும்' ” குறிச்சொற்கள் ஒரே வரியில் தோன்றும்.
• இறுதியில், ' திணிப்பு 'மற்றும்' விளிம்பு ஒவ்வொரு ' ' குறிச்சொல்லுக்கும் இடையில் இடத்தை உருவாக்க பண்புகள் மதிப்புகள் பயன்படுத்தப்படுகின்றன.