html三⾏两列列表,DIV+CSS三⾏两列经典布局
开抢了！双11创业者优选服务！
这个XHTML1标准的DIV+CSS布局是著名⽹页设计师阿捷2004年发布在《⽹页设计师 》上的，⼀个⾮常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和⾼度⾃适应。完整代码如下(在原代码的基础上作了⼀定规范整理)：
SEO参考:XHTML之经典三⾏两列布局- seobbs
body {
background: #999;
text-align: center;
color:#333;
font-family:Verdana,Arial, Helvetica, sans-serif;
t和a的拼读有几个声调}
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;
}
switch游戏什么意思#mainbg {
float: left;
padding: 0px;
width: 776px;
background: #60A179;
}
#right {
float:right;html个人网页完整代码div+css
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;eclipse运行jsp文件
padding: 0px;
width: 776px;
background: #EEE;
height: 60px;
}
.text {margin:0px;padding:20px;}
header
text
段落
段落
段落
段落
段落
left
footer
页⾯样式图见下页图⽰
页⾯实现居中等XHTML技术分析请到我编辑整理的帖⼦ ，或《⽹页设计师 》查看，效果演⽰及代码：
下⾯从SEO⾓度分析这个布局的优势：
我们先按⽹页设计惯例来看页⾯中的内容分布，⼀般情况下，头部(A区)为站点导航，底部
(D区)为辅助导航及版权信息等，左侧(B区)会放搜索、列表、排⾏等功能性内容，核⼼内容
就集中在右侧(C区)。
如上图标识所⽰，按传统的布局，代码编写顺序是“A->B->C->D”，也可以理解为“功能->功能->核⼼内容->功能”。
都知道，搜索引擎蜘蛛爬⾏时，是按着页⾯代码顺序⾃上⽽下的，这种情况下蜘蛛很难最快
的爬⾏到核⼼内容；⽽当页⾯代码过多的时候蜘蛛完全有可能没有爬⾏到核⼼内容就折回，抓取到的是与其他页⾯⼀样的功能内容时，这个页⾯就成为相似⽹页。
为了避免这样的情况，包括新浪 、搜狐 、⽹易 在内的很多⽹站(可能也包括你^_^)，都
在设计时将页⾯中B区和C区对调。
再来看本布局⽅式，页⾯代码顺序是“A->C->B->D”，按内容分布可以理解为“功能->核⼼内容->功能->功能”，在不改变页⾯展⽰的情况下，将核⼼内容部分放到了前⾯。
这样，蜘蛛爬⾏时就能在最短时间内索引到⽹页的核⼼内容。
再加上XHTML标准设计代码精简的优势，蜘蛛爬⾏的效率和质量都会很⾼，也会更受蜘蛛欢迎的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。