Miten luodaan: vastauskykyinen otsikko

Opi, miten luot vastauskykyisen otsikon CSS:n avulla.

Luo vastausvälinen otsikko

Ensimmäinen vaihe - Lisää HTML:ää:

<div class="header">
  <a href="#default" class="logo">YrityksenLogo</a>
  <div class="header-right">
    <a class="active" href="#home">Koti</a>
    <a href="#contact">Yhteydenotto</a>
    <a href="#about">Tietoa</a>
  </div>
</div>

Toinen vaihe - Lisää CSS:ää:

/* Käytä harmaata taustaa ja hieman sisätilaa otsikon tyylittämiseksi */
.header {
  ylitys: piilotettu;
  taustaväri: #f1f1f1;
  tuntuma: 20px 10px;

/* Aseta otsikkolinkin tyyli */
.header a {
  liukuu: vasemmalle;
  väri: musta;
  tekstiasento: keskitetty;
  tuntuma: 12px;
  tekstiväri: ei-muotoiltu;
  fonttikoko: 18px;
  riveen: 25px;
  kaari: 4px;

/* Aseta Logo-linkin tyyli (huomaa, että asetamme riveen ja fonttikoon samanarvoisiksi estämiseksi, että otsikko kasvaa fontin suurenemisen yhteydessä) */
.header a.logo {
  fonttikoko: 25px;
  fontti: vahva;

/* Muuta taustaväriä hiiren osoitetta kohdistettaessa */
.header a:hover {
  taustaväri: #ddd;
  väri: musta;

/* Aseta aktiivisen/tämänhetkisen linkin tyyli */
.header a.active {
  taustaväri: dodgerblue;
  väri: valkoinen;

/* Liikuta linkkiosaa oikealle */
.header-right {
  liukuu: oikealle;

/* Lisää media-tarkistus vastauksellisuuden toteuttamiseksi - kun näytön leveys on 500px tai pienempi, linkit sijoitetaan rinnakkain */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    näyttö: block;
    tekstiasento: vasen;
  
  .header-right {
    float: none;
  

Try it yourself

Related pages

Tutorial:CSS navigation bar