5 எளிய மற்றும் நடைமுறை CSS பட்டியல் பாணிகளை நீங்கள் நகலெடுத்து ஒட்டலாம்
உள்ளடக்க அட்டவணை
5 எளிய மற்றும் நடைமுறை CSS பட்டியல் நடைகள் நீங்கள் நகலெடுத்து ஒட்டலாம்
நல்ல பட்டியலை விரும்பாதவர்கள் யார்? பல்வேறு சூழ்நிலைகளுக்கு எங்கள் மார்க்அப்பில் தொடர்ந்து அவற்றைப் பயன்படுத்துகிறோம். நீங்கள் திருடி உங்கள் சொந்த வேலையில் பயன்படுத்தக்கூடிய சில எளிய மற்றும் நடைமுறை உதாரணங்களை இன்று பார்க்கப் போகிறோம்.
வேடிக்கையான அனிமேஷன் செங்குத்து பட்டியலுடன் தொடங்கி, சிறுபடங்களுடன் பட்டியலை வடிவமைக்கவும். மற்றும் உரை, மற்றொன்று வெறும் படங்கள் மற்றும் இறுதியில் எண்கள் மற்ற வகைகளை விட வித்தியாசமாக வடிவமைக்கப்பட்ட வரிசைப்படுத்தப்பட்ட பட்டியல். இங்கே கற்றுக்கொள்வதற்கு பல சிறந்த விஷயங்கள் உள்ளன, எனவே நாம் உள்ளே செல்லலாம்!
Envato கூறுகளை ஆராயுங்கள்
HelvetiList
எங்கள் முதல் பட்டியலுக்கு, நாங்கள் எளிமையான ஒன்றைத் தொடங்கப் போகிறோம். , குறைந்த ஆனால் மிகவும் கவர்ச்சிகரமான வடிவமைப்பு, அச்சுக்கலையின் அழகை பெரிதும் சார்ந்துள்ளது. நாங்கள் சில மெல்லிய ஹெல்வெடிகா பாணிகளைப் பயன்படுத்துவோம் மற்றும் மிதவையில் மென்மையான அனிமேஷனில் டாஸ் செய்வோம்.
டெமோ: CodePen இல் டெமோ மற்றும் குறியீட்டைப் பார்க்கவும்.
HTML
எங்கள் மார்க்அப் மிகவும் எளிமையானது. ஒரு div ஐ உருவாக்கவும் (நேரடி திட்டத்தில் நீங்கள் ஒரு வகுப்பு அல்லது ஐடியை விரும்பலாம்), பின்னர் ஒரு தலைப்பு மற்றும் ஐந்து பட்டியல் உருப்படிகளுடன் வரிசைப்படுத்தப்படாத பட்டியலை டாஸ் செய்யவும்.
| 1 2 3 4 5 6 7 8 9 10 | ஹெல்வெட்டிலிஸ்ட்
|
நாம் பார்த்தபடி மேலே உள்ள ஸ்கிரீன்ஷாட், பட்டியல் உருப்படிகள் மிக மெல்லிய வகை, நுட்பமான பிரிப்பான்கள் மற்றும் மிதவையைப் பயன்படுத்துகின்றனஎழுத்துருவை பெரிதாக்கும் நிலை. தொடங்குவதற்கு, divக்கு அகலத்தைக் கொடுத்து, உங்கள் பொதுவான h2 பாணிகளை அமைக்கவும்.
அடுத்து, தோட்டாக்களைத் துடைக்க மற்றும் இருக்கக்கூடிய விளிம்புகள் அல்லது திணிப்புகளை மீட்டமைக்க, பட்டியல்-பாணி வகை ஒன்றைப் பயன்படுத்தவும். உண்மையான பட்டியல் உருப்படிகளுக்கு, நான் ஒரு சிறிய கீழ் எல்லையைப் பயன்படுத்தினேன், இது அந்த சிறிய வகுப்பியை வழங்குகிறது. நான் கடைசி குழந்தை தேர்வாளரைப் பயன்படுத்தினேன், ஆனால் அதை அடையாளம் காணாத உலாவி இருந்தால் அது பெரிய விஷயமல்ல, மேலும் கீழே ஒரு கூடுதல் பார்டரை வீச முடிவு செய்கிறது.
நான் எழுத்துருவை அமைக்கும் இரண்டு முறையும், CSS சுருக்கெழுத்தைப் பயன்படுத்தினேன் மற்றும் வெவ்வேறு எடைகளைப் பயன்படுத்தினேன். முடிக்க, நான் சில இணைப்பு பாணிகளைப் பயன்படுத்தினேன் மற்றும் எழுத்துருவை பெரிதாக்கவும் மற்றும் மிதவையில் பின்னணி நிறத்தை மாற்றவும் மாற்றத்தை அமைத்தேன்.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 342 33 33 31 39 40 41 42 | div { width : 200px ; } h2 { எழுத்துரு : 400 40px / 1.5 Helvetica , Verdana , sans - serif ; விளிம்பு : 0 ; திணிப்பு : 0 ; } உல் { பட்டியல் - பாணி - வகை : எதுவுமில்லை ; விளிம்பு : 0 ; திணிப்பு : 0 ; } லி { எழுத்துரு : 200 20px / 1.5 ஹெல்வெடிகா , வெர்டானா , சான்ஸ் - செரிஃப் ; எல்லை - கீழே : 1px திட #ccc; } லி : கடைசி - குழந்தை {எல்லை : இல்லை ; } லி எ {உரை - அலங்காரம் : எதுவுமில்லை ; நிறம்: #000; காட்சி : தொகுதி ; அகலம்: 200px; - webkit - transition : எழுத்துரு அளவு 0.3s எளிதாக , பின்னணி - நிறம் 0.3s எளிதாக ; - moz - மாற்றம்: எழுத்துரு அளவு 0.3s எளிதாக , பின்னணி - நிறம் 0.3sஎளிமை ; - o - மாற்றம் : எழுத்துரு அளவு 0.3s எளிதாக , பின்னணி நிறம் 0.3s எளிதாக ; - ms - மாற்றம்: எழுத்துரு அளவு 0.3s எளிதாக, பின்னணி நிறம் 0.3s எளிதாக; transition: எழுத்துரு அளவு 0.3s எளிதாக, பின்னணி நிறம் 0.3s எளிதாக; } li a: மிதவை {எழுத்துரு அளவு: 30px ; பின்னணி : #f6f6f6; } |
சிறுபடப் பட்டியல்
பட்டியல்களுக்கு நீங்கள் காணக்கூடிய பொதுவான வடிவங்களில் ஒன்று உங்கள் அடிப்படை “சிறுபடம் மற்றும் உரை” அமைப்பாகும், இது சிலவற்றைச் சேர்ப்பதற்கான சிறந்த வழியாகும். மற்றபடி சலிப்பான பத்திகளின் பட்டியலுக்கு நல்ல காட்சி ஆர்வம்.
இது மிகவும் பல்துறைப் பட்டியல் பாணியாகும், இதை நீங்கள் எத்தனை திட்டங்களிலும் பயன்படுத்தலாம். இது எப்படி வேலை செய்கிறது என்று பார்ப்போம்.
டெமோ: CodePen இல் டெமோ மற்றும் குறியீட்டைப் பார்க்கவும்.
HTML
இதில் உள்ள HTML இன்னும் கொஞ்சம் சிக்கலானது. ஒவ்வொரு பட்டியல் உருப்படிக்கும் மூன்று குழந்தைகள் இருக்க வேண்டும்: ஒரு படம், ஒரு தலைப்பு மற்றும் ஒரு பத்தி. நான் பயன்படுத்தும் படங்கள் 100px x 100px, எனவே இதை வேறு அளவில் தனிப்பயனாக்க விரும்பினால் அதை மனதில் கொள்ளுங்கள். ஒட்டுமொத்தமாக, இவை அனைத்தும் இன்னும் எளிமையான மார்க்அப் ஆகும், இது உங்களை சிறிதும் தூண்டிவிடக்கூடாது.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
CSS
இது வியக்கத்தக்க வகையில் அதிக குறியீட்டை எடுக்கவில்லை. மீண்டும், நாங்கள் எங்கள் பட்டியல் பாணிகளை அழித்து, சில அச்சுக்கலை தொடர்பான CSS ஐ அமைக்கிறோம். நீங்கள் புரிந்து கொள்ள வேண்டிய விஷயம் என்னவென்றால், உங்கள் படங்களை இடதுபுறமாக மிதக்க வேண்டும், இதனால் பத்திகள் அவற்றிற்கு அடுத்ததாக தோன்றும்.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | * {விளிம்பு : 0 ; திணிப்பு : 0 ; } div { ஓரம் : 20px ; } உல் { பட்டியல் - பாணி - வகை : எதுவுமில்லை ; அகலம்: 500px; } h3 {எழுத்துரு: தடித்த 20px / 1.5 ஹெல்வெடிகா, வெர்டானா, சான்ஸ்-செரிஃப்; } li img { மிதவை : இடது ; விளிம்பு: 0 15px 0 0 ; } லி ப { எழுத்துரு : 200 12px / 1.5 ஜார்ஜியா , டைம்ஸ் நியூ ரோமன் , செரிஃப் ; } லி { திணிப்பு : 10px ; வழிதல் : ஆட்டோ ; } லி : மிதவை {பின்னணி : #ஈஈ; கர்சர் : சுட்டி ; } |
நிலையான சிறுபடம் கட்டம்
வரிசைப்படுத்தப்படாத பட்டியல்களைப் பற்றிப் பேசினால், குறைந்தபட்சம் ஒரு படக் கட்டத்தையாவது உள்ளிட வேண்டும், அவை எப்போதும் பட்டியல்களுடன் கையாளப்படும். நாங்கள் ஆடம்பரமாக எதையும் செய்ய மாட்டோம், விரைவாகச் செருகுவதற்கு இந்தக் குறியீட்டின் படிவத்தை கையில் வைத்திருப்பது உங்களுக்கு உதவியாக இருக்கும்.
டெமோ: டெமோ மற்றும் குறியீட்டைப் பார்க்கவும் CodePen இல்.
HTML
க்கான மார்க்அப் list-item>anchor>image என்ற அடிப்படை அமைப்பைக் கொண்டுள்ளது. இந்தக் குறியீட்டைப் பார்க்க உங்களுக்குப் பழக்கமில்லையென்றால், இதற்கான பட்டியலைப் பயன்படுத்துவது மிகவும் விசித்திரமாகத் தோன்றலாம், ஆனால் உண்மையில் அதைத்தான் நீங்கள் உருவாக்குகிறீர்கள்: aபடங்களின் பெரிய பட்டியல். அவை ஒரு கட்டமாக அமைக்கப்பட்டிருப்பது யோசனையை மறுக்கவில்லை, அது இதயத்தில் ஒரு பெரிய 'ஓல் பட்டியல்'.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
CSS2>இந்த எடுத்துக்காட்டிற்கு, உங்கள் பட்டியல் உருப்படிகள் ஒவ்வொன்றிலும் சில ஓரங்களைத் தூக்கி எறிந்துவிட்டு, அவற்றை இடதுபுறமாக மிதக்க வைப்பதே அடிப்படைக் கட்டமைப்பாகும். மிதவையை அழிக்கவும், இருண்ட பின்னணியை அமைக்கவும், படங்களின் மீது ஒரு பார்டரைத் தூக்கி எறியவும் "ஓவர்ஃப்ளோ: ஆட்டோ" தந்திரத்தைப் பயன்படுத்தினேன்.டெமோவைச் சற்று சுவாரஸ்யமாக்க, மெதுவாகப் பளபளக்கும் ஒரு மிதவை விளைவைச் சேர்த்துள்ளேன். இது நிச்சயமாக முற்றிலும் விருப்பமானது மற்றும் ஒவ்வொரு திட்டத்திலும் நீங்கள் விண்ணப்பிக்கும் ஒன்றல்ல.
|
கிடைமட்ட மெனு
டெவலப்பர்கள் பட்டியல்களைப் பயன்படுத்தும் மற்றொரு விஷயம் கிடைமட்ட வழிசெலுத்தல் மெனுக்கள். ஒரு புதிய டெவலப்பராக, இந்த தந்திரத்திற்கான குறியீடு நான் தொடர்ந்து கூகுள் செய்து பார்த்தேன், எனவே அதை புக்மார்க் செய்யவும் அல்லது உங்கள் துணுக்குகள் சேமிப்பில் டாஸ் செய்யவும்.
டெமோ: CodePen இல் டெமோ மற்றும் குறியீட்டைப் பார்க்கவும்.
மேலும் பார்க்கவும்: 2023 இல் 42+ சிறந்த ஃபைனல் கட் புரோ ஸ்லைடுஷோ வீடியோ டெம்ப்ளேட்டுகள்
HTML
மேலே உள்ள சிறுபடம் கட்டம் மூலம், எப்படி செய்வது என்பதை ஏற்கனவே கற்றுக்கொண்டோம் மிதவை பட்டியல் உருப்படிகள், அவை ஒன்றோடொன்று தோன்றும், எனவே இங்கே நாம் அதே நுட்பத்தைப் பயன்படுத்துவோம், குறைவான உருப்படிகளுடன் மட்டுமே. "செயலில் உள்ள" வகுப்பில் நான் டாஸ் செய்துள்ளேன் என்பதைக் கவனியுங்கள், இது மிகவும் நிலையான நடைமுறையாகும், பயனர் தற்போது எந்தப் பக்கத்தில் இருக்கிறார்கள் என்பதைச் சொல்ல நாங்கள் பயன்படுத்துவோம்.
| 1 2 3 4 5 6 7 8 |
| 20>
CSS
இங்கே நாங்கள் எங்கள் பட்டியல் உருப்படிகளை இடதுபுறமாக மிதக்கிறோம், வலது பக்கம் மட்டும் ஒரு பார்டரை வைத்து, இயல்புநிலை இணைப்பு பாணிகளை அகற்றி, சொந்தமாக அமைத்து, பின்னர் இரண்டையும் ஹோவர் செய்தோம். மற்றும் செயலில் உள்ள மாநிலங்கள்.
மேலும் பார்க்கவும்: 60+ சிறந்த போர்ட்ரெய்ட் ஃபோட்டோஷாப் செயல்கள் & விளைவுகள்| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 342 33 33 31 39 40 41 42 43 44 45 46 47 | * {margin : 0 ; திணிப்பு : 0 ; } நாவ் {விளிம்பு : 50px ; } உல் { வழிதல் : ஆட்டோ ; பட்டியல் - பாணி - வகை : எதுவுமில்லை ; } லி { உயரம் : 25px ; மிதவை : இடது ; விளிம்பு - வலது: 0px; எல்லை -வலது : 1px திட #aaa; திணிப்பு: 0 20px; } லி : கடைசி - குழந்தை { எல்லை - வலது : இல்லை ; } லி எ {உரை - அலங்காரம் : எதுவுமில்லை ; நிறம்: #சிசிசி; எழுத்துரு: 25px / 1 ஹெல்வெடிகா, வெர்டானா, சான்ஸ்-செரிஃப்; உரை - உருமாற்றம் : பெரிய எழுத்து ; - வெப்கிட் - மாற்றம்: அனைத்து 0.5s எளிதாக ; - moz - மாற்றம்: அனைத்து 0.5s எளிதாக ; - o - மாற்றம்: அனைத்து 0.5s எளிதாக ; - ms - மாற்றம்: அனைத்து 0.5s எளிதாக ; மாற்றம்: அனைத்து 0.5s எளிதாக; } li a : மிதவை {color : #666; } லி . செயலில் ஒரு { எழுத்துரு - எடை : தடித்த ; நிறம் : #333; } |
பெரிய எண்கள் வரிசைப்படுத்தப்பட்ட பட்டியல்
எல்லா பட்டியல்களும் வரிசைப்படுத்தப்படாத பட்டியல்கள் அல்ல என்பதை மறந்துவிடாதீர்கள்! ஆர்டர் செய்யப்பட்ட பட்டியல்களுக்கு நிச்சயமாக நிறைய பயனுள்ள பயன்பாடுகள் உள்ளன. ஆர்டர் செய்யப்பட்ட பட்டியல்களில் மிகவும் தந்திரமான ஒன்று மற்ற உரையை விட வித்தியாசமாக எண்களை வடிவமைக்கிறது. இது எப்படி வேலை செய்கிறது என்று பார்ப்போம்.
டெமோ: CodePen இல் டெமோ மற்றும் குறியீட்டைப் பாருங்கள்.
HTML
இப்போது, நான் எப்படி உருவாக்கினேன் இது மிகவும் சர்ச்சைக்குரியதாக இருக்கும். நீங்கள் பார்க்கிறபடி, உங்களுக்காக HTML தானாகவே இதைச் செய்யும் என்ற உண்மை இருந்தபோதிலும், நான் உண்மையில் கைமுறையாக எண்களை வைக்கிறேன். இதற்கு ஒரு நல்ல காரணம் இருக்கிறது.
இந்த யோசனையைத் தொடங்க, பட்டியல் உருப்படிகளில் ஒரு பத்தியை எறிந்தேன், பின்னர் li வகையையும் li>p வகையையும் வெவ்வேறு வழிகளில் குறியிட்டேன். இருப்பினும், இந்த முறையுடன் எல்லாவற்றையும் சரியாக வரிசைப்படுத்த முயற்சிப்பது ஒரு முழு கனவாக இருந்தது. இறுதியில், அதை சரிசெய்ய CSS மிகவும் குழப்பமாகவும் மோசமாகவும் இருந்தது, நான் அதை முற்றிலும் கைவிட்டேன்இந்த எளிய முறைக்கு ஆதரவாக, இது உண்மையில் தெளிவான, எளிமையான CSS ஐ அனுமதிக்கிறது.
| 1 2 3 4 5 6 7 |
Lorem ipsum dolor sit amet , consectetur adipiscing elit . பிரசென்ட் யூயிஸ்மோட் அல்ட்ரைசஸ் ஆன்டே, ஏசி லாரீட் நுல்லா வெஸ்டிபுலம் அடிபிசிங். Nam quis justo in ague auctor imperdiet . க்யூராபிடுர் அலிக்வெட் ஆர்சி சிட் அமேட் எஸ்ட் எஸ்ட் யூஸ் கான்செக்டேர் . ஃபியூஸ் நெக் லியோ உட் மாஸா விவெர்ரா வெனெனாடிஸ். நாம் அக்கும்சன் லிபரோ எலிட் அலிக்வெட் குயிஸ் உள்ளம்கார்பர் ஆர்கு டிஞ்சிடுண்ட். பிரசென்ட் புருஸ் டர்பிஸ், கன்செக்டெடுர் குயிஸ் காங்கு வேல், புல்வினர் அட் லோரெம். Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. |
CSS
கீழே உள்ள குறியீட்டில் நீங்கள் பார்ப்பது போல், நான் இங்கே செய்தது இயல்பு எண்களைத் தள்ளிவிட்டு பின்னர் எனது முழுமையாக பரவுகிறது, அதனால் நான் அவற்றை பத்திகளின் இடதுபுறமாக தள்ள முடியும், இதையொட்டி சில கூடுதல் திணிப்பு தேவைப்பட்டதுபத்திகள். குறியீடு வாரியாக இது மிகவும் அழகான தீர்வாக இருக்காது, ஆனால் இது வினோதமான நிலைப்படுத்தல் பிழைகள் இல்லாமல் அதைச் செய்ய நான் கொண்டு வரக்கூடிய சுருக்கமான மற்றும் மிகவும் நேரடியான வழியாகும்.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | div {அகலம் : 500px; விளிம்பு : 10px } ol {colour : #ccc; பட்டியல் - பாணி - வகை : எதுவுமில்லை ; } ஒல் லி { நிலை : உறவினர் ; எழுத்துரு: தடித்த சாய்வு 45px / 1.5 Helvetica, Verdana, sans-serif; விளிம்பு - கீழே: 20px; } லி ப {எழுத்துரு : 12px / 1.5 ஹெல்வெடிகா , சான்ஸ் - செரிஃப் ; திணிப்பு - இடது: 60px; நிறம் : #555; } இடைவெளி {நிலை: முழுமையான; } |
முடிவு
உங்கள் சொந்தக் குறியீட்டில் நகலெடுத்து ஒட்டுவதற்கு ஐந்து மிக எளிமையான ஆனால் செயலற்ற நடைமுறைப் பட்டியல் பாணிகள் உள்ளன. நீங்கள் பகிர விரும்பும் வேறு ஏதேனும் படைப்புப் பட்டியல் யோசனைகள் இருந்தால், கீழே உள்ள கருத்துகளில் எங்களுக்குத் தெரியப்படுத்துங்கள்!
