Tasiri CSS Website Layout
- Ƙara ɗanin Tasiri CSS Counter
- Ƙara ɗanin Tasiri CSS Unit
Tsarin yanar gizo
Yanar gizo na iya koyi da babban nau'i, manu, kudade da fata:
An raba manyan ayyuka da wasu manyan ayyuka don yanar gizo. Amma, tsaɓan wadannan na iya koyi da wuri ayyuka, ayyukan suna nazarin su a cikin wasan kwaikwayo.
Babban nau'i
Babban nau'i (header) na iya koyi a fagen fagen na yanar gizo (taiwo su yi wuri daga baya na tsaɓan yanar gizo). Anan kuma kuma yin aiki domin yin koyi da lafiya (logo) ko sunan yanar gizo:
实例
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
结果：
Tsaɓan yanar gizo
Tsaɓan yanar gizo na iya koyi da wasu hanyar, domin yin aiki ga kaiwa don yin nazarin yanar gizo:
实例
/* Tsarin kamar kungiyar yanar gizo */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Tsarin Navbar hanyar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Tsarin hanyar - yin wari a lokaci na haɗuwa */
.topnav a:hover {
background-color: #ddd;
color: black;
}
结果：
Kudade
Koyi ta ce tsa ba ga kuma a yi a kaiwa ce don alhakin jama'a na kai. Anan kuma kuma yin ayyuka da cikin manyan ayyuka daga cikin wadannan ayyuka (taiwo su kuma yi wuri):
- 1-列布局（通常用于移动浏览器）
- 2-列布局（通常用于平板电脑和笔记本电脑）
- 3-列布局 （仅用于台式机）
1-列：
2-列：
3-列：
我们将创建 3 列布局，并在较小的屏幕上将其更改为 1 列布局：
实例
/* 创建三个相等的列，它们彼此相邻浮动 */
.column {
float: left;
width: 33.33%;
}
/* 在列后清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
结果：
nassarar kimiyyar yanar gizo a h�kumta
kita'annun nassarar nimanin na wakilcin kimiyyar yanar gizo
wanda kuma kuma W3C sabon kimiyya: HTML, CSS, XML. kuma kimiyya dake da kama, kamar JavaScript, PHP, SQL da sauransu.
kalubawar da aiki hanyar aiki
在 CodeW3C.com，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
快捷易懂的学习方式
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
提示：如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。
提示：您是否想知道 @media 规则如何工作？请在我们的 CSS ɗanin 这一章中学习更多相关知识。
提示：创建列布局的一种更现代的方法是使用 CSS Flexbox。但是，Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持，请使用浮动（如上所示）。
如需了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 CSS Flexbox 教程。
不相等的栏
主要内容（main content）是您网站上最大、最重要的部分。
列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：
实例
.column {
float: left;
}
/* kudu da gabas */
.column.side {
width: 25%;
}
/* tsoffin gida na gabas */
.column.middle {
width: 50%;
}
/* layiyan aiki na aiki - yana samun tsoffin gida da kuma kuma yana aiki a h�kumta */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
结果：
nassarar kimiyyar yanar gizo a h�kumta
kita'annun nassarar nimanin na wakilcin kimiyyar yanar gizo
wanda kuma kuma W3C sabon kimiyya: HTML, CSS, XML. kuma kimiyya dake da kama, kamar JavaScript, PHP, SQL da sauransu.
kalubawar da aiki hanyar aiki
在 CodeW3C.com，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
快捷易懂的学习方式
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
页脚
页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：
实例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
结果：
- Ƙara ɗanin Tasiri CSS Counter
- Ƙara ɗanin Tasiri CSS Unit
