标准的三栏布局

三栏布局中使用语义化方式的例子
　　让我来通过这个简单的例子讲解一下如何为经典的三栏布局使用语义化方式命名:

　　使用语义化方式为CSS命名可以像这样:

Example Source Code []

#container{…}
/*—- Top section —-*/
    #header{…}
    #navbar{…}
    /*—- Main —-*/
    #menu{…}
    #main{…}
    #sidebar{…}
    /*—- Footer —-*/
    #footer{…}

Container
　　“#container“ 就是将你页面中的所有元素包在一起的部分，这部分你还可以命名为: “wrapper“, “wrap“, “page“. 
Header
　　“#header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分你还可以命名为:”top“, “logo“, “page-header” (或 pageHeader). 
Navbar
　　“#navbar“等同于横向的导航栏，是最典型的网页元素。这部分你还可以命名为:“nav”, “navigation”, “nav-wrapper”. 
Menu
　　“#Menu”区域包含一般的链接和菜单，这部分你还可以命名为: “sub-nav “, “links“. 
Main
　　“#Main”是网站的主要区域，如果是博客的话它将包含你的日志。这部分你还可以命名为: “content“, “main-content” (or “mainContent”)。 
Sidebar
　　“#Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分你还可以命名为: “sub-nav“, “side-panel“, “secondary-content“. 
Footer
　　“#Footer”包含网站的一些附加信息，这部分你还可以命名为: “copyright“.