Maktaba ya CSS - Muundo wa Tovuti
Muundo wa tovuti
Tovuti kwa kawaida inatoomika kama kichwa cha tovuti, menyu, matokeo ya kina na kizito cha tovuti:
Kuna matumizi mengi ya mifano ya muundo yenye uwezo wa chaguo. Kama hivyo, mifano hizi ni moja ya yaliyotumiwa sana, na tukitembea kwa kina kwenye kesi hii.
Kichwa cha tovuti
Kichwa cha tovuti (header) kwa kawaida hupatikana kwenye kipimo cha kuu (au kwenye menyu wa kipimo cha kuu cha chini). Haujitegemea kuna kifupi (logo) au jina la tovuti:
Mifano
.header {
background-color: #F1F1F1;
text-align: center;
kijivunja: 20px;
}
Matokeo:
Makina ya navigashioni
Makina ya navigashioni ina orodha ya viungo, ili kusaidia wateja kumtazama tovuti yako:
Mifano
/* Kichwa cha navigashioni - kichwa cha kuu cha kina: */
.topnav {
kushindwa: kwenye hatua;
mabgani-wabagha: #333;
}
/* Tengeneza ya Navbar - kutofautiana rangi wakati wa kusafiri hizi: */
.topnav a {
float: left;
kuonesha: block;
mabgani: #f2f2f2;
text-align: center;
kijivunja: 14px 16px;
mimba: kwenye hatua;
}
/* Tengeneza - kutofautiana rangi wakati wa kusafiri hizi: */
.topnav a:hover {
mabgani-wabagha: #ddd;
mabgani: kijani;
}
Matokeo:
Matokeo
Kipendekezo cha kisha inayotumiwa ni kufikia mtumiaji wako. Mifano inayotumiwa sana ni moja ya hizi (au inayoshirikiana):
- 1-列布局（通常用于移动浏览器）
- 2-列布局（通常用于平板电脑和笔记本电脑）
- 3-列布局 （仅用于台式机）
1-列：
2-列：
3-列：
我们将创建 3 列布局，并在较小的屏幕上将其更改为 1 列布局：
Mifano
/* 创建三个相等的列，它们彼此相邻浮动 */
.column {
float: left;
width: 33.33%;
}
/* 在列后清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Matokeo:
Mwongozo wa kawaida wa teknolojia ya tovuti
Mwongozo wetu umekuwa na kila vitu vya teknolojia ya tovuti.
Inayoshiriki W3C standard technology: HTML, CSS, XML. Na vifaa vingine, kama JavaScript, PHP, SQL nyingine.
Mfano wa msingi wa kizito cha kufungua vifaa vya kuelewa kwa nafasi
在 CodeW3C.com，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
Maelezo ya kuelewa ambayo inayofaa sana
Muda wa sekunde una thamani kama uchaguo wa nje, kwa hiyo, tunaweza kutoa maelezo ya kuelewa ambayo inayofaa sana.
Hapa, unaweza kufikia kina yako kwa njia ya kuelewa inayofaa.
提示：如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。
提示：您是否想知道 @media 规则如何工作？请在我们的 CSS Media Queries 这一章中学习更多相关知识。
提示：创建列布局的一种更现代的方法是使用 CSS Flexbox。但是，Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持，请使用浮动（如上所示）。
如需了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 CSS Flexbox 教程。
不相等的栏
主要内容（main content）是您网站上最大、最重要的部分。
列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：
Mifano
.column {
float: left;
}
/* Majirani ya kushoto na kulia */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Muundo wa mawasiliano - Kusababisha majirani ya tatu iwe yanaongezwa kama hata inasababisha kwa sababu ya uwezo wa kilele kufikirika kama kawaida kwa sababu ya kufikirika kama kawaida.
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
Matokeo:
Mwongozo wa kawaida wa teknolojia ya tovuti
Mwongozo wetu umekuwa na kila vitu vya teknolojia ya tovuti.
Inayoshiriki W3C standard technology: HTML, CSS, XML. Na vifaa vingine, kama JavaScript, PHP, SQL nyingine.
Mfano wa msingi wa kizito cha kufungua vifaa vya kuelewa kwa nafasi
在 CodeW3C.com，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
Maelezo ya kuelewa ambayo inayofaa sana
Muda wa sekunde una thamani kama uchaguo wa nje, kwa hiyo, tunaweza kutoa maelezo ya kuelewa ambayo inayofaa sana.
Hapa, unaweza kufikia kina yako kwa njia ya kuelewa inayofaa.
Chumba cha Chama
Chumba cha chama chapatikana kwenye chapa. Huzingatia kuna vya uhisia kama hisia ya hisia na mawasiliano:
Mifano
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
Matokeo:
Usaidizi wa Layout wa Website wa Kifaa
Kwa kutumia hii CSS kipya, tumeundua usaidizi wa website wa kifaa, ambao hupita kwa kifaa kilichochukua kina:
