CSS Webbplatslayout

Webbplatslayout

Webbplatser delas vanligtvis upp i rubrik, meny, innehåll och fotnotesdel:

Det finns många olika layoutdesigner att välja mellan. Men, den struktur som presenteras här är en av de mest vanliga, och vi kommer att undersöka den närmare i denna handledning.

Huvudrubrik

Huvudrubriken (header) ligger vanligtvis på webbplatsens topp (eller ovanför den övre navigationsmenyn). Den innehåller vanligtvis ett logotyp (logo) eller namnet på webbplatsen:

Exempel

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

Resultat:

Huvudrubrik

Prova själv

Navigationsfält

Navigationsfältet innehåller en länklista för att hjälpa besökare att navigera på din webbplats:

Exempel

/* navbar-container */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar-länk */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Länk - ändra färg vid muspekare */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Resultat:

Prova själv

Innehåll

Vilken layout som används beror vanligtvis på din målgrupp. De vanligaste layouterna är en av följande (eller en kombination av dem):

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

1-column:

2-columns:

3-columns:

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

Exempel

/* 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%;
  }
}

Resultat:

Complete website technology reference manual

Our reference manual covers all aspects of website technology.

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

Online instance test tool

På CodeW3C.com erbjuder vi tusentals exempel.

Genom att använda vår onlineeditor kan du redigera dessa exempel och experimentera med koden.

Snabb och lättförståelig inlärning

Tid är pengar, så vi erbjuder dig snabb och lättförståelig inlärning.

Här kan du enkelt få den kunskap du behöver.

Prova själv

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-uttryck Learn more about related 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 floating (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 main content. Supplementary content (if any) is usually used as alternative navigation or to specify information related to the main content. You can change the width at will, just remember that its total should be 100%:

Exempel

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

Resultat:

Complete website technology reference manual

Our reference manual covers all aspects of website technology.

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

Online instance test tool

På CodeW3C.com erbjuder vi tusentals exempel.

Genom att använda vår onlineeditor kan du redigera dessa exempel och experimentera med koden.

Snabb och lättförståelig inlärning

Tid är pengar, så vi erbjuder dig snabb och lättförståelig inlärning.

Här kan du enkelt få den kunskap du behöver.

Prova själv

Fot

Foten ligger på sidans botten. Den innehåller vanligtvis information som upphovsrätt och kontaktinformation:

Exempel

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

Resultat:

Fot

Prova själv

Responsiv webbplatslayout

Genom att använda ovanstående CSS-kod har vi skapat en anpassningsbar webbplatslayout som växlar mellan två kolumner och en fullbreddskolumn beroende på skärmens bredd:

Prova själv