DIV+CSS三行两列经典布局

这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在《网页设计师 》上的,一个非常经典的布局,在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下(在原代码的基础上作了一定规范整理):   
      
<html>  
<head>  
<metahttp-equiv='Content-Type' content="text/html; charset=gb2312">  
<title>SEO参考:XHTML之经典三行两列布局- seobbs.net</title>  
<style type="text/css">  
 
body {  
    background: #999;  
    text-align: center;  
    color:#333;  
    font-family:Verdana,Arial, Helvetica, sans-serif;  
}  
 
a:link,visited {color:#004592;text-decoration:none;}  
a:hover {color:#004592;text-decoration:underline;}  
a:active {color:#004592;text-decoration:none;}  
 
img {border:0px;}  
 
#header {  
    margin-right: auto;  
    margin-left: auto;  
    padding: 0px;  
    width: 776px;  
    background: #EEE;  
    height: 60px;  
    text-align: left;  
}  
 
#contain {  
    margin-left: auto;  
    margin-right: auto;  
    width: 776px;  
}  
 
#mainbg {  
    float: left;  
    padding: 0px;  
    width: 776px;  
    background: #60A179;  
}  
 
#right {  
    float:right;  
    margin: 2px0px 2px0px;  
    padding: 0px;  
    width: 574px;  
    background: #ccd2de;  
    text-align:left;  
}

#left {  
    float: left;  
    margin: 2px 2px0px0px;  
    padding: 0px;  
    background: #F2F3F7;  
    width: 200px;  
    text-align:left;  
}  
 
#footer {  
    clear:both;  
    margin-right: auto;  
    margin-left: auto;  
    padding: 0px;  
    width: 776px;  
    background: #EEE;  
    height: 60px;  
}  
 
.text {margin:0px;padding:20px;}  
 
</style>  
 
</head>  
 
<body>  
 
<div id="header">header</div>  
 
<div id="contain">  
    <div id="mainbg">  
        <div id="right">  
            <div class="text">text<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p></div>  
        </div>  
        <div id="left">  
            <div class="text">left</div>  
        </div>  
    </div>  
</div>  
 
<div id="footer">footer</div>  
 
</body>

</html> 
 
 
页面样式图见下页图示

页面实现居中等XHTML技术分析请到我编辑整理的帖子 ,或《网页设计师 》查看,效果演示及
代码:http://www.seobbs.net/xhtml32.html    
 
    下面从SEO角度分析这个布局的优势:   
    我们先按网页设计惯例来看页面中的内容分布,一般情况下,头部(A区)为站点导航,底部
 (D区)为辅助导航及版权信息等,左侧(B区)会放搜索、列表、排行等功能性内容,核心内容
就集中在右侧(C区)。   
    如上图标识所示,按传统的布局,代码编写顺序是“A->B->C->D”,也可以理解为“功能->功能
->核心内容->功能”。   
    都知道,搜索引擎蜘蛛爬行时,是按着页面代码顺序自上而下的,这种情况下蜘蛛很难最快
的爬行到核心内容;而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回,抓取
到的是与其他页面一样的功能内容时,这个页面就成为相似网页。   
    为了避免这样的情况,包括新浪 、搜狐 、网易 在内的很多网站(可能也包括你^_^),都
在设计时将页面中B区和C区对调。   
    再来看本布局方式,页面代码顺序是“A->C->B->D”,按内容分布可以理解为“功能->核心内容
->功能->功能”,在不改变页面展示的情况下,将核心内容部分放到了前面。   
    这样,蜘蛛爬行时就能在最短时间内索引到网页的核心内容。   
    再加上XHTML标准设计代码精简的优势,蜘蛛爬行的效率和质量都会很高,也会更受蜘蛛欢迎
的。

时间: 2024-11-02 16:41:14

DIV+CSS三行两列经典布局的相关文章

SEO参考:DIV+CSS三行两列经典布局

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在<网页设计师>上的,一个非常经典的布局,在IE.Mozilla和Opera浏览器中均可以实现居中和高度自适应. 这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在<网页设计师>上的,一个非常经典的布局,在IE.Mozi

典型的DIV+CSS三行二列居中高度自适应布局

css|自适应 如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) 首先先按这里看实际运行效果,这个页面在mozilla.opera和IE浏览器中均可以实现居中和高度自适应.我们来分析代码: CSS: body{background:#999;text-align:center;color: #333;font-family:arial,verda

css 自适应高度的两列页面布局实现方法

最大宽度的样式 通过将 "margin: 1em 5%" 修改为 "margin: 0" 可以很容易的切换到最大宽度的样式    代码如下 复制代码 #container { margin: 0; /* changed from 1em 5% */ background-color: #FFF; background-image: url(background.jpg); background-repeat: repeat-y; border: 1px solid

用网页标准DIV+CSS创建固定宽度的网页布局

css|标准|创建|网页 用 XHTML 和 CSS 实现两列或三列页面布局的各个方面.到目前为止,所有例子都使用流式布局(也就是布局会自动扩展和适应浏览器窗口的宽度).现在是时候考虑另外一种主要的页面布局方法了,这种布局方法是固定宽度布局. 很多 Web 构建人员倾向于使用固定宽度的布局进行页面设计,因为它们能生成精确且可预知的结果.这种方法与打印布局非常接近,对于设计人员和访问者来说都是一个很重要的舒适因素:另外,对于包含很多大图片和其它元素的内容,由于它们在流式布局中不能很好地表现,因此固

DIV+CSS常用的Html网页布局代码

单行一列 以下是引用片段: body { margin: 0px; padding: 0px; text-align: center; }  #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 两行一列 以下是引用片段: body { margin: 0px; padding: 0px; text-align: center;}  #content-top { margin-left:auto

div+css浮在右上角的布局示例

div+css浮在右上角的布局示例 以下是代码:<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Free CSS Template 8</title> <style type="text/css" media="screen&qu

DIV+CSS创建三栏网页布局方法介绍

三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.        绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页.     现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方

DIV+CSS实现非常简单的一行两列网页布局

css|网页 CSS代码: .main{width:800px;/* 总的宽度 */background:red;}.main .col1{float:left;/* 这个是关键的地方 让col1往左浮动,这样它的后面(右边)就可以放置别的元素(别的元素:可以是div,图片,文字等) */width:300px;height:300px;background:#eee;border:1px solid #ccc;}.main .col2{float:left;/* 这个是关键的地方 让col2也

css div 实例三行三列教程

 代码如下 复制代码 <!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=&qu