|
|
| (70 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| − | | + | {{UPMC-Paris/CSS}} |
| | + | {{UPMC-Paris/Menu}} |
| | <html> | | <html> |
| − | <head> | + | </html> |
| − | <style>
| + | {{UPMC-Paris/Footer}} |
| − | .wrapper {
| + | <html> |
| − | display: -webkit-flex;
| + | <div id="footer"/> |
| − | display: flex;
| + | |
| − | flex-direction: column;
| + | |
| − | width: 100%;
| + | |
| − | height:2500px;
| + | |
| − | background-color: orange;
| + | |
| − | margin : none;
| + | |
| − |
| + | |
| − | }
| + | |
| − | .header {
| + | |
| − | display: -webkit-flex;
| + | |
| − | display: flex;
| + | |
| − | width: 95%;
| + | |
| − | height:100px;
| + | |
| − | background-color: yellow;
| + | |
| − | margin : auto;
| + | |
| − | margin-bottom: 1%;
| + | |
| − | } | + | |
| − | | + | |
| − | .header-item {
| + | |
| − | display: -webkit-flex;
| + | |
| − | display: flex;
| + | |
| − | background-color: pink;
| + | |
| − | width: 30%;
| + | |
| − | height: 30%;
| + | |
| − | margin: 1%;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | .flex-container {
| + | |
| − | display: -webkit-flex;
| + | |
| − | display: flex;
| + | |
| − | width: 95%;
| + | |
| − | min-height: 500px;
| + | |
| − | max-height: 2500px;
| + | |
| − | background-color: lightgreen;
| + | |
| − | margin : auto;
| + | |
| − | margin-bottom: 1%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .flex-item {
| + | |
| − | background-color: cornflowerblue;
| + | |
| − | width: 100px;
| + | |
| − | height: 100px;
| + | |
| − | margin: 10px;
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | .footer {
| + | |
| − | display: -webkit-flex;
| + | |
| − | display: flex;
| + | |
| − | width: 95%;
| + | |
| − | height:100px;
| + | |
| − | background-color: yellow;
| + | |
| − | margin-bottom: 1%;
| + | |
| − | margin : auto;
| + | |
| − | }
| + | |
| − | .footer-item {
| + | |
| − | display: -webkit-flex;
| + | |
| − | display: flex;
| + | |
| − | background-color: cornflowerblue;
| + | |
| − | width: 80px;
| + | |
| − | height: 20px;
| + | |
| − | margin: 10px;
| + | |
| − | margin-bottom: 1%;
| + | |
| − | } | + | |
| − | </style> | + | |
| − | | + | |
| − | | + | |
| − | </head>
| + | |
| − | <body>
| + | |
| − | <div class="wrapper"> | + | |
| − | <div class="header">
| + | |
| − | <div class="header-item">flex item 1</div>
| + | |
| − | <div class="header-item">flex item 2</div>
| + | |
| − | <div class="header-item">flex item 3</div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="flex-container">
| + | |
| − | <div class="flex-item">flex item 1</div>
| + | |
| − | <div class="flex-item">flex item 2</div>
| + | |
| − | <div class="flex-item">flex item 3</div>
| + | |
| − | </div>
| + | |
| − | <div class="footer">
| + | |
| − | <div class="footer-item">flex item 1</div>
| + | |
| − | <div class="footer-item">flex item 2</div>
| + | |
| − | <div class="footer-item">flex item 3</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </body>
| + | |
| | </html> | | </html> |
