CSS

  • Page Previous CSS
  • Page Next CSS

ການຈັດຕັ້ງເວັບໄຊ

ເວັບໄຊຈະຖືກແບ່ງເປັນຫົວໜ້າ,ການນຳໃຊ້,ຂັດຂໍ້,ແລະຫົວໜ້າ:

ມີຫຼາຍການຈັດຕັ້ງທີ່ຫນັງຂຶ້ນທັງໝົດ.ແຕ່ການຈັດຕັ້ງທີ່ເກີດຂຶ້ນຫນັງຂຶ້ນທັງໝົດແມ່ນການຈັດຕັ້ງທີ່ເກີດຂຶ້ນຫນັງໝົດນັ້ນ,ພວກເຮົາຈະສຶກສາກັບມັນໃນການສອນນີ້.

ຫົວໜ້າ

ຫົວໜ້າ(header)ຈະຢູ່ໃນປີກໜ້າຂອງເວັບໄຊ(ຫຼືພາຍໃຕ້ຂອງການນຳໃຊ້ທາງ).ມັນຈະບໍ່ຄືກັບການຈັດຕັ້ງຂອງການນຳໃຊ້ທາງ:

实例

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Result:

ຫົວໜ້າ

Try It Yourself

ການນຳໃຊ້

ການຈັດຕັ້ງຂອງການນຳໃຊ້ກັບທາງລວມກັບລາຍການທາງຈະຊ່ວຍຜູ້ເຂົ້າຫາຫາກວມກັບຂອງທ່ານເວັບໄຊ:

实例

/* ບັນຊີ navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* ທາງ Navbar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* ທາງ - ປ່ຽນສີໃນລະຫວ່າງການພັດ */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Result:

Try It Yourself

ຂັດຂໍ້

ການໃຊ້ການຈັດຕັ້ງທີ່ຫນັງຂຶ້ນກັບຜູ້ນຳໃຊ້ຂອງທ່ານ.ການຈັດຕັ້ງທີ່ເກີດຂຶ້ນຫນັງຂຶ້ນທັງໝົດແມ່ນຈັດຕັ້ງທີ່ຫນັງໝົດນັ້ນ(ຫຼືການປະສົມກັນນັ້ນ):

  • 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%;
  }
}

Result:

ປື້ມກໍາເຫັນຂອງເຕັກນິວເຄຍຂອງເວັບໄຊທັງໝົດ

ປື້ມກໍາເຫັນຂອງພວກເຮົາກວມເອົາທຸກບາງບົດຢ່າງຂອງເຕັກນິວເຄຍຂອງເວັບໄຊ.

ນັ້ນລວມມີເຕັກນິວເຄຍ W3C: HTML, CSS, XML. ແລະເຕັກນິວເຄຍອື່ນໆ ເຊັ່ນ JavaScript, PHP, SQL ແລະອື່ນໆອີກ.

ອຸປະກອນການທົດລອງຄວາມສາມາດທາງອິນເຕີເນັດ

在 CodeW3C.com，我们提供上千个实例。

通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。

快捷易懂的学习方式

一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。

在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。

Try It Yourself

提示：如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。

提示：您是否想知道 @media 规则如何工作？请在我们的 ຟັດ ການສອບສວນສະພາບ 这一章中学习更多相关知识。

提示：创建列布局的一种更现代的方法是使用 CSS Flexbox。但是，Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持，请使用浮动（如上所示）。

如需了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 ຟັດ Flexbox 教程。

不相等的栏

主要内容（main content）是您网站上最大、最重要的部分。

列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：

实例

.column {
  float: left;
}
/* ສາຍຊ້າຍແລະສາຍຊາຍ */
.column.side {
  width: 25%;
}
/* ສາຍກາງ */
.column.middle {
  width: 50%;
}
/* ການຈັດວາງຄວາມສະແດງ - ສ້າງສາຍສາຍສາຍທີ່ຂວ້າງກັນຫຼາຍກວ່າຈັດວາງສາຍສາຍສາຍທີ່ສາຍກັນ */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Result:

ປື້ມກໍາເຫັນຂອງເຕັກນິວເຄຍຂອງເວັບໄຊທັງໝົດ

ປື້ມກໍາເຫັນຂອງພວກເຮົາກວມເອົາທຸກບາງບົດຢ່າງຂອງເຕັກນິວເຄຍຂອງເວັບໄຊ.

ນັ້ນລວມມີເຕັກນິວເຄຍ W3C: HTML, CSS, XML. ແລະເຕັກນິວເຄຍອື່ນໆ ເຊັ່ນ JavaScript, PHP, SQL ແລະອື່ນໆອີກ.

ອຸປະກອນການທົດລອງຄວາມສາມາດທາງອິນເຕີເນັດ

在 CodeW3C.com，我们提供上千个实例。

通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。

快捷易懂的学习方式

一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。

在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。

Try It Yourself

Footer

页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：

实例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Result:

Footer

Try It Yourself

Responsive Website Layout

ໃນການໃຊ້ລັກສະນາງ CSS ທີ່ກໍາລັງປະກອບ, ພວກເຮົາໄດ້ສ້າງການຈັດຕັ້ງເວັບໄຊປະຕິບັດພາບທີ່ພຽງແຕ່ປ່ຽນຄວາມຢ່າງທີ່ບໍ່ຄືກັນຫຼັງຈາກການຫັນຄວາມວົງງາຍຄວາມສະໜາມສາຍລາຍ:

Try It Yourself

  • Page Previous CSS
  • Page Next CSS