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

最新推荐文章于 2025-06-27 14:51:14 发布

转载最新推荐文章于 2025-06-27 14:51:14 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3962295/blog/2877421

本文详细解析了一个绿色食品主题网站的HTML和CSS布局代码，包括大背景图片设置、导航栏设计、图片展示区域布局、产品种类展示区以及页脚的设计细节。

<!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>
   
   <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>