<html>
<head>
<style type="text/css">
.machine {
font-size: 12px
} .title {
height: 21px
width: 420px
margin: 1px 1px -1px 1px
border-style: solid
border-width: 1px
border-color: #CFCFCF
} .title_l {
padding: 2px
float: left
} .title_r {
padding: 2px
float: right
} .table {
width: 424px
} .table span {
margin: 1px
padding: 2px
float: left
display: block
width: 100px
text-align: center
background-color: #CAE1FF
} .clear {
clear: both
} .comment {
font-size: 8px
color: #8B7500
}
</style>
</head>
<body>
<div class="machine">
<div class="title">
<span class="title_l">包装机械</span>
<span class="title_r">更多</span>
</div>
<div class="clear">
</div>
<div class="table">
<span>打包机<em class="comment">HOT</em></span>
<span>真空包装机</span>
<span>封装机</span>
<span>缠绕机</span>
<span>贴标机</span>
<span>收缩机</span>
<span>纸箱成型机</span>
<span>套袋包装机</span>
<span>装盒机</span>
<span>装箱机</span>
</div>
<div class="clear">
</div>
<div class="title">
<span class="title_l">包装机械</span>
<span class="title_r">更多</span>
</div>
<div class="clear">
</div>
<div class="table">
<span>打包机</span>
<span>真空包装机</span>
<span>封装机</span>
<span>缠绕机<em class="comment">HOT</em></span>
<span>贴标机</span>
<span>收缩机</span>
<span>纸箱成型机</span>
<span>套袋包装机<em class="comment">HOT</em></span>
<span>装盒机</span>
<span>装箱机</span>
</div>
<div class="clear">
</div>
<div class="title">
<span class="title_l">包装机械</span>
<span class="title_r">更多</span>
</div>
<div class="clear">
</div>
<div class="table">
<span>打包机</span>
<span>真空包装机<em class="comment">HOT</em></span>
<span>封装机</span>
<span>缠绕机</span>
<span>贴标机</span>
<span>收缩机</span>
<span>纸箱成型机</span>
<span>套袋包装机</span>
<span>装盒机</span>
<span>装箱机</span>
</div>
<div class="clear">
</div>
</div>
</body>
这个样子成吧?
如果搂住能看明白我就不解释了~
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0
padding:0
border:0
}
.table{
width:670px
height:135px
margin:0 auto
overflow:hidden
}
.table tbody{
border:0
}
.table,tr,td{
border:1px solid #666
}
.table >tr:nth-child(1) td{
width:160px
}
.table >tr:nth-child(2) td{
width:370px
}
.table >tr:nth-child(3) td{
width:140px
}
.tableTd1{
height:32px
}
.tableTd2{
height:98px
}
</style>
</head>
<body>
<table class="table" cellspacing="0">
<tr>
<td rowspan="3">1</td>
<td class="tableTd1">2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2" class="tableTd2">4</td>
<td >5</td>
</tr>
<tr>
<td>8</td>
</tr>
</table>
</body>
</html>
用一个div作为主框架，嵌套图片和文字内容两个div，同时使用浮动功能，代码步骤如下：
1.先输入：<div class="header">，建立一个主框架，如下图红框所示；
2.设置框架的样式，根据需要设置即可，如下图红框所示，代码如下：
<style>
.header{
width: 960px /*这个div根据你写的替换就行了*/
height: 40px
margin: 5px auto
background-color: white /*没用你去掉就行*/
}
3.然后嵌套图片：<img src="要放在左边的图片链接">，如下图红框所示；
4.设置图片的样式和位置，根据需求设置即可，如下图红框所示，示例代码如下：
.header img{
height: 40px
float: left
}
5.然后写一个文字内容的div，如下图红框所示，代码如下：<p>设为主页</p></div>；
6.设置文字的位置和样式等，示例代码如下：
.header p{
display: block
width: auto
line-height: 14px
background: url("sethome.png") no-repeat left center /*你的图标路径*/
padding-left: 20px
}
.header p a{
text-align: left
text-decoration: underline
color: red
font-size: 12px
}
</style>
7.对结果进行预览，如下图所示，图片在左，文字在右。
