CSS හි සරල තනි තීරු වෙබ් අඩවි පිරිසැලසුම්

මෙම පාඩමේ දී අපි සරල තනි තීරු වෙබ් අඩවි පිරිසැලසුම් නිර්මාණය කිරීමට පරිබාහිර වනු ඇත. අපි උදාහරණයක් වශයෙන්, මේ වගේ පිරිසැලසුමක් සාදමු:

අපි ක්‍රියාත්මක වෙමු. සෑම පිරිසැලසුමක්ම සාමාන්‍යයෙන් ආරම්භ වන්නේ wrapper යනුවෙන් නම් කරන ලද පොදු div එකකින්, එය සමස්ත අඩවියම අඩංගු කරයි:

<div id="wrapper">
	
</div>

අපගේ නඩුවේදී, wrapper එක තිරයේ මධ්‍යයට සමපාත වනු ඇත:

#wrapper {
	width: 800px;
	margin: 50px auto;
}

එයට මායිමක් ද ඇත:

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}

දැන් අපි පිටුවේ ප්‍රධාන ව්‍යුහය සාදමු. එය මෙනුවකින් සහ ප්‍රධාන අන්තර්ගතයෙන් - අන්තර්ගතයෙන් සමන්විත වේ:

<div id="wrapper">
	<div id="menu">
		
	</div>
	<div id="content">
		
	</div>
</div>

අපගේ බ්ලොක් වලට අන්තර්ගතය එක් කරමු:

<div id="wrapper">
	<div id="menu">
		<a href="#">link text 1</a>
		<a href="#" class="active">link text 2</a>
		<a href="#">link text 3</a>
		<a href="#">link text 4</a>
		<a href="#">link text 5</a>
	</div>
	<div id="content">
		<h1>Proin tristique lorem</h1>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

දැන් අපගේ බ්ලොක් වලට විලාසිතා එක් කළ හැකිය. අපි මෙනුවට විලාසිතාවක් එක් කරමු:

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}

දැන් අපි අන්තර්ගත මූලද්‍රව්‍යවලට විලාසිතා එක් කරමු:

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}

දැන් අපට සම්පූර්ණ කේතය එකට එකතු කළ හැකිය:

<div id="wrapper">
	<div id="menu">
		<a href="#">link text 1</a>
		<a href="#" class="active">link text 2</a>
		<a href="#">link text 3</a>
		<a href="#">link text 4</a>
		<a href="#">link text 5</a>
	</div>
	<div id="content">
		<h1>Proin tristique lorem</h1>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}

උපදෙස් 1

ඉහළ සිට පහළට පරතරයන් ලබා දීම වඩාත් පහසුය. උදාහරණයක් ලෙස, අපට මෙනුවක් සහ අන්තර්ගතයක් ඇත, ඒවා අතර - හිස් ඉඩක්. පැහැදිලිවම, මෙම ඉඩ මෙනුවේ පහළ පරතරයක් ලෙස සාදා ඇත, අන්තර්ගතයේ ඉහළ පරතරය, හෝ ඒවායේ එකවර බලපෑම. මෙම අවස්ථාවේ දී මෙනුවට පහළ පරතරයක් සැකසීම වඩා හොඳය, සහ අන්තර්ගතයට ඉහළ padding සහ h1 සඳහා සාමාන්‍ය margin ඉවත් කරන්න .

උපදෙස් 2

දායකයින් අතර පරතරයක් සෑදිය නොහැක මාපියන්. උදාහරණයක් ලෙස, අපට මෙනුවක් තිබේ. මෙම මෙනුවේ පහළ පරතරය සෑදිය හැකිය එක්කෝ margin මෙනුව සමඟ div, හෝ margin සබැඳි. පළමු විකල්පය තෝරා ගැනීම වඩා හොඳය, එසේ නම් සබැඳි වලට මාපියයාගේ හිස තරණය කිරීමට අවශ්‍ය නොවේ .

උපදෙස් 3

යුගල අතර පරතරයක් ඇත සහ මෙම අවස්ථාවේ දී දෘශ්‍ය වෙනසක් නොමැත, පරතරය සඳහා කුමක් තෝරා ගත යුතුද - margin හෝ padding. මෙම අවස්ථාවේ දී, margin තෝරන්න, එසේ නම් යුගල අතර පරතරයන් නිර්මාණය කළ යුත්තේ එයයි අංග.

CSS හි සරල තනි තීරු වෙබ් අඩවි පිරිසැලසුම්

උපදෙස් 1

උපදෙස් 2

උපදෙස් 3

ප්‍රායෝගික කාර්යයන්