Bootstrap: http://getbootstrap.com
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <title>Site title</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> </head> <body> <header> <div class="container"> </div> </header><!-- End of header --> <div id="content"> <div class="container"> <form id="iform" name="iform" action="/test/video/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <button type="submit" class="btn btn-primary">Submit</button> </form> </div><!-- End of Wrapper --> </div><!-- End of content --> <footer> <div class="container"> footer </div> </footer><!-- End of footer --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <script> $(document).ready(function(){ }); </script> </body> </html> |
layout.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
body{font-family:Arial, Helvetica, sans-serif;} #header > .wrapper, #content > .wrapper, #footer > .wrapper{width:860px; margin:0 auto;} /* Header */ #header{height:191px;} #header > .wrapper{} #header > .wrapper > .top{height:53px;background:#dfdfdf;padding:0 58px;} #header > .wrapper > .middle{height:84px;padding:0 58px;} #header > .wrapper > .menu{height:47px; background:#d0000e;padding:0 58px;} /* Content */ #content{} /* Footer */ #footer{height:51px;} #footer > .wrapper{background:#e2e2e2; height:100%;padding:15px 58px;} |