以下为示例代码，根据个人的需求调节以下表格的尺寸等设置即可， *** 作步骤如下：
2.鼠标左键全选<head>和</head>中间的内容，如下图红框所示；
3.快捷键”Delete“删除选中目标，如下图红框所示；
4.然后输入代码，设置表格属性，如下图红框所示；
5.输入完毕，将光标至于<body>和</body>中间那一行，如下图红框所示；
6.输入代码设置表格的行和列，如下图红框所示；
7.打完代码就可以对此html进行保存预览了，点击“是”按钮，如下图红框所示。
把图片调小,然后设置:
background-repeat: repeat或者直接在css里设置背景图的大小:
background-size:50%这样背景图片就可以排成两列 了
DIV+CSS三行两列经典布局
这个XHTML1标准的DIV+CSS布局是著名网页设计师2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在原代码的基础上作了一定规范整理）：
<html>
<head>
<meta http-equiv='Content-Type' content="text/html charset=gb2312">
<title>XHTML之经典三行两列布局 - seobbs.net</title>
<style type="text/css">
body
{ background: #999 text-align: center color: #333 fontfamily: Verdana, Arial, Helvetica, sans-serif }
a:link, visited
{color:#004592text-decoration:none}
a:hover {color:#004592text-decoration:underline}
a:active {color:#004592text-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: 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:0pxpadding: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>
效果演示及代码：www.st539.com/news_view.asp?id=123
SEO角度分析这个布局的优势：
我们先按网页设计惯例来看页面中的内容分布，一般情况下，头部（A区）为站点导航，底部（D区）为辅助导航及版权信息等，左侧（B区）会放搜索、列表、排行等功能性内容，核心内容就集中在右侧（C区）。
如上图标识所示，按传统的布局，代码编写顺序是“A->B->C->D”，也可以理解为“功能->功能->核心内容->功能”。
都知道，搜索引擎蜘蛛爬行时，是按着页面代码顺序自上而下的，这种情况下蜘蛛很难最快的爬行到核心内容；而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回，抓取到的是与其他页面一样的功能内容时，这个页面就成为相似网页。
为了避免这样的情况，包括新浪、搜狐、网易在内的很多网站（可能也包括你^_^），都在设计时将页面中B区和C区对调。
再来看本布局方式，页面代码顺序是“A->C->B->D”，按内容分布可以理解为“功能->核心内容->功能->功能”，在不改变页面展示的情况下，将核心内容部分放到了前面。
这样，蜘蛛爬行时就能在最短时间内索引到网页的核心内容。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）