一、html文件
<html>
<head>
<meta charset="UTF-8">
<title>卧龙控股</title>
<link rel="stylesheet" type="text/css" href="css/zuoye.css"/>
</head>
<body>
<div id="div1">
<img src="img/logo.JPG" />
<form>
<input type="text" name="" id="" value="" />
<input type="submit" value="搜索"/>
</form>
</div>
<div id="div2">
<table>
<tr>
<td>集团项目</td>
<td>产品中心</td>
<td>卧龙市场</td>
<td>技术研发</td>
<td>国际合作</td>
<td>投资者关系</td>
<td>新闻资讯</td>
<td>人力资源</td>
</tr>
</table>
<img src="img/02.jpg"/>
</div>
<div id="div3">
<div id="a">
<h4>公司简介</h4>
<p>卧龙控股集团有限公司创建于1984年，经过20多年的发展，集团现拥有2家上市公司（30家控股子公司、员工7000余人、总资产70亿元，主要经营制造业、房地产业、商贸金融投资业三大产业。</p>
</div>
<div id="b">
<h4>公司目标</h4>
<p>卧龙正按照集团“十一五”发展规划，加快实现“三步走”发展战略，努力实现资产规模与销售规模“双百亿”目标，基本建成市场国际化、资本多元化、管理现代化的高科技、高成长、高效益的大型企业集团。</p>
</div>
<div id="c">
<h4>商标含义</h4>
<p>标志造型由英文"wolong"组成.形成一条昂首的巨龙,给人一种运筹帷幄、蓄势待发之势，象征卧龙实力雄厚、发展迅猛、卓越领先。</p>
</div>
</div>
<div id="div4">
<h4>卧龙市场</h4>
</div>
<div id="d">
<img src="img/03.jpg"/>
<img src="img/04.jpg"/>
<img src="img/05.jpg"/>
<img src="img/06.jpg"/>
</div>
<div id="div5">
<div id="a1">
<h4>产品中心</h4>
<hr />
<ul>
<li>汽车电机</li>
<li>日用电机</li>
<li>特种电机</li>
<li>大功率电机</li>
<li>电工设备</li>
</ul>
<ul>
<li>工业驱动和自动化</li>
<li>高压变频和系统集成</li>
<li>混泥土搅拌机</li>
<li>电动车辆</li>
</ul>
<ul>
<li>电池电源</li>
<li>输变电设备</li>
<li>楼盘信息</li>
<li>金融信息</li>
</ul>
</div>
<div id="a2">
<h4>技术研发</h4>
<hr />
<ul>
<li>科技力量</li>
<li>现金设备</li>
<li>研发创新</li>
<li>工艺流程</li>
</ul>
</div>
</div>
<div id="div6">
<p>Copyrights © 2013 卧龙控股集团 | 版权所有 </p>
</div>
</body>
</html>
二、css样式
body{
margin: auto;
width: 800px;
height: 600px;
}
#div1{
width: 100%;
height:50px;
margin: auto;
}
#div1 img{
float: left;
}
#div1 form{
padding-top: 20px;
float: right;
}
#div2{
width: 100%;
height:400px;
}
#div2 table{
width: 100%;
height: 60px;
background-color: #000000;
color: #DDDDDD;
font-size: 18px;
text-align: center;
}
#div2 img{
width: 100%;
height: 360px;
}
#div3{
width: 100%;
height: 230px;
margin: 20px;
}
#a{
height: 230px;
width: 30%;
float: left;
margin-right: 20px;
}
#b{
height: 230px;
width: 30%;
float: left;
margin-right: 20px;
}
#c{
height: 230px;
width: 30%;
float: left;
}
#div4{
width: 100%;
height: 50px;
margin:20px;
}
#d{
width: 100%;
height: 100px;
}
#d img{
width: 20%;
height: 100%;
margin:20px;
float:left
}
#div5{
width: 100%;
height: 180px;
margin: 20px;
float: left;
}
#div5 ul{
float: left;
margin-right: 10px;
}
#a1{
width:60%;
margin: 10px;
float: left;
}
#a2{
width: 20%;
float: right;
margin: 10px;
margin-right: 80px;
}
#div6{
/*width:100%;*/
margin-top:30px;
height:20px;
float:right;
}
三、效果
