esercizio03
creazione pagina web html con elementi css con
header main e footer con articoli sezioni ecc.
| New file |
| | |
|---|
| | | * { |
|---|
| | | /* |
|---|
| | | |
|---|
| | | box-sizing: border-box |
|---|
| | | |
|---|
| | | serve per far calcolare la width in percentuale tenendo conto anche del padding |
|---|
| | | |
|---|
| | | */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | header { |
|---|
| | | background-color: rgb(178, 173, 173); |
|---|
| | | text-align: center; |
|---|
| | | padding: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .navbar { |
|---|
| | | background-color: rgb(0, 0, 0); |
|---|
| | | height: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | aside { |
|---|
| | | width: 20%; |
|---|
| | | float: left; |
|---|
| | | padding: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | section { |
|---|
| | | width: 40%; |
|---|
| | | float: left; |
|---|
| | | padding: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | article { |
|---|
| | | width: 40%; |
|---|
| | | float: left; |
|---|
| | | padding: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | footer{ |
|---|
| | | /* |
|---|
| | | clear:both serve per clearare le regole di float precedentemente create |
|---|
| | | |
|---|
| | | */ |
|---|
| | | display: block; |
|---|
| | | clear: both; |
|---|
| | | background-color: rgb(178, 173, 173); |
|---|
| | | text-align: center; |
|---|
| | | padding: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | /* |
|---|
| | | Se lo schermo ha una larghezza minore di 600px allora applica la |
|---|
| | | regola sotto citata: |
|---|
| | | |
|---|
| | | ovvero aumenta la larghezza del 100% alle sezioni citate |
|---|
| | | (aside, section, article) |
|---|
| | | |
|---|
| | | serve soprattutto per i dispositivi mobile |
|---|
| | | */ |
|---|
| | | |
|---|
| | | @media screen and (max-width:600px) { |
|---|
| | | aside, section, article { |
|---|
| | | width:100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <title>Esercizio03</title> |
|---|
| | | <link rel="stylesheet" href="esercizio03.css"> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <header> |
|---|
| | | <h2>Header</h2> |
|---|
| | | </header> |
|---|
| | | |
|---|
| | | <nav class="navbar"> |
|---|
| | | |
|---|
| | | </nav> |
|---|
| | | |
|---|
| | | <main> |
|---|
| | | <aside> |
|---|
| | | <h2>questo è aside</h2> |
|---|
| | | <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint sed aperiam quis facilis autem eligendi, distinctio quasi maxime accusantium nulla assumenda, enim iusto, facere nesciunt provident eos illum temporibus expedita!</p> |
|---|
| | | </aside> |
|---|
| | | <section> |
|---|
| | | <h2>questa è una sezione</h2> |
|---|
| | | <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente explicabo dolore quam vel accusamus sed harum ex tempore, nam laudantium perferendis. Aut expedita fugiat reiciendis fugit, itaque suscipit perferendis ill</p> |
|---|
| | | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus maxime velit vel, animi repudiandae ipsum beatae veritatis facilis sint ipsa aliquam tempora laborum cumque exercitationem dolorum cum accusantium quas nemo!</p> |
|---|
| | | </section> |
|---|
| | | <article> |
|---|
| | | <h2>questo è un articolo</h2> |
|---|
| | | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus maxime velit vel, animi repudiandae ipsum beatae veritatis facilis sint ipsa aliquam tempora laborum cumque exercitationem dolorum cum accusantium quas nemo!</p> |
|---|
| | | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus maxime velit vel, animi repudiandae ipsum beatae veritatis facilis sint ipsa aliquam tempora laborum cumque exercitationem dolorum cum accusantium quas nemo!</p> |
|---|
| | | </article> |
|---|
| | | </main> |
|---|
| | | |
|---|
| | | <footer> |
|---|
| | | <h2>Footer</h2> |
|---|
| | | </footer> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
