符合SEO标准的div+css页面参考
下面的部分是著名设计师阿捷发表的div+css三行两列网页参考,星箭在此基础上做了小小的改动,以前乐思蜀也对阿捷的这个经典布局案例进行过修改,将左右代码互换,达到主体内容显示在前更方便搜索引擎抓取分析页面最重要内容的SEO目的,星箭也对阿捷的这个案例进行一番简单修改,主要是将左右代码互换,加入了h1,h2标签,对文字列表使用
符合SEO标准的div+css页面参考
html部分:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
header
right
1
1
1
1
1
left
- leftnav
- leftnav
- leftnav
- leftnav
footer
css部分:
/*全局*/
body{ background:#999; text-align:center; color: #333; font-family:arial,"宋体",verdana,sans-serif; } /*头部*/ #header{width:776px;margin-right: auto;margin-left: auto; padding: 0px;background: #EEE;height:60px;text-align:left;} /*主体内容*/ #contain{margin-right: auto;margin-left: auto;width: 776px;} #mainbg{width:776px;padding: 0px;background: #60A179;float: left;} .text{margin:0px;padding:20px;} .text h1,h2{margin:0;padding:0;list-style:none;} /*右侧*/ #right{float: right; margin: 2px 0px 2px 0px;padding:0px; width: 574px; background: #ccd2de;text-align:left;} /*左侧导航*/ #left{float: left; margin: 2px 2px 0px 0px; padding: 0px; background: #F2F3F7;width: 200px;text-align:left;} /*底部*/ #footer{clear:both;width:776px;margin-right: auto;margin-left: auto; padding: 0px;background: #EEE;height:60px;}
下页:

