CodeGym/Corsi/Frontend SELF IT/Creazione di layout complessi

Creazione di layout complessi

Disponibile

10.1 Layout a due colonne

Creare layout complessi sulle pagine web richiede una buona comprensione di vari metodi di posizionamento e delle loro combinazioni. In questa lezione vedremo alcuni esempi pratici di creazione di layout complessi utilizzando varie tecniche CSS, come Flexbox, Grid e posizionamento tradizionale.

Layout di un blog con navigazione fissa

Questo layout include un'intestazione, una barra di navigazione fissa, il contenuto principale e una barra laterale.

Esempio:

CSS
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

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

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #444;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  z-index: 1000;
}

.container {
  display: flex;
  margin-top: 60px; /* Altezza della navigazione fissa */
}

.main-content {
  flex: 3;
  padding: 20px;
}

.sidebar {
  flex: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

.footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  position: relative;
  margin-top: auto;
}
HTML
<div class="header">My Blog</div>
<div class="navbar">Navigation</div>
<div class="container">
  <div class="main-content">
    <h1>Main Content</h1>
    <p>Here is the main content of the blog.</p>
  </div>

  <div class="sidebar">
    <h2>Sidebar</h2>
    <p>Links and other content.</p>
  </div>
</div>
<div class="footer">Footer</div>

In questo esempio, la barra di navigazione fissa rimane al suo posto durante lo scorrimento della pagina grazie a position: fixed. Il contenuto principale e la barra laterale sono disposte in due colonne grazie a Flexbox.

10.2 Sito a pagina singola

Sito a pagina singola con intestazione e piè di pagina fissati

Questo layout include un'intestazione, il contenuto principale e un piè di pagina. L'intestazione e il piè di pagina rimangono visibili durante lo scorrimento della pagina.

Esempio:

CSS
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.main {
  flex: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

.footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  position: sticky;
  bottom: 0;
  z-index: 1000;
}
HTML
<div class="header">Sticky Header</div>
<div class="main">
  <h1>Main Content</h1>
  <p>Here is the main content of the page. Scroll to see the sticky header and footer in action.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus lectus eu tortor vehicula, et convallis lacus varius. Integer at orci in nisl faucibus placerat.</p>
</div>
<div class="footer">Sticky Footer</div>

In questo esempio, l'intestazione e il piè di pagina rimangono visibili durante lo scorrimento della pagina grazie a position: sticky.

10.3 Barra di navigazione multilivello

Questo layout include una barra di navigazione multilivello, che utilizza liste annidate e pseudoclassi per creare menu a tendina.

Esempio:

CSS
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.navbar {
  background-color: #333;
  overflow: hidden;
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #111;
}

.navbar li ul {
  display: none;
  position: absolute;
  background-color: #333;
}

.navbar li:hover ul {
  display: block;
}

.navbar li ul li {
  float: none;
}

.navbar li ul li a {
  padding: 14px 16px;
}
HTML
<div class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Marketing</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
1
Compito
Frontend SELF IT,  livello 22lezione 4
Bloccato
Layout a due colonne
Layout a due colonne
1
Compito
Frontend SELF IT,  livello 22lezione 4
Bloccato
Sito Monopagina
Sito Monopagina
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti