吉软-人文精英班-第四次作业

最新推荐文章于 2021-03-25 03:33:33 发布

chongduibin0871

最新推荐文章于 2021-03-25 03:33:33 发布

阅读量120

点赞数

原文链接：https://my.oschina.net/u/4013240/blog/2877667

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
   *{
       margin:0;
       padding:0;
   }
ul{
float:left;
}
   li{
       list-style:none;
float:left;
   }
   body{
       background: url("pic/body_bg.jpg") no-repeat top center;
}
   .logo{
       width:980px;
       height: 120px;
       margin:0 auto;
   }
   .nav{
       width: 990px;
       height: 60px;
       margin:0 auto;
margin-left:290px;
   }
   .nav .nLeft{
       width:20px;
       height: 60px;
       background: url("pic/left.jpg");
       float: left;
   }
   .nav .nRight{
       width:20px;
       height: 60px;
       background: url("pic/right.jpg");
       float: left;
   }
   .nav ul{
       float: left;

   }
   .nav ul li{
       float: left;
       width:102px;
       height: 70px;
       background: url("pic/nav_bg.jpg") repeat-x;
padding:10px 0px;
   }
/* 超链接下划线清除&颜色 */
a{
text-decoration:none;
/* color:white; */
}
/* 中间图片定位 */
.banner{
margin-left: 266px;
margin-top: -31px;
}
/* 中间的导航div设置 */
.middle{
width:990px;
height:120px;
background-color:white;
margin: 390px auto;
}
img{
float:left;
}
.picture{
float:left;
background-color:white;
border: 1px solid gray;
padding:5px;
}
p{
font-size:13px;
/* width:305px;
height:134px; */
margin-top:5px;
}

/* 挡板 */
.clear{
clear:both;
display:block;
}
.middle{
width:986px;
height:102px;
margin:0 auto;
border-bottom:solid 1px #CCCCCC;
}
.middle ul{
float:left;
}
.middle ul li{
float:left;
width:229px;
height:102px;
list-style:none;
background-image:url("pic/small_center.jpg");
background-repeat:repeat-x;
background-position:0 10px;
}
span{
float:left;
margin-left:-5px;
}
.middle .left{
float:left;
width:5px;
height:83px;
margin-left:10px;
margin-top:10px;
background-image:url("pic/small_l.jpg");
background-repeat:no-repeat;
}
.middle .right{
float:left;
width:5px;
height:83px;
margin-top:10px;
background-image:url("pic/small_r.jpg");
background-repeat:no-repeat;
}

.middle a{
text-decoration: none;
display: block;
width:230px;
height:82px;
margin:10px -5px;
background-image:url("pic/small_center.jpg");
}
.middle ul li a img{
display:block;
width:100px;
height: 20px;
margin-left:5px;
margin-top:10px;
/* display:inline; */
}
.middle ul li a h5{
display:block;
width:170px;
height:50px;
color:#666;
font-weight:normal;
font-size:12px;
}
.bottom h5{ display:block;

margin-left:38px;
color:#666;
font-weight:normal;
font-size:12px;
}
.bottom{
width:986px;
height:210px;
margin:0 auto;
margin-bottom:10px;
background-image:url("pic/down_bg.jpg");
background-repeat:repeat-x;
background-position:0 0;
}
.bottom ul{
float:left;
}
.bottom 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;
}
.final{
width:986px;
height:34px;
margin-top: 380px;
margin-left:290px;
/* background-color:red; */
background:url("pic/sub_nav.jpg") repeat-x;
/* background-position:0 0; */
}
.final ul{
float:left;
margin-left:190px;
}
.final ul li{
width:80px;
height:35px;
float:left;
list-style:none;
text-align:center;
line-height:30px;
list-style:none;
}
.final ul li a{
color:black;
font-size:14px;
}
.final ul li .d1{
width:2px;
height:35px;
padding-top: 4px;
}
.EVA13{
width:1500px;
height:90px;
background-image:url("pic/footer_bg.jpg");
background-repeat:repeat-x;
}
.EVA1{
width:435px;
height:45px;
margin-left:270px;
padding-top:15px;
}
.EVA13 ul li img{
margin-left:460px;
margin-top:14px;
}
.EVA13 h5{
line-height:21px;
font-weight:normal;
}
</style>
</head>
<body>
       <div class="logo">
