大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用,大家也可以利用自己的想法去做空间的美化和完善。
源码:
html:
Document XXX官网 网页主体
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; }
代码中的左右侧边栏可根据需要打开
还没有评论,来说两句吧...