您的位置：首页 > Web前端 > CSS

符合SEO标准的div+css页面参考

2007-09-16 09:47 357 查看
下面的部分是著名设计师阿捷发表的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;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css div SEO 休闲 页面
相关文章推荐
新的分享
章节导航