图一怎么调到图二的效果
以下为图一的HTML和css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../css/qiche.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li class="first"><a href="indeex.html"><span class="number">01</span><span> 网 站 首 页
</span><br />HOME</a></li>
<li><a href="indeex.html"><span class="number">02</span><span> 汽车租赁 </span><br
/>Rental</a></li>
<li><a href="indeex.html"><span class="number">03</span><span> 汽车配件 </span><br
/>Parts</a></li>
<li><a href="indeex.html"><span class="number">04</span><span> 汽车销售 </span><br
/>Sale</a></li>
<li><a href="indeex.html"><span class="number">05</span><span> 汽车维修 </span><br
/>Repare</a></li>
<li><a href="indeex.html"><span class="number">06</span><span> 汽车咨询 </span><br
/>Consult</a></li>
</ul>
</div>
<h1> </h1>
</div>
<div id="container">
<div id="content">
<h2>推荐车型<span>::Recommended</span></h2>
<div class="inner">
<ul>
<li><img src="../photo/car-2.png"/>
<p>
<strong>高尔夫</strong><br />
Golf 1.6<br />
price<br />
<span>$139.00/天</span><br />
<a href="car-2.png">预 订</a>
</p>
</li>
<li><img src="../photo/car-3.png"/>
<p>
<strong>波罗</strong><br />
Polo 1.4<br />
price<br />
<span>$239.00/天</span><br />
<a href="car-3.png">预 订</a>
</p>
</li>
<li><img src="../photo/car-4.png"/>
<p>
<strong>福克斯</strong><br />
Focus 2.4<br />
price<br />
<span>$329.00/天</span><br />
<a href="car-4.png">预 订</a>
</p>
</li>
<li><img src="../photo/car-5.png"/>
<p>
<strong>科鲁兹</strong><br />
Cruce 3.0<br />
price<br />
<span>$459.00/天</span><br />
<a href="car-5.png">预 订</a>
</p>
</li>
</ul>
<div class="clear"></div>
</div>
<h2>备用零件<span>::Spare Parts</span></h2>
<div class="inner">
<ul>
<li>
<img src="../photo/car-6.png"/>
<p>
<strong>维修扳手</strong><br />
HansFree-230<br />
price<br />
<span>$1234.00</span><br />
<a href="car-6.png">购 买</a>
</p>
</li>
<li><img src="../photo/car-7.png"/>
<p>
<strong>BFR轮毂</strong><br />
MDF-658<br />
price<br />
<span>$2345.00</span><br />
<a href="car-7.png">购 买</a>
</p>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="brand">
<ul>
<li><a href="#">Alfa Romeo</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Chevrolet</a></li>
<li><a href="#">Citroen</a></li>
<li><a href="#">Daewoo</a></li>
<li><a href="#">Fiat</a></li>
<li><a href="#">Ford</a></li>
<li><a href="#">Honda</a></li>
<li><a href="#">Jeep</a></li>
<li><a href="#">Land Rover</a></li>
<li><a href="#">Mazda</a></li>
<li><a href="#">Mercedes</a></li>
<li><a href="#">Mitsubishi</a></li>
<li><a href="#">Nissan</a></li>
<li><a href="#">Opel</a></li>
<li><a href="#">Peugeot</a></li>
<li><a href="#">Renault</a></li>
<li><a href="#">Rover</a></li>
<li><a href="#">Saab</a></li>
<li><a href="#">Toyota</a></li>
<li><a href="#">Volkswagen</a></li>
<li><a href="#">other</a></li>
</ul>
<img src="../photo/car-1.png"/>
</div>
</div>
<div id="footer">
<p>Hot Line:<br /><span>86-10-88888888</span></p>
<ul>
<li><a href="indeex.html">首页</a><a href="indeex.html">汽车租赁</a></li>
<li><a href="indeex.html">汽车配件</a>;</li>
<li><a href="indeex.html">汽车销售</a></li>
<li><a href="indeex.html">汽车维修</a></li>
<li><a href="indeex.html">汽车咨询</a></li>
</ul>
<p>Copyright Reseverd Artech.cn Term of service</p>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body{
background:url(../photo/background.png) repeat-x;
font:12px/18px Arial;
margin:0px;
}
#header{
width:790px;
margin:0 auto;
}
#menu{
background:url(top-menu-../photo/background.png) no-repeat;
height:39px;
}
#menu ul{
list-style-type:none;
margin:0;
padding:0;
}
#menu ul li{
float:left;
color:#fff;
}
.number{
font-size:30px;
font-weight:bold;
color:#CCC;
line-height:40px;
float:left;
padding-left:18px;
border-left:1px solid #CCC;
margin-left:18px;
margin-right:2px;
}
#menu li.first .number{
border-left:none;
margin-left:0;
}
#menu li a{
text-decoration:none;
color:#fff;
}
#menu .number:hover{
color:#F00;
}
h1{
background: url(../photo/h1.png) no-repeat;
height: 201px;
}
h1 span{
display:none;
}
#container{
width:780px;
margin:0 auto;}
#content{
width:580px;
float:left;}
#brand{
width:199px;
float:right;
background-color:#FFF;
position:relative;
padding-bottom:100px;
margin-top:-30px;}
#brand ul{
margin:0;
padding:0 10px;
list-style:none;
line-height:22px;
color:#CCC;}
#brand ul li{
border-bottom:1px solid #CCC;
padding-left:30px;
background:url(../photo/arror.png) no-repeat 15px center;}
#brand img{
position:absolute;
right:0;
bottom:-1px;}
#brand ul a{
text-decoration:none;
color:#666;}
#brand ul li:hover{
background:#333;
color:#F93;
text-align:right;}
#brand li a:hover{
background:#333;
color:#FFF;
text-align:right;}
h2{
background: #CCC;
color: #666;
height: 40px;
line-height: 40px;
}
.en{
color:#666;}
.inner ul{
margin:0px;
list-style:none;
}
.inner li{
float:left;
width:190px;
margin:0;}
.inner li p{
float:right;
margin-left:0px;}
.inner li a{
text-decoration:none;
background:#F60;
color:#FFF;
display:block;
text-align:center;}
.inner span{
color:#F90;
font-weight:bold;}
.clear{
clear:both;}
#footer{
background:url(../photo/footer-background.png) no-repeat;
height:100px;}
