Պարզ միասյուն կայքի դասավորություններ CSS-ում

Այս դասում մենք կպարապենք պարզ միասյուն կայքի դասավորություններ ստեղծելը: Եկեք, օրինակ, ստեղծենք այսպիսի դասավորություն:

Սկսենք իրականացնել: Յուրաքանչյուր դասավորություն, որպես կանոն, սկսվում է ընդհանուր դիվից՝ wrapper անունով, որը պարունակում է կայքի մնացած մասը:

<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 և margin լռելյայն h1-ի համար:

Խորհուրդ 2

Ժառանգները չպետք է ձևավորեն բաց ծնողների միջև: Օրինակ, մենք ունենք մենյու: Այս մենյուի ներքևի բացը կարող է ձևավորվել կամ margin մենյուով դիվի, կամ margin հղումների: Ավելի լավ է ընտրել առաջին տարբերակը, քանի որ հղումները չպետք է գործեն ծնողի գլխի վրայով:

Խորհուրդ 3

Թող երկու տարրերի միջև կա բաց և այս դեպքում տեսողականորեն տարբերություն չկա, ինչ ընտրել բացի համար - margin կամ padding: Այս դեպքում ընտրեք margin, քանի որ հենց այն պետք է ստեղծի բացեր տարրերի միջև:

Պարզ միասյուն կայքի դասավորություններ CSS-ում

Խորհուրդ 1

Խորհուրդ 2

Խորհուրդ 3

Գործնական առաջադրանքներ