DIV+css 如何实现左右分栏

html-css024

DIV+css 如何实现左右分栏,第1张

楼上的不懂就不要乱讲，iframe 不适合网站优化，因为frame里的内容百度谷歌等搜索引擎根本抓取不到；此外div可以设置高度和宽度。解决办法是：左右分栏，显然是一个div在左侧，一个div在右侧。左侧的div的css样式是：float：leftwidth70%右侧的div的css样式是：margin-left70%width:30%其他的你自己细微调一下。在这两个div下面，加上一个div清除左右侧浮动元素，比如，<div style="clear:both"></div>.就行了。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

<img style="position: absoluteright: 0top:0" src="small2.png" />

<img style="position: absoluteright: 0bottom:0" src="small3.png" />

3、浏览器运行index.html页面，此时一张图片被固定右上角，另一张图片被固定右下角。

是这样的，你把<span class="STYLE3" >MORE</span>这句写到“<strong><font color="#009933">商信</font>通”的前面<div align="left">的后面，然后给那个STYLE3的样式添一句 float：left就好了

代码如下：

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<style type="text/css">

<!--

.STYLE1 {

font-size: 14px

line-height: 20px

letter-spacing: 3px

}

.STYLE2 {

font-size: 12px

letter-spacing: 5px

}

.STYLE3 {

font-size: 10px

color: #cccccc

float:right

margin-top:7px

}

.STYLE7 {font-size: 14pxline-height: 20pxletter-spacing: 3pxcolor: #1F6989}

-->

</style>

</head>

<body>

<div id="wrapper">

<div align="center">

<table width="783" height="258" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<tr>

<td width="287" height="258" valign="top" style="padding-left:1px"><table width="293" border="0" cellspacing="10">

<tr>

<th width="271" height="160" scope="col"><table width="240" height="29" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="240" height="29" background="tb_top.gif" class="font14" style="padding-left:20px">

<div align="left"><span class="STYLE3" >MORE</span><strong><font color="#009933">商信</font>通

| <span class="STYLE2"><font face="Geneva, Arial, Helvetica, sans-serif">推荐商户</font></span>

</strong></div></td>

</tr>

</table>