肉渣教程

CSS 站点布局

上一节 下一节

网页布局

网页一般被分为headers(页首)、menus(菜单导航)、content(内容部分)、footers(页脚)这几部分:

headers
nav menus
content
main content
content
footers

Header 页首

Header页首部分一般是在页面的最上面,这一部分里一般放置页面的标题、logo等。

headers
.header {
    background: #eef8f8;
    text-align: center;
    padding: 40px;
}

运行一下

Nav Menu 菜单导航栏

菜单导航栏是根据站点结构和用户使用逻辑而设计的一组链接,帮助用户更快捷地到达站点的各个页面。

/* 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;
}

运行一下

Content内容部分

内容部分可以做成不只一栏,但常用的有三种:一栏、两栏、三栏,其中两栏和三栏用的居多。内容部分,可以做成自适应的,也可以做成固定宽度的。移动端优先使用自适应,PC端建议使用固定宽度(因具体项目需求而定)。如下,所示,演示利用float浮动元素而实现的三栏,不过这只是示例而已,并非推荐的最佳实践方式。

content
main content
content
#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;
}

运行一下

Footer 页脚部分

所谓的页脚部分就是页面的底部,这里一般会放置一些附加信息,诸如:版权声明、联系信息、组织介绍、ICP备案号等。

footers
.footer {
    background-color: #eef8f8;
    text-align: center;
    padding: 20px 0;
}

运行一下


最终就达到如下这种布局:

headers
nav menus
content
main content
content
footers

CSS 站点布局

上一节 下一节