Website Layout ng CSS

website layout

Ang website ay karaniwang hinahati sa header, menu, nilalaman, at footer:

Mayroon palang maraming iba't ibang disenyo ng layout na pwedeng piliin. Gayunman, ang straktura na ito ay isa sa pinakakaraniwang straktura, at magsasaliksik kami nito sa kasalukuyang tutorial.

header

Ang header (header) ay karaniwang matatagpuan sa itaas ng website (o sa ilalim ng navigation menu). Karaniwang ito ay naglalaman ng logo o pangalan ng website:

Example

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

Result:

header

Try It Yourself

navigation bar

Ang navigation bar ay naglalaman ng listahan ng links upang makatulong sa mga visitor na mag-browse ng iyong website:

Example

/* navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar link */
.topnav a {
  float: left;
  display: block;
  kulay: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* link - pagkatapos ng hover ay magbabago ang kulay */
.topnav a:hover {
  background-color: #ddd;
  kulay: black;
}

Result:

Try It Yourself

nilalaman

Ang kung anong layout na gagamitin ay depende sa layuning user ninyo. Ang pinakakaraniwang layout ay isa sa mga sumusunod na layout (o maaaring kumombita sila):

  • 1-columnLayout (usually used for mobile browsers)
  • 2-columnLayout (usually used for tablets and laptops)
  • 3-columnLayout (used only for desktops)

1-column:

2-column:

3-column:

We will create a 3-column layout and change it to a 1-column layout on smaller screens:

Example

/* Create three equal columns that float next to each other */
.column {
  float: left;
  width: 33.33%;
}
/* Clear floating after columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - Stack three columns instead of side by side on smaller screens (width of 600 pixels or less) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Result:

Complete website technology reference manual

Our reference manual covers all aspects of website technology.

It includes W3C standard technologies: HTML, CSS, XML. And other technologies such as JavaScript, PHP, SQL, etc.

Online instance test tool

At CodeW3C.com, we provide thousands of examples.

By using our online editor, you can edit these examples and experiment with the code.

Quick and Easy Learning Method

An inch of time is an inch of gold, so we provide you with quick and easy-to-understand learning content.

Here, you can obtain any knowledge you need in an easy-to-understand convenient manner.

Try It Yourself

Tip:To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%.

Tip:Do you want to know how the @media rule works? Please read our CSS Media Query Learn more about relevant knowledge in this chapter.

Tip:A more modern way to create column layouts is to use CSS Flexbox. However, Internet Explorer 10 and earlier versions do not support it. If you need support for IE6-10, please use floats (as shown above).

For more information about the Flexible Box layout module, please read our CSS Flexbox Tutorial.

Unequal columns

Main content (main content) is the largest and most important part of your website.

It is common for column widths to be unequal because most of the space is reserved for the main content. Auxiliary content (if any) is usually used as alternative navigation or to specify information related to the main content. You can change the width as you like, just remember that its total should be 100%:

Example

.column {
  float: left;
}
/* Left and right columns */
.column.side {
  width: 25%;
}
/* Middle column */
.column.middle {
  width: 50%;
}
/* Responsive layout - Stack three columns instead of side by side */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Result:

Complete website technology reference manual

Our reference manual covers all aspects of website technology.

It includes W3C standard technologies: HTML, CSS, XML. And other technologies such as JavaScript, PHP, SQL, etc.

Online instance test tool

At CodeW3C.com, we provide thousands of examples.

By using our online editor, you can edit these examples and experiment with the code.

Quick and Easy Learning Method

An inch of time is an inch of gold, so we provide you with quick and easy-to-understand learning content.

Here, you can obtain any knowledge you need in an easy-to-understand convenient manner.

Try It Yourself

Footer

The footer is located at the bottom of the page. It usually contains information such as copyright and contact details:

Example

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

Result:

Footer

Try It Yourself

Responsive Website Layout

By using the above CSS code, we have created a responsive website layout that switches between two columns and full-width columns based on screen width:

Try It Yourself