网页一般被分为headers(页首)、menus(菜单导航)、content(内容部分)、footers(页脚)这几部分:
Header页首部分一般是在页面的最上面,这一部分里一般放置页面的标题、logo等。
.header { background: #eef8f8; text-align: center; padding: 40px; }
菜单导航栏是根据站点结构和用户使用逻辑而设计的一组链接,帮助用户更快捷地到达站点的各个页面。
/* Style the top navigation bar */ .topnav { overflow: hidden; background-color: #46acb6; } /* Style the topnav links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change color on hover */ .topnav a:hover { background-color: #eef8f8; color: black; }
内容部分可以做成不只一栏,但常用的有三种:一栏、两栏、三栏,其中两栏和三栏用的居多。内容部分,可以做成自适应的,也可以做成固定宽度的。移动端优先使用自适应,PC端建议使用固定宽度(因具体项目需求而定)。如下,所示,演示利用float浮动元素而实现的三栏,不过这只是示例而已,并非推荐的最佳实践方式。
#left_box { padding: 120px 0; width: 25%; float: left; text-align: center; } #middle_box { padding: 120px 0; width: calc(50% - 12px); float: left; text-align: center; padding:120px 0; margin:0 6px; } #right_box { padding: 120px 0; width: 25%; float: left; text-align: center; }
所谓的页脚部分就是页面的底部,这里一般会放置一些附加信息,诸如:版权声明、联系信息、组织介绍、ICP备案号等。
.footer { background-color: #eef8f8; text-align: center; padding: 20px 0; }
最终就达到如下这种布局: