怎么写DIV和CSS
<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>
这个样子成吧?
如果搂住能看明白我就不解释了~
<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>
具体解释：
1：先定义容器
在最外层先定义个div容器，设置为相对定义，定义好宽高，然后在此容易之中，在定义三个div，竖直排列，宽度和外层容易相同，高度为外层容器除去边框的高度除以3，此为二级容器
2：定义标题栏
在1步骤中定义好的三个二级容器中各定义一个div，宽度和二级容器一样，高度为二级容器的五分之一（这个高度根据具体的需要设置），然后在里面在定义两个div，左侧的用float:left定位在左侧，右侧的用float:right定位在右侧
3：定义具体内容div
有多少个格子，定义多少个div，每个div宽度为二级容器的四分之一，然后在每个div上都加上属性float:left，并且给每个div加上边框，行高，字体居中等属性即可
<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>
