<< Šablona pro responzivní web | Tvorba webu | >>

Zadání

  • pomocí CSS a obrázku kompasu vytvořte responzivní navigaci pro web podle předlohy
  • použijte zadaný HTML kód a obrázek kompasu 960 x 960 px
  • pomocí CSS vytvořte odkazy jako kruhové bloky a pozicujte na obrázku
  • nastavte vzhled navigace podle předlohy
  • zajistěte responzivitu navigace se zlomem při šířce okna 40em
    • při větší šířce nastavte šířku bloku main 40%
    • při menší šířce nastavte šířku bloku main 80%

Předloha navigace

Zvětšit

Obrázek kompasu

Zvětšit

Výchozí HTML kód

<!DOCTYPE HTML>
<html>
  <head>
    <title>
      Grafická navigace
    </title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8">
  </head>
  <body>
    <main>
      <header>
        <h2>CSS grafická navigace</h2>
      </header>
      <section>
        <img src="navigace.png" />
        <nav>
          <img src="navigace.png" title="Kompas"/>
          <div id="uvod">
            <a href="#" title="Úvod">H</a></div>
          <div id="sever">
            <a href="#" title="Sever">S</a></div>
          <div id="jih">
            <a href="#" title="Jih">J</a></div>
          <div id="vychod">
            <a href="#" title="Východ">V</a></div>
          <div id="zapad">
            <a href="#" title="Západ">Z</a></div>
        </nav>
      </section>
      <footer>
        JoNy © 2017
      </footer>
    </main>
  </body>
</html>

Výchozí CSS styl

    <style>
      /*reset CSS*/
      *{padding: 0; margin: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
      main {width: 40%;}
      section {position: relative;}
      /*stylování odkazů*/
      nav {position: absolute;}
      nav a {height: 5.75vw; line-height: 5.75vw; font-size: 3vw; display: block;}
      nav a:hover {background-color: rgba(240,140,80,0.4);}
      /*responzivní obrázek*/
      section img, nav img {max-width: 100%; height: auto;}
      /*stylování bloků s odkazy*/
      #uvod, #sever, #jih, #vychod, #zapad {width: 15.4%; height: 6vw; background-color: rgba(200,200,200,0.6);}
      /*polohování bloků s odkazy*/
      #uvod {top: 17vw; left: 42.3%;}
      #sever {}
      #jih {}
      #vychod {}
      #zapad {}
      /*breakpoint*/
      @media (max-width: 40em) {
        main{width: 80%;}
      }
    </style>

Řešení CSS

    <style>
      /*reset CSS*/
      *{padding: 0; margin: 0; box-sizing: border-box; -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;}
      body {font-family: calibri, sans-serif;}
      main
      {margin: 1em auto; width: 40%;}
      header, footer
      {text-align: center; margin: 1em 0;}
      footer{font-size: small;}
      section
      {position: relative;}
      /*stylování odkazů*/
      nav
      {position: absolute; top: 0; left: 0;}
      nav a
      {height: 5.75vw; line-height: 5.75vw; display: block; border-radius: 50%;
        font-size: 3vw; font-weight: bold; text-decoration: none;}
      nav a:hover
      {background-color: rgba(240,140,80,0.4);}
      /*responzivní obrázek*/
      section img, nav img
      {max-width: 100%; height: auto;}
      /*stylování bloků s odkazy*/
      #uvod, #sever, #jih, #vychod, #zapad
      {width: 15.4%; height: 6vw; background-color: rgba(200,200,200,0.6); position: absolute;
        border: 2px black solid; border-radius: 50%; text-align: center;}
      /*polohování bloků s odkazy*/
      #uvod {top: 17vw; left: 42.3%;}
      #sever {top: 0; left: 42.3%;}
      #jih {top: 34vw; left: 42.3%;}
      #vychod {top: 17vw; left: 34vw;}
      #zapad {top: 17vw; left: 0;}
      /*breakpoint*/
      @media (max-width: 36em) {
        main
        {width: 80%;}
        nav img
        {top: 12vw;}
        nav a
        {height: 11.5vw; line-height: 11.4vw; font-size: 6vw;}
        #uvod, #sever, #jih, #vychod, #zapad
        {height: 12vw ;}
        #uvod {top: 34vw;}
        #jih {top: 68vw;}
        #vychod {top: 34vw; left: 68vw;}
        #zapad {top: 34vw;}
      }
    </style>

Školní stránky

RSS