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
Жогортон төмөн карай талаа берүү эң ыңгайлуу. Мисалы, бизде меню жана контент бар, алардын ортосунда - бош мейкиндик. Белгилүү болгондой, бул мейкиндикти менюнун төмөнкү талаасы, контенттин жогорку талаасы же алардын биргелешкен таасири менен жасаса болот. Бул учурда менюга төмөнкү талаа берүү жакшы, контентке болсо h1 үчүн демейки padding жана margin алып салуу керек.
Кеңеш 2
Тукумдар ата-энелеринин ортосундагы талааны түзбөшү керек. Мисалы, бизде меню бар. Бул менюнун төмөнкү талаасы менюлуу дивдин margin же шилтемелердин margin менен түзүлүшү мүмкүн. Ата-энесинин башын ашып шилтемелер иштебеши үчүн биринчи вариантты тандоо жакшы.
Кеңеш 3
Эки элементтин ортосунда талаа бар дейли жана бул учурда визуалдык жактан margin же padding тандагандыгынын айырмасы жок. Бул учурда margin тандаңыз, анткени элементтердин ортосундагы талааны так ушу түзүшү керек.
