HR குறிச்சொற்களை கொண்டு இணைய பக்கங்களில் சுவாரஸ்யமான தேடும் கோடுகள் உருவாக்குதல்
உங்கள் வலைத்தளங்களில் கிடைமட்ட, பிரிப்பான்-பாணியை இணைக்க வேண்டும் என்றால், உங்களுக்கு சில விருப்பங்கள் உள்ளன. நீங்கள் அந்த பக்கத்தின் உண்மையான பட கோப்புகளை உங்கள் பக்கத்திற்கு சேர்க்க முடியும், ஆனால் உங்கள் உலாவி மீட்டெடுக்கவும், அந்த கோப்புகளை ஏற்றவும் வேண்டும், இது தளம் செயல்திறனில் எதிர்மறையான தாக்கத்தை ஏற்படுத்தும்.
நீங்கள் எல்லைகளை சேர்க்க CSS உறுப்பு சொத்து பயன்படுத்த முடியும் என்று மேல் அல்லது கீழே ஒரு உறுப்பு கீழே செயல்படும், திறம்பட உங்கள் பிரிப்பான் வரி உருவாக்கும்.
இறுதியில், நீங்கள் கிடைமட்ட விதிக்கு HTML உறுப்பு பயன்படுத்த முடியும் -
கிடைமட்ட விதி உறுப்பு
நீங்கள் வலைப்பக்கத்தில் ஒரு உறுப்பை வைத்திருந்தால், இந்த கோடுகள் காட்டப்படும் முன்னிருப்பு வழி சிறந்தது அல்ல என்று நீங்கள் அறிந்திருக்கலாம். அதாவது, இந்த தளங்களின் காட்சி தோற்றத்தை உங்கள் தளத்தில் எப்படி பார்க்க வேண்டும் என விரும்புகிறீர்களோ, அதை மாற்றுவதற்கு நீங்கள் CSS க்கு திரும்ப வேண்டும்.
ஒரு அடிப்படை HR குறி உலாவி அதை காட்ட விரும்புகிறது வழி காட்டப்படும். நவீன உலாவிகள் பொதுவாக unstyled HR குறிச்சொற்களை 100% அகலம், 2px உயரம் மற்றும் கோடு உருவாக்க கருப்பு உள்ள 3D எல்லை ஆகியவற்றைக் கொண்டுள்ளன.
இங்கே ஒரு நிலையான HR உறுப்பு ஒரு உதாரணம் அல்லது நீங்கள் ஒரு உலாவி நவீன உலாவிகளில் எப்படி பார்க்க இந்த படத்தை பார்க்க முடியும்.
அகலம் மற்றும் உயரம் ஆகியவை உலாவிகளின் ஒத்திசைவாக உள்ளன
வலை உலாவிகளில் முழுவதும் இருக்கும் ஒரே பாணிகள் அகலம் மற்றும் பாணியாகும். இந்த வரி எவ்வளவு பெரியது என்பதை வரையறுக்க. நீ அகலத்தையும் உயரத்தையும் வரையறுக்கவில்லையெனில் இயல்புநிலை அகலம் 100% மற்றும் இயல்புநிலை உயரம் 2px ஆகும்.
இந்த எடுத்துக்காட்டுக்கு அகலம் 50% பெற்றோர் மூலக்கூறு (கீழே உள்ள இந்த எடுத்துக்காட்டுகள் அனைத்தும் இன்லைன் பாணிகளை உள்ளடக்குகின்றன. ஒரு தயாரிப்பு அமைப்பில், இந்த பாணியை உண்மையில் வெளிப்புற பாணியில் உங்கள் அனைத்து பக்கங்களிலும் மேலாண்மை செய்வதற்காக எழுதப்பட்டிருக்கும்):
பாணி = "அகலம்: 50%;">
இந்த எடுத்துக்காட்டில் உயரம் 2 மணி:
பாணி = "உயரம்: 2em;">
எல்லைகளை மாற்றுதல் சவாலாக இருக்கலாம்
நவீன உலாவிகளில், உலாவி எல்லையை சரி செய்வதன் மூலம் வரி உருவாக்குகிறது. நீங்கள் பாணி சொத்துடன் எல்லை அகற்றினால், பக்கத்தின் பக்கத்தில் மறைந்துவிடும். நீங்கள் பார்க்க முடியும் என (நன்கு, நீங்கள் பார்க்க முடியாது, கோடுகள் கண்ணுக்கு தெரியாத இருக்கும்) இந்த உதாரணம்:
style = "border: none;">
எல்லை அளவு, வண்ணம் மற்றும் பாணி ஆகியவற்றை சரிசெய்தல் கோடு வெவ்வேறு வகையாக இருப்பதோடு அனைத்து நவீன உலாவிகளில் அதே விளைவைக் கொண்டிருக்கும். உதாரணமாக, இந்த ஆர்ப்பாட்டத்தில் எல்லை, சிவப்பு, நசுக்கியது மற்றும் 1px அகலம்:
பாணி = "எல்லை: 1px dashed # 000;">
நீங்கள் எல்லை மற்றும் உயரம் மாற்றினால், பாணிகள் நவீன உலாவிகளில் செய்வதைக் காட்டிலும் மிகவும் காலதாமதமான உலாவிகளில் சற்று வித்தியாசமாக இருக்கும். நீங்கள் இந்த எடுத்துக்காட்டில் பார்க்க முடியும் எனில், நீங்கள் IE7 மற்றும் கீழே பார்க்கும் (woefully காலாவதியான மற்றும் இனி மைக்ரோசாப்ட் ஆதரவு இது ஒரு உலாவி) மற்ற உலாவிகளில் (IE8 மற்றும் உட்பட) காட்டாது என்று ஒரு beveled உள் வரி உள்ளது :
பாணி = "உயரம்: 1.5 ஏ; அகலம்: 25 ஏ; எல்லை: 1px திட # 000;">
அந்த பழங்கால உலாவிகளில் உண்மையில் இன்றைய வலை வடிவமைப்பு மிகவும் கவலை இல்லை, அவர்கள் பெரும்பாலும் நவீன விருப்பங்கள் பதிலாக.
ஒரு பின்னணி படத்தை ஒரு அலங்கார வரி செய்ய
ஒரு வண்ணத்திற்குப் பதிலாக, உங்கள் HR க்கு ஒரு பின்னணி படத்தை நீங்கள் வரையறுக்கலாம், இதன்மூலம் அதை நீங்கள் விரும்பும் விதத்தில் சரியாகப் பார்க்கிறீர்கள், ஆனால் இன்னும் உங்கள் மார்க்சில் சொற்பொருளியல் காட்டுகிறது.
இந்த எடுத்துக்காட்டில் நாங்கள் மூன்று அலைவரிசை வரிகளை கொண்ட ஒரு படத்தை பயன்படுத்தினோம். பின்னணி படத்தை மீண்டும் அமைக்காததன் மூலம், புத்தகங்களில் நீங்கள் பார்ப்பதுபோல் தோற்றமளிக்கும் உள்ளடக்கத்தில் அது முறிவை உருவாக்குகிறது:
பாணி = "உயரம்: 20px; பின்னணி: # ff url (aa010307.gif) இல்லை மீண்டும் மீண்டும் சுருள் மையம்; எல்லை: எதுவும்;">
மனித உறுப்புகளை மாற்றுகிறது
CSS3 மூலம், உங்கள் வரிகளை மேலும் சுவாரஸ்யமாக்கலாம். HR உறுப்பு பாரம்பரியமாக ஒரு கிடைமட்ட வரி, ஆனால் CSS மாற்றும் சொத்து, நீங்கள் அவர்கள் எப்படி மாற்ற முடியும். HR உறுப்பு மீது விருப்பமான மாற்றம், சுழற்சியை மாற்றுவதாகும்.
உங்கள் HR உறுப்பை சுழற்றலாம், அதனால் இது சற்று குறுக்குவெட்டு ஆகும்:
hr {
-மோஸ்-உருமாற்ற: சுழற்று (10deg);
-வெப்கிட்-உருமாற்ற: சுழற்று (10deg);
-ஓ-மாற்றும்: சுழற்று (10deg);
-ms-transform: சுழற்று (10deg);
மாற்றும்: சுழற்று (10deg);
}
அல்லது அதை சுழற்றலாம், அது முற்றிலும் செங்குத்தாக இருக்கும்:
hr {
-மோஸ்-உருமாற்ற: சுழற்று (90deg);
-வெப்கிட்-உருமாற்ற: சுழற்று (90deg);
-ஓ-மாற்றும்: சுழற்று (90deg);
-ms-transform: சுழற்று (90deg);
மாற்றும்: சுழற்று (90deg);
}
ஆவணத்தில் உள்ள தற்போதைய இருப்பிடத்தை அடிப்படையாகக் கொண்ட இந்த HR ஐ சுழற்றுவதை நினைவில் கொள்ளுங்கள், எனவே நீங்கள் விரும்பும் இடத்தைப் பெறுவதற்கு அதை சரிசெய்ய வேண்டும். ஒரு வடிவமைப்புக்கு செங்குத்து கோடுகள் சேர்க்க இதை பயன்படுத்த பரிந்துரைக்கப்படவில்லை, ஆனால் இது ஒரு சுவாரஸ்யமான விளைவை பெற ஒரு வழி.
உங்கள் பக்கங்களில் கோடுகள் பெற மற்றொரு வழி
HR உறுப்பைப் பயன்படுத்துவதற்குப் பதிலாக சிலர் மற்ற உறுப்புகளின் எல்லைகளை சார்ந்து இருக்க வேண்டும். ஆனால் சில நேரங்களில் HR ஒரு எல்லைகள் அமைக்க முயற்சி செய்வதை விட மிகவும் வசதியாகவும் எளிதாகவும் பயன்படுத்தப்படுகிறது. சில உலாவிகளின் பாக்ஸ் மாதிரி சிக்கல்கள் எல்லைக் கோட்டை அமைப்பதைத் தடுக்கின்றன.