html 标签布局,【html】HTML的布局标签

常用的布局标签

div

通常代表"盒子"，使用id或者class进行修饰

header

页面或者区域的头部

footer

页面或者区域的底部

nav

导航条

section

文档中的章节、版块(类似div，但是主要针对文档类区域)

aside

侧边栏

artical

文章、文档

例子实现

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

网易云阅读

头部区域

站点频道导航区   

频道导航  

首页幻灯片

  

主编推荐

  

精品图书

   

图书畅销榜   

男生图书

   

男生小说畅销榜   

   

网站地图

底部导航条

版权信息

@charset"utf-8";

/*由外至内，又上至下，由大至小*/

* {margin:0;padding:0;}

#wrapper {width:980px;margin:0px auto;border:1px red solid;} 

header{height:200px;background:#C9B7CA;}

#site-nav{height:40px;background:#ECC6C7;}

#index-col1 {}

#channel-nav{width:240px;height:380px;background:#0F0;float:left;}

#index-slide{width:720px;height:380px;background:#CCC;float:right;}

/*此处2个位块状元素，会占住一行*/

#editor-recommended{height:250px;background:#CDF9B3;clear:left;}

div.salerank{width:700px;height:530px;background:#EBF8D1;float:left;}

aside.salerank1{width:260px;height:530px;background:#A5B5DE;float:right;}

.site-map{height:240px;background:#ADDFF8;border-top:1px red solid;margin-top:100px;clear:both;}

.sitemap-con{width:980px;margin:40px auto;border:1px red solid;height:150px;}

footer{background:#0F0;border-top:1px red solid;}

#footer-con{width:980px;margin:30px auto;border:1px red solid;height:100px;}

#footer-nav{height:30px;background:#DEAD6B;}

#copy{text-align:center;}