<img src="pic/logo.jpg" height="75" width="173">
</div>
       <div class="nav">
           <span class="nLeft"></span>
           <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>
<li>
<a href="#">ENGLISH</a>
</li>
           </ul>
           <span class="nRight"></span>
       </div>


<img src="pic/banner.jpg" height="383" width="987" class="banner">
<div class="middle">
<ul>
<span class="left"></span>
<li><a href="#" target="_blank">
<img src="pic/01.jpg" alt="图片">
<h5>主要通过自然降水，施用农家肥料人工除草等传统农...
</h5>
</a>
</li>
<span class="right"></span>
</ul>
<ul>
<span class="left"></span>
<li><a href="#" target="_blank">
<img src="pic/02.jpg" alt="图片">
<h5>含有丰富的碳水化合物、维生素和微量元素，尤其是...
</h5>
</a>
</li>
<span class="right"></span>
</ul>
<ul>
<span class="left"></span>
<li><a href="#" target="_blank">
<img src="pic/03.jpg" alt="图片">
<h5>含有丰富的碳水化合物、维生素和微量元素，尤其是...
</h5>
</a>
</li>
<span class="right"></span>
</ul>
<ul>
<span class="left"></span>
<li><a href="#" target="_blank">
<img src="pic/04.jpg" alt="图片">
<h5>
在饲养过程中不添加任何化学合成的添加剂，抗生素...
</h5>
</a>
</li>
<span class="right"></span>
</ul>

</div>
<div class="bottom">
<ul class="f1">
<li class="image1">
<img src="pic/about.jpg" height="38" width="185" alt="图片">
</li>
<li class="image2-1">
<img src="pic/btn.jpg" height="20" width="34" alt="图片">
</li>
<div class="clear"></div>
<li class="image3">
<img src="pic/pic.jpg" height="82" width="96" alt="图片">
</li>
<li class="f1_word">
<h5>绿色食品(北京)有限公司志于有机事业的发展，坚持以人为本，
走可持续发展的道路，从农业到餐桌，实行全程监控体系，以优质的产品为更多的人提供健康的食品安...<a href="#" target="_blank">详细内容>></a>
</h5>
</li>
</ul>
<span><img src="pic/border.jpg" height="200" width="2" alt=""></span>
<ul class="f2">
<li class="image1">
<img src="pic/show.jpg" height="37" width="148" alt="图片">
</li>
<li class="image2-2">
<img src="pic/btn.jpg" height="20" width="34" alt="图片">
</li>
<div class="clear"></div>
<li class="image3-1">
<a href="#" target="_blank">
<img src="pic/pic01.jpg" height="93" width="119" alt="图片">
<h5>(古道)纯牛奶</h5>
</a>
</li>
<li class="image3-2">
<a href="#" target="_blank">
<img src="pic/pic02.jpg" alt="图片">
<h5>油茶籽油</h5>
</a>
</li>
<li class="image3-3">
<a href="#" target="_blank">
<img src="pic/pic03.jpg" alt="图片">
<h5>龙兴香桃</h5>
</a>
</li>
</ul>
<span><img src="pic/border.jpg" height="200" width="2" alt=""></span>
<ul class="f3">
<li class="image1">
<img src="pic/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="final">
<ul>
<li>
<a href="#" target="_blank">网站首页</a>
</li>
<li>
<a href="#" target="_blank">公司新闻</a>
</li>
<li>
<a href="#" target="_blank">行业动态</a>
</li>
<li>
<a href="#" target="_blank">基地管理</a>
</li>
<li>
<a href="#" target="_blank">会员服务</a>
</li>
<li>
<a href="#" target="_blank">网上购物</a>
</li>
<li>
<a href="#" target="_blank">产品展示</a>
</li>
<li>
<a href="#" target="_blank">关于我们</a>
</li>
</ul>
</div>
<div class="EVA13">
<ul>
<li class="EVA1">
<h5>电话：010-62358888 传真：01088636666
客服电话：400-0809-560</br>
绿色食品 (北京) 有限公司版权仅有
京ICP备11036362号</h5>
</li>
<li>
<img src="pic/footer_logo.jpg"alt="图片">
</li>
</ul>
</div>
</body>
</html>