Hur man skapar: Blogglayout

Lär dig hur man skapar en responsiv blogglayout med CSS.

Lär dig hur man skapar en responsiv blogglayout som förändras mellan två kolumner och en fullbreddskolumn beroende på skärmens bredd.

Justera storleken på webbläsarfönstret för att se effekten av responsivitet:

Prova själv

Hur man skapar en blogglayout

Steg 1 - Lägg till HTML:

<div class="header">
  <h2>Blogg Namn</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITEL ÖVERSKRIFT</h2>
      <h5>Beskrivning av titel, 7 dec 2017</h5>
      <div class="fakeimg" style="height:200px;">Bild</div>
      <p>Några texter...</p>
    </div>
    <div class="card">
      <h2>TITEL ÖVERSKRIFT</h2>
      <h5>Beskrivning av titel, 2 sep 2017</h5>
      <div class="fakeimg" style="height:200px;">Bild</div>
      <p>Några texter...</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Om mig</h2>
      <div class="fakeimg" style="height:100px;">Bild</div>
      <p>Visa text om mig i skuld för att inte uppfylla skyldigheter, mollit animus...</p>
    </div>
    <div class="card">
      <h3.Populära inlägg</h3>
      <div class="fakeimg">Bild</div><br>
      <div class="fakeimg">Bild</div><br>
      <div class="fakeimg">Bild</div>
    </div>
    <div class="card">
      <h3>Följ mig</h3>
      <p>Några texter...</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Fot</h2>
</div>

Steg 2 - Lägg till CSS:

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
/* Sidhuvud / bloggtitel */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
/* Skapa två ojämna kolumner som flödar mot varandra */
/* Vänsterkolumn */
.leftcolumn {
  float: left;
  width: 75%;
}
/* Högerkolumn */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
/* Falskt bild */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* Lägg till korteffekt för artiklar */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* Rensa flödet efter kolumnerna */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Sidfot */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* Anpassningsbar layout - När skärmsnittet är mindre än 800px, låt två kolumner staplas tillsammans istället för att vara bredvid varandra */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

Prova själv

Relaterade sidor

Tutorial:CSS webbplatslayout

Tutorial:CSS responsiv webbdesign