使用

元素的 HTML 布局

注释：

元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个

元素来创建多列布局：

#header {
    
 background-color:#1aaa11;
    
 color:white;
    
 text-align:center;
    
 padding:5px;

}

#nav {
    
 line-height:30px;
    
 background-color:#eeeeee;
    
 color:#faaaff;
    
 height:300px;
    
 width:100px;
    
 float:left;
    
 padding:5px;
 
}

#section {
    
 width:350px;
    
 float:left;
    
 padding:10px;
  
}

#footer {
    
 background-color:#166611;
    
 color:white;
    
 clear:both;
    
 text-align:center;
    
 padding:5px;
  
}





天华信息教育


第一组

第二组

第三组



这是标题

这是内容


这是内容



天华信息教育

HTML基础教程：div元素实现布局

HTML5 语义元素

header 定义文档或节的页眉

nav 定义导航链接的容器

section 定义文档中的节

article 定义独立的自包含文章

aside 定义内容之外的内容（比如侧栏）

footer 定义文档或节的页脚

details 定义额外的细节

summary 定义 details 元素的标题

header {
    
 background-color:#1aaa11;
    
 color:white;
    
 text-align:center;
    
 padding:5px;
 
}

nav {
    
 line-height:30px;
    
 background-color:#eeeeee;
    
 color:#faaaff;
    
 height:300px;
    
 width:100px;
    
 float:left;
    
 padding:5px;
 
}

section {
    
 width:350px;
    
 float:left;
    
 padding:10px;
  
}

footer {
    
 background-color:#166611;
    
 color:white;
    
 clear:both;
    
 text-align:center;
    
 padding:5px;
  
}
    




天华信息教育


第一组

第二组

第三组



这是标题

这是内容


这是内容



天华信息教育

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！