静态页面初步解决方案（待优化）
CSS代码：
<style type="text/css">
html, body{ margin:0; height:100%; width: 1000px;}
p{font-family: "黑体"; margin: 0;}
#div1
{
width:1000px;
height:50px;
}
.logo
{
float: left;
width:400px;
height: 50px;
text-align: center;
}
.search
{
float: right;
width: 400px;
height: 50px;
text-align: center;
}
.search form input
{
font-size: 15px;
padding-left: 5px;
float: left;
width: 300px;
height: 25px;
border-radius: 3px;
border:1px salmon lightblue;
background-color: lightgrey;
}
#div2
{
width:1000px;
height:40px;
}
#div3
{
width:1000px;
height: 463px;
}
#div4
{
width:1000px;
height:200px;
}
.div4_inner01
{
float: left;
height:100%;
width:480px;
padding-left: 20px;
}
.div4_inner01 ul li a
{
font-size: 13px;
font-family: "arial narrow";
line-height: 22px;
text-decoration: none;
color: black;
}
.div4_inner02,.div4_inner03
{
float: left;
height:100%;
width:220px;
padding-left: 30px;
}
#div5
{
width:980px;
height: 230px;
padding-left: 20px;
}
.div5_inner
{
height: 100%;
width: 220px;
float: left;
/* margin: auto; */
text-align: center;
padding: 0 10px;
}
.div5_inner p
{
font-family: "黑体";
font-size: 12px;
margin: 0 0;
text-align: left;
color: gray;
line-height: 20px;
}
#div6
{
width:1000px;
height: 200px;
/* padding: 15px; */
overflow: hidden;
}
.div6_inner01
{
float: left;
height:200px;
width:470px;
padding: 0 15px;
background-color: lightgray;
}
.div6_inner02,.div6_inner03
{
float: left;
height: 200px;
width:220px;
padding: 0 15px;
background-color: lightgray;
}
#div7
{
width:1000px;
height: 10px;
margin-top: 20px;
}
.div7_inner1
{
float:left;
width: 300px;
padding-left: 30px;
}
.div7_inner2
{
float:right;
width: 400px;
text-align: right;
}
#div2 ul
{
display: block;
list-style-type: none;
margin: 0 0;
padding: 0 0;
background-color: black;
height:100%;
width:100%;
text-align: center;
}
#div2 ul li
{
display: block;
float:right;
border-right: 1px solid white;
width:12%;
height:100%;
text-align: center;
border-collapse: collapse;
vertical-align: middle;
/* padding-top: 6px; */
}
#div2 ul li a
{
display:inline-block;
width: 100%;
height:100%;
line-height:35px;
text-align: center;
/* vertical-align:middle; */
font-size: 16px;
font-family: "黑体";
color: white;
text-decoration: none;
}
#div2 ul li a:link{}
#div2 ul li a:visited
{
}
#div2 ul li a:hover
{
color:blue;
background-color: lightcoral;
}
#div2 ul li a:active{}
</style>
html body代码如下：
<body>
<div id="div1">
<div class="logo">
<img src="img/logo.png" >
</div>
<div class="search">
<form action="" method="">
<input type="search" name="" placeholder="search..." />
<img src="img/search.png" style="float: left;height: 25px;width: 30px;" >
</form>
</div>
</div>
<div id="div2">
<ul>
<li><a href="">集团介绍</a></li>
<li><a href="">集团介绍</a></li>
<li><a href="">集团介绍</a></li>
<li><a href="">集团介绍</a></li>
<li><a href="">集团介绍</a></li>
<li><a href="">集团介绍</a></li>
<li><a href="">集团介绍</a></li>
<li><a href="">集团介绍</a></li>
</ul>
</div>
<div id="div3">
<img src="img/banner.png" >
</div>
<div id="div4">
<div class="div4_inner01">
<p>新闻资讯</p>
<ul>
<li><a href="">第一条新闻</a></li>
<li><a href="">第一条新闻</a></li>
<li><a href="">第一条新闻</a></li>
<li><a href="">第一条新闻</a></li>
<li><a href="">第一条新闻</a></li>
<li><a href="">第一条新闻</a></li>
</ul>
</div>
<div class="div4_inner02" style="background-color: lightgrey;">
<p>卧龙介绍</p>
</div>
<div class="div4_inner03">
<p>人才招聘</p>
</div>
</div>
<div id="div5">
<p>卧龙市场</p>
<div class="div5_inner">
<img src="img/image.png" >
<p>交通轨道：由于主要采用电气牵引，而且轮轨摩擦力小</p>
</div>
<div class="div5_inner">
<img src="img/image.png" >
<p>交通轨道：由于主要采用电气牵引，而且轮轨摩擦力小</p>
</div>
<div class="div5_inner">
<img src="img/image.png" >
<p>交通轨道：由于主要采用电气牵引，而且轮轨摩擦力小</p>
</div>
<div class="div5_inner">
<img src="img/image.png" >
<p>交通轨道：由于主要采用电气牵引，而且轮轨摩擦力小</p>
</div>
</div>
<div id="div6">
<div class="div6_inner01">
<p>产品中心</p>
<hr color="brown"/>
</div>
<div class="div6_inner02">
<p>技术研发</p>
<hr color="brown"/>
</div>
<div class="div6_inner03">
<p>网络营销</p>
<hr color="brown"/>
</div>
</div>
<div id="div7">
<div class="div7_inner1">
<p>网站地图|联系我们|关注卧龙|采购入口</p>
</div>
<div class="div7_inner2">
<p>版权所有，盗版必究</p>
</div>
</div>
</body>
整体效果如下：
wangye.png
网友评论