მარტივი ერთსვეტიანი საიტის მაკეტები CSS-ში

ამ გაკვეთილში ჩვენ ვივარჯიშებთ მარტივი ერთსვეტიანი საიტის მაკეტების შექმნაში. მოდით, მაგალითად, გავაკეთოთ ასეთი მაკეტი:

დავიწყოთ რეალიზება. ყოველი მაკეტი, როგორც წესი, იწყება ზოგადი დივით სახელად wrapper, რომელიც შეიცავს მთელ დანარჩენ საიტს:

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

ჩვენს შემთხვევაში, ვრაპერი გასწორდება ეკრანის ცენტრში:

#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

პრაქტიკული დავალებები