相关文章
网站设计从“一大把”看中小企业如何进行网络推广
网站设计每天多学一点 博客的101个坚持
网站设计茫茫网海 增进Blog人气十大方法 (上)
网站制作大中型网站运营关键词简介：规模点
网站建设推广感悟：理性推广与积极推广
北京网站制作上万流量的方法关键揭密
网站设计外贸公司网站应该注意的几个细节
北京网页设计人淡如菊整理的100款群发软件 免费赠送给做站的朋友
北京网站制作Google搜索引擎优化秘籍正文分析错误
北京网站设计怎样为你的WEB2.0创业进行营销
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站推广 >> 网站建设SEO参考：DIV CSS三行两列经典布局
网站建设SEO参考：DIV CSS三行两列经典布局
这个XHTML1标准的DIV CSS布局是著名网页设计师阿捷2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在阿捷的代码基础上作了部分修改）： ＜html＞ ＜head＞ 网站设计＜meta http-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; } #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: 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; 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”＞＜p＞核心内容＜/p＞＜/div＞ ＜/div＞ 北京网站建设 www.qitongnet.com＜div id=”left”＞ ＜div class=”text”＞ 企通互联left＜/div＞ ＜/div＞ ＜/div＞ ＜/div＞ ＜div id=”footer”＞footer 北京网站设计＜/div＞ ＜/body 北京网站制作＞ ＜/html＞ 页面样式图：
页面实现居中等XHTML技术分析请到我编辑整理的帖子，或《网页设计师》查看，效果演示及代码下载 下面从SEO角度分析这个布局的优势： 我们先按网页设计惯例来看页面中的内容分布，一般情况下，头部（A区）为站点导航，底部（D区）为辅助导航及版权信息等，左侧（B区）会放搜索、列表、排行等功能性内容，核心内容就集中在右侧（C区）。 如上图标识所示，按传统的布局，代码编写顺序是“A->B->C->D”，也可以理解为“功能->功能->核心内容->功能”。网站制作 |
||
