<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
/* 大背景图片*/
body{
background-image:url("image/body_bg.jpg");
background-repeat:no-repeat;
background-position: top center;
}
/* 顶部导航栏*/
.nav ul{
float:left;
}
/* 顶部导航栏分为九部分*/
.nav ul li{
width:102px;
height:60px;
list-style: none;
float:left;
line-height:44px;
background-image:url("image/nav_bg.jpg");
background-repeat:repeat-x;
background-position:0 0;
padding-left:1px;
text-align:center;
}
.nav ul li.d1{
width:2px;
height:60px;
padding-top: 4px;
}
a{
text-decoration: none;
color:#fff;
}
/* 绿色食品图标*/
.logo{
width:980px;
height:120px;
margin:0 auto;
}
.logo img{
padding-top:17px;
}
/* 顶部导航栏大小且居中*/
.nav{
width:986px;
height:60px;
margin:0 auto;
}
/* 顶部导航栏左边缘*/
.nav .nav_left{
float:left;
width:20px;
height:60px;
background-image:url("image/left.jpg");
}
/* 顶部导航栏右边缘*/
.nav .nav_right{
float:left;
width:20px;
height:60px;
background-image:url("image/right.jpg");
}
/* 中间蔬菜水果图片*/
.ban{
width:980px;
height:383px;
margin:0 auto;
}
.ban img{
margin-top:-6px;
}
/* 绿色食品种类栏*/
.kind_select{
width:986px;
height:102px;
margin:0 auto;
background-color:#fff;
border-bottom:solid 1px #CCCCCC;
}
.kind_select ul{
float:left;
}
/* 绿色食品具体种类*/
.kind_select ul li{
float:left;
width:229px;
height:102px;
list-style:none;
background-image:url("image/small_center.jpg");
background-repeat:repeat-x;
background-position:0 10px;
}
/* 种类框左边缘*/
.s_left{
float:left;
width:5px;
height:83px;
margin-left:10px;
margin-top:10px;
background-image:url("image/small_l.jpg");
background-repeat:no-repeat;
}
/* 种类框右边缘*/
.s_right{
float:left;
width:5px;
height:83px;
margin-top:10px;
background-image:url("image/small_r.jpg");
background-repeat:no-repeat;
}
span{
float:left;
margin-left:-5px;
}
/* 种类超链接*/
.kind_select a{
text-decoration: none;
display: block;
width:230px;
height:82px;
margin:10px -5px;
}
.kind_select ul li a img{
margin-left:5px;
margin-top:10px;
}
/* 绿色食品种类块本身及下面的块文字说明*/
h5{
margin-left:38px;
color:#666;
font-weight:normal;
font-size:12px;
}
/* 页脚块大小及背景*/
.footer{
width:986px;
height:210px;
margin:0 auto;
margin-bottom:10px;
background-image:url("image/down_bg.jpg");
background-repeat:repeat-x;
background-position:0 0;
}
/* 页脚块分为3部分*/
.footer ul{
float:left;
}
.footer ul li{
float:left;
list-style:none;
}
/* 页脚第一部分*/
.f1{
width:328px;
height:210px;
}
/* 页脚第二部分*/
.f2{
width:403px;
height:210px;
}
/* 页脚第二部分*/
.f3{
width:254px;
height:210px;
}
/* 页脚中图标*/
.image1{
margin-left:10px;
margin-top:15px;
}
.image2-1{
margin-left:83px;
margin-top:21px;
}
.image2-2{
margin-left:195px;
margin-top:21px;
}
/* 页脚第一部分图片*/
.image3{
width:108px;
height:94px;
background-color:#fff;
border:solid 1px #CCCCCC;
margin-left:12px;
margin-top:18px;
}
.image3 img{
margin:6px;
}
/* 页脚第一部分文字部分*/
.f1_word{
width:210px;
margin-left:-20px;
margin-top:13px;
}
.f1 h5{
line-height:20px;
color: black;
}
/* 页脚第一部分文字内的超链接*/
h5 a{
text-decoration:none;
color:green;
}
/* 页脚第二部分的第一张图片*/
.image3-1{
width:123px;
height:97px;
background-color:#fff;
margin-left:7px ;
margin-top:17px;
border:solid 1px #CCCCCC;
}
/* 页脚第二部分图片与块边框的边距*/
.image3-1 img{
margin:3px;
}
/* 页脚第二部分的第二张图片*/
.image3-2{
width:123px;
height:97px;
background-color:#fff;
margin-left:4px ;
margin-top:17px;
border:solid 1px #CCCCCC;
}
.image3-2 img{
margin:3px;
}
/* 页脚第二部分的第三张图片*/
.image3-3{
width:123px;
height:97px;
background-color:#fff;
margin-left:4px ;
margin-top:17px;
border:solid 1px #CCCCCC;
}
.image3-3 img{
margin:3px;
}
/* 页脚第二部分的第一张图片底下文字*/
.f3 h5{
width:220px;
margin-top:17px;
margin-left:-2px;
line-height:20px;
color: black;
}
/* 页脚第一部分和页脚第二部分的清楚浮动*/
.clear{
clear:both;
}
/* 底部导航栏*/
.sub_nav{
width:986px;
height:35px;
margin:0 auto;
background-image:url("image/sub_nav.jpg");
background-repeat:repeat-x;
background-position:0 0;
}
.sub_nav ul{
float:left;
margin-left:175px;
}
/* 将底部导航栏分为八部分*/
.sub_nav ul li{
width:80px;
height:35px;
float:left;
list-style:none;
text-align:center;
line-height:30px;
}
/* 底部导航栏超链接*/
.sub_nav ul li a{
color:#fff;
font-size:14px;
}
.sub_nav ul li.d1{
width:2px;
height:35px;
padding-top: 4px;
}
/* 最下面页脚*/
.footer_bg{
width:1366px;
height:90px;
background-image:url("image/footer_bg.jpg");
background-repeat:repeat-x;
background-position:0 0;
}
.footer_bg ul li{
list-style:none;
float:left;
}
/* 最下面页脚文字部分*/
.fb1{
width:435px;
height:45px;
margin-left:144px;
padding-top:15px;
}
.fb1 h5{
line-height:21px;
}
/* 最下面页脚图片部分*/
.footer_bg ul li img{
margin-left:475px;
margin-top:14px;
}
</style>
</head>
<body>
<!-- 绿色食品logo -->
<div class="logo">
<img src="image/logo.jpg" alt="图片">
</div>
<!-- 顶部导航栏 -->
<div class="nav">
<span class="nav_left">
</span>
<ul>
<li><a href="#" target="_blank">网站首页</a></li>
<li class="d1"><img src="image/line.jpg"></li>
<li><a href="#" target="_blank">公司新闻</a></li>
<li class="d1"><img src="image/line.jpg"></li>
<li><a href="#" target="_blank">行业动态</a></li>
<li class="d1"><img src="image/line.jpg"></li>
<li><a href="#" target="_blank">基地管理</a></li>
<li class="d1"><img src="image/line.jpg"></li>
<li><a href="#" target="_blank">会员服务</a></li>
<li class="d1"><img src="image/line.jpg"></li>
<li><a href="#" target="_blank">网上购物</a></li>
<li class="d1"><img src="image/line.jpg"></li>
<li><a href="#" target="_blank">产品展示</a></li>
<li class="d1"><img src="image/line.jpg"></li>
<li><a href="#" target="_blank">关于我们</a></li>
<li class="d1"><img src="image/line.jpg"></li>
<li><a href="#" target="_blank">ENSHING</a></li>
</ul>
<span class="nav_right"></span>
</div>
<!-- 中间蔬菜水果图片 -->
<div class="ban">
<img src="image/banner.jpg" height="383" width="980" alt="图片">
</div>
<!-- 绿色食品种类 -->
<div class="kind_select">
<!-- 第一部分 -->
<ul>
<span class="s_left"></span>
<li><a href="#" target="_blank">
<img src="image/01.jpg" alt="图片">
<h5>主要通过自然降水，施用农家肥料人工除草等传统农...
</h5>
</a>
</li>
<span class="s_right"></span>
</ul>
<!-- 第二部分 -->
<ul>
<span class="s_left"></span>
<li><a href="#" target="_blank">
<img src="image/02.jpg" alt="图片">
<h5>含有丰富的碳水化合物、维生素和微量元素，尤其是...
</h5>
</a>
</li>
<span class="s_right"></span>
</ul>
<!-- 第三部分 -->
<ul>
<span class="s_left"></span>
<li><a href="#" target="_blank">
<img src="image/03.jpg" alt="图片">
<h5>含有丰富的碳水化合物、维生素和微量元素，尤其是...
</h5>
</a>
</li>
<span class="s_right"></span>
</ul>
<!-- 第四部分 -->
<ul>
<span class="s_left"></span>
<li><a href="#" target="_blank">
<img src="image/04.jpg" alt="图片">
<h5>
在饲养过程中不添加任何化学合成的添加剂，抗生素...
</h5>
</a>
</li>
<span class="s_right"></span>
</ul>
</div>
<!-- 中间页脚 -->
<div class="footer">
<!-- 页脚第一部分 -->
<ul class="f1">
<!-- 页脚第一部分图标 -->
<li class="image1">
<img src="image/about.jpg" height="38" width="185" alt="图片">
</li>
<li class="image2-1">
<img src="image/btn.jpg" height="20" width="34" alt="图片">
</li>
<!-- 清除浮动 -->
<div class="clear"></div>
<!-- 页脚第一部分图片 -->
<li class="image3">
<img src="image/pic.jpg" height="82" width="96" alt="图片">
</li>
<!-- 页脚第一部分的文字部分 -->
<li class="f1_word">
<h5>绿色食品(北京)有限公司志于有机事业的发展，坚持以人为本，
走可持续发展的道路，从农业到餐桌，实行全程监控体系，以优质的产品为更多的人提供健康的食品安...<a href="#" target="_blank">详细内容>></a>
</h5>
</li>
</ul>
<!-- 页脚第一部分右边框 -->
<span><img src="image/border.jpg" height="200" width="2" alt=""></span>
<!-- 页脚第二部分 -->
<ul class="f2">
<!-- 页脚第二部分图标 -->
<li class="image1">
<img src="image/show.jpg" height="37" width="148" alt="图片">
</li>
<li class="image2-2">
<img src="image/btn.jpg" height="20" width="34" alt="图片">
</li>
<!-- 清除浮动 -->
<div class="clear"></div>
<!-- 页脚第二部分三张图片及其下面文字 -->
<li class="image3-1">
<a href="#" target="_blank">
<img src="image/pic01.jpg" height="93" width="119" alt="图片">
<h5>(古道)纯牛奶</h5>
</a>
</li>
<li class="image3-2">
<a href="#" target="_blank">
<img src="image/pic02.jpg" alt="图片">
<h5>油茶籽油</h5>
</a>
</li>
<li class="image3-3">
<a href="#" target="_blank">
<img src="image/pic03.jpg" alt="图片">
<h5>龙兴香桃</h5>
</a>
</li>
</ul>
<!-- 页脚第二部分右边框 -->
<span><img src="image/border.jpg" height="200" width="2" alt=""></span>
<ul class="f3">
<!-- 页脚第三部分 -->
<li class="image1">
<img src="image/contact.jpg" height="36" width="127" alt="图片">
<h5>地址：北京市海淀区知春路未来大厦6层</br>
邮编：100191</br>
热线电话：010-62358888</br>
传真：010-88636666</br>
邮箱：Issp@Issp.com</h5>
</li>
</ul>
</div>
<!-- 底部导航栏 -->
<div class="sub_nav">
<ul>
<li><a href="#" target="_blank">网站首页</a></li>
<li class="d1"><img src="image/j_right.png" height="17" width="2"></li>
<li><a href="#" target="_blank">公司新闻</a></li>
<li class="d1"><img src="image/j_right.png"></li>
<li><a href="#" target="_blank">行业动态</a></li>
<li class="d1"><img src="image/j_right.png"></li>
<li><a href="#" target="_blank">基地管理</a></li>
<li class="d1"><img src="image/j_right.png"></li>
<li><a href="#" target="_blank">会员服务</a></li>
<li class="d1"><img src="image/j_right.png"></li>
<li><a href="#" target="_blank">网上购物</a></li>
<li class="d1"><img src="image/j_right.png"></li>
<li><a href="#" target="_blank">产品展示</a></li>
<li class="d1"><img src="image/j_right.png"></li>
<li><a href="#" target="_blank">关于我们</a></li>
</ul>
</div>
<!-- 最下面页脚 -->
<div class="footer_bg">
<ul>
<!-- 最下面页脚文字部分 -->
<li class="fb1">
<h5>电话：010-62358888 传真：01088636666
客服电话：400-0809-560</br>
绿色食品 (北京) 有限公司 版权仅有
京ICP备11036362号</h5>
</li>
<li>
<!-- 最下面页脚图片部分 -->
<img src="image/footer_logo.jpg" height="48" width="115" alt="图片">
</li>
</ul>
</div>
</body>
</html>
效果图如下：
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
