淘寶導購網(wǎng)站怎么做it培訓機構怎么樣
大家每一次在寫網(wǎng)頁的時候會不會因為布局而困擾今天就給大家?guī)硪粋€我自己親自編寫的網(wǎng)頁的基本的模板大家可以直接去利用，大家也可以利用自己的想法去做空間的美化和完善。
源碼：
html:
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/default-style.css"></head><body><div class="container"><header>XXX官網(wǎng)</header><nav><ul><li><a href="#">導航項</a></li><li><a href="#">導航項</a></li><li><a href="#">導航項</a></li><li><a href="#">導航項</a></li><li><a href="#">導航項</a></li><li><a href="#">導航項</a></li></ul></nav><main><!-- <div class="sidebar">左側邊欄</div> --><!-- 使用時開啟 --><div class="content">網(wǎng)頁主體</div><!-- <div class="sidebar">右側邊欄</div> --><!-- 使用時開啟 --></main><footer>版權信息</footer></div></body>
</html>css:
* {margin: 0;padding: 0;
}body {margin: 0;padding: 0;font-family: Arial, sans-serif;
}.container {width: 100%;display: flex;flex-direction: column;height: 100vh;
}header {background-color: #000;color: #fff;padding: 10px;text-align: center;
}main {display: flex;flex: 1;
}.sidebar {flex: 1;background-color: #f5f5f5;padding: 20px;}.content {flex: 3;padding: 20px;
}footer {background-color: #000;color: #fff;text-align: center;padding: 10px;
}ul {max-width: 1000px;display: flex;margin: auto;display: flex;justify-content: center;
}ul li {margin-left: 50px;list-style-type: none;list-style-position: inside;height: 40px;line-height: 40px;
}ul li a {text-decoration: none;
}代碼中的左右側邊欄可根據(jù)需要打開?