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

最新推荐文章于 2025-05-18 14:14:26 发布

原创最新推荐文章于 2025-05-18 14:14:26 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #css #stylesheet #float #xhtml #html

网络相关专栏收录该内容

36 篇文章

订阅专栏

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