下面的部分是著名设计师阿捷发表的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">
css部分:
- <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>
- 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;}