Aug 16, 2007
下面的部分是著名设计师阿捷发表的div+css三行两列网页参考，星箭在此基础上做了小小的改动，以前乐思蜀也对阿捷的这个经典布局案例进行过修改，将左右代码互换，达到主体内容显示在前更方便搜索引擎抓取分析页面最重要内容的SEO目的，星箭也对阿捷的这个案例进行一番简单修改，主要是将左右代码互换，加入了h1,h2标签，对文字列表使用<li>等。
符合SEO标准的div+css页面参考
html部分：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div+css参考</title>
<meta name="keywords" content="div+css,div+css SEO,div+css参考" />
<meta name="description" content="介绍符合SEO标准的div+css页面参考，对阿捷的三行两列div+css案例进行修改，使之更符合SEO的需求" />
<meta name="author" content="星箭" />
<meta name="copyright" content="星箭SEO" />
<link href="css.css" rel="stylesheet" type="text/css" />
<base target="_blank" />
</head>
<body>
<!--头部-->
<div id="header">header</div>
<!--头部结束-->
<!--主体-->
<div id="contain">
<div id="mainbg">
<!--右侧-->
<div id="right">
<div class="text">
<h1>right</h1>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</div>
</div>
<!--右侧结束-->
<!--左侧-->
<div id="left">
<div class="text">
<h2>left</h2>
<ul>
<li>leftnav</li>
<li>leftnav</li>
<li>leftnav</li>
<li>leftnav</li>
</ul>
</div>
</div>
<!--左侧结束-->
</div>
</div>
<!--主体结束-->
<!--底部-->
<div id="footer">footer</div>
<!--底部结束-->
</body>
</html>
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;}
6 Comments, Comment or Ping
weiwei
呵呵 好文,我就不客气了 收藏了先 ....
Aug 17th, 2007
星箭
楼上的最近哪发财呢？
Aug 17th, 2007
weiwei
哎 還发财呢 都吥知道明天是什么了
从那天以后,我的生活似乎失去了意义....
Aug 18th, 2007
ben_net
学习拉
Nov 1st, 2007
星箭
那天以后？？？
Nov 3rd, 2007
北京seo-赵志辉
今天再次搭建一个网站首页，还是运用div+css技术，有一些标准不确定，就又跑老大这里溜达看看，嘿嘿。。谢了哈。。
Mar 10th, 2008
Reply to “符合SEO标准的div+css页面参考”