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