20181117_html_第六次（作业）_王灏文

chuohun5648

于 2018-11-18 01:01:00 发布

阅读量165

点赞数

原文链接：https://my.oschina.net/u/3959907/blog/2877692

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
       */*全局设置*/
       {
           margin:0;
           padding:0;
       }
       body/*主体*/
       {
           background-image: url("imgs/body_bg.jpg") ;/*背景图片*/
           background-repeat:no-repeat;/*不重复*/
           background-position:top center;/*背景图片居中*/
           overflow-x:hidden;/*隐藏网页底部左右滚动条*/
       }
       .logo/*页面顶端logo（绿色）*/
       {
           margin-top:20px;/*调整位置，下同*/
           margin-left:280px;
       }
       .line ul/*顶部绿色导航栏*/
       {
           list-style:none;/*去掉圆点*/
       }
       .line ul li/*顶部绿色导航栏*/
       {
           float:left;/*浮动，横向排列*/
           background-image:url("imgs/nav_bg.jpg");/*背景图片*/
           background-repeat:repeat-x;/*横向重复*/
           line-height:46px;/*调整位置*/
       }
       .line ul li a/*顶部绿色导航栏超链接*/
       {
           text-decoration:none;/*无下划线*/
           color:white;/*调整颜色*/
           font-size:100%;/*调整字体大小*/
       }
       .line/*顶部绿色导航栏*/
       {
           margin-left:280px;/*调整位置，下同*/
           margin-top:16px;
       }

/*----------------------------------------------------------------------------------*/

       .center_picture/*页面中部大图片*/
       {
           margin-left:280px;/*调整位置，下同*/
           margin-top:0px;
       }

/*----------------------------------------------------------------------------------*/

       .under_back_white/*页面底部导航栏外背景（白色）*/
       {
           width:980px;/*调整宽度*/
           height:105px;/*调整高度*/
           background-color:white;/*设置背景颜色*/
           margin-left:280px;/*调整位置，下同*/
           margin-top:0px;
       }
       .under_line ul li/*页面底部导航栏*/
       {
           float:left;/*浮动，横向排列*/
           background-image:url("imgs/down_bg.jpg") ;/*设置背景图片*/
           background-repeat:repeat-x;/*横向平铺*/
           margin-top: 10px;/*调整距离*/
           border-top:solid 1px lightgray;/*设置上边框属性*/
           border-bottom:solid 2px lightgray;/*设置下边框属性*/
           width:220px;/*设置宽度*/
           height:78px;/*设置高度*/
       }
       .under_line ul/*页面底部导航栏*/
       {
           list-style:none;/*去掉圆点*/
           float:left;/*浮动，横向排列*/
       }
       .under_line ul li h6/*页面底部导航栏 01-04小图片下面的字*/
       {
           font-weight:normal;/*设置标题标签字体变细*/
           color:grey;/*设置颜色*/
           float:left;/*浮动，横向排列*/
           margin-left:45px;/*调整位置，下同*/
           margin-top:2px;
       }
       .under_line ul li a/*页面底部导航栏超链接*/
       {
           text-decoration:none;/*取消下划线*/
           display:block;
           height:80px;
           width:240px;
       }
       .under_line ul li img/*页面底部导航栏图片大范围*/
       {
           float:left;/*浮动，横向排列*/
       }
       .under_left/*外背景绿色圆角*/
       {
           float:left;/*浮动，横向排列*/
       }
       .img01/*01-04四个小图片*/
       {
           margin-top:5px;/*调整位置*/
           width:130px;/*设置宽度*/
           height:30px;/*设置高度*/
           margin-left:0px;/*调整位置*/
       }
       .l/*01-04小块左边框*/
       {
           float: left;/*浮动，横向排列*/
           width: 5px;/*设置宽度*/
           height: 82px;/*设置高度*/
           margin-left:0px;/*调整位置，下同*/
           margin-top: 10px;
           background: url("imgs/small_l.jpg") no-repeat;/*设置背景图片不平埔*/
       }
       .r/*01-04小块右边框*/
       {
           float: left;/*浮动，横向排列*/
           width: 5px;/*设置宽度*/
           height: 82px;/*设置高度*/
           margin-left:0px;/*调整位置，下同*/
           margin-top: 10px;
           background: url("imgs/small_r.jpg") no-repeat;/*设置背景图片不平埔*/
       }
       .block_white/*01-04小块之间的间隔*/
       {
           width:13.55px;/*设置宽度*/
           height:82px;/*设置高度*/
           background-color:white;/*设置背景颜色*/
           float:left;/*浮动，横向排列*/
       }

/*----------------------------------------------------------------------------------*/

       .last_one
       {
           width:980px;
           height:70px;
           margin-left:280px;
           margin-top: 0px;
           background-color:#F9F9F9;
           border-top:solid 1px lightgray;
       }
       .last_one ul li
       {
           list-style:none;
           float:left;
       }
       .one
       {
           width:320px;
           height:70px;
           border-right:solid 1px lightgray;
           margin-left:10px;
       }
       .two
       {
           width:380px;
           height:70px;
           border-right:solid 1px lightgray;
           margin-left:10px;
       }
       .three
       {
           height:70px;
           margin-left:10px;
       }
       .last_one ul li img
       {
           float:left;
       }
       .about
       {
           margin-top:0px;
           margin-left:2px;
           margin-top:10px;
           height:45px;
       }
       .show
       {
           margin-top:0px;
           margin-left:2px;
           margin-top:10px;
           height:45px;
       }
       .contact
       {
           margin-top:0px;
           margin-left:2px;
           margin-top:10px;
           height:45px;
       }
       .btn1
       {
           height:25px;
           margin-left:45px;
           margin-top: 20px;
       }
       .btn2
       {
           height:25px;
           margin-left:145px;
           margin-top: 20px;
       }
       .last_one ul li a
       {
           display:block;
       }

/*----------------------------------------------------------------------------------*/

.last_two
       {
           width:980px;
           height:150px;
           background-color:#F9F9F9;
           margin-top:0px;
           margin-left:280px;
       }
       .last_two ul li
       {
           list-style:none;
           float:left;
       }
       .one_one
       {
           border-right:solid 1px lightgray;
           width:330px;
       }
       .one_one p
       {
           float:left;
           margin-top:0px;
           margin-left:15px;
           width:175px;
           height:100px;
           font-size: 85%;
       }
       .one_one img
       {
           float:left;
           margin-left:15px;
           margin-top: 0px;
           padding:7px;
           border:1px solid gray;
       }
       .one_one p a
       {
           text-decoration:none;
           color:green;
       }
       .two_two
       {
           width:390px;
           border-right:solid 1px lightgray;
       }
       .two_two a
       {
           text-decoration:none;
           float:left;
       }
       .two_two img
       {
           border:solid 1px lightgray;
           margin-left:5px;
           padding:5px;
           width:110px;
       }
       .two_two p
       {
           color:gray;
           font-size:80%;
           margin-left:35px;
       }
       .three_three
       {
           width:255px;
       }
       .three_three p
       {
           font-size:85%;
       }
</style>
</head>
<body>
       <div class="logo">
           <img src="imgs/logo.jpg" height="75" width="173" alt="logo">
       </div>
       <div class="line">
           <ul>
               <li><img src="imgs/left.jpg" height="60" width="20" alt="left border"></li>
               <li><a href="#">&emsp;网站首页</a></li>
               <li>&emsp; <img src="imgs/line.jpg" height="34" width="2" alt="line"></li>
               <li><a href="#">&emsp; 公司新闻</a></li>
               <li>&emsp; <img src="imgs/line.jpg" height="34" width="2" alt="line"></li>
               <li><a href="#">&emsp; 行业动态</a></li>
               <li>&emsp; <img src="imgs/line.jpg" height="34" width="2" alt="line"></li>
               <li><a href="#">&emsp; 基本管理</a></li>
               <li>&emsp; <img src="imgs/line.jpg" height="34" width="2" alt="line"></li>
               <li><a href="#">&emsp; 会员服务</a></li>
               <li>&emsp; <img src="imgs/line.jpg" height="34" width="2" alt="line"></li>
               <li><a href="#">&emsp; 网上购物</a></li>
               <li>&emsp; <img src="imgs/line.jpg" height="34" width="2" alt="line"></li>
               <li><a href="#">&emsp; 产品展示</a></li>
               <li>&emsp;<img src="imgs/line.jpg" height="34" width="2" alt="line"></li>
               <li><a href="#">&emsp;关于我们</a></li>
               <li>&emsp;<img src="imgs/line.jpg" height="34" width="2" alt="line"></li>
               <li><a href="#">&emsp;ENGLISH</a></li>
               <li>&emsp;<img src="imgs/right.jpg" height="60" width="20" alt="right border"></li>
           </ul>
       </div>

       <div class="under_back_white">
           <span class="under_left"><img src="imgs/image.top_l.jpg" height="105" width="10" alt=""></span>
           <div class="under_line">
               <ul>
                   <span class="l"></span>
                   <li>
                       <a href="#">
                           <img class="img01" src="imgs/01.jpg" alt="">
                           <h6>主要通过自然降水，使用农家肥料人<br>工降水等传统农...</h6>
                       </a>
                   </li>
                   <span class="r"></span>
                   <div class="block_white"></div>
                   <span class="l"></span>
                   <li>
                       <a href="#">
                           <img class="img01" src="imgs/02.jpg" alt="">
                           <h6>含有丰富的碳水化合物，维生素和微<br>量元素，尤其是</h6>
                       </a>
                   </li>
                   <span class="r"></span>
                   <div class="block_white"></div>
                   <span class="l"></span>
                   <li>
                       <a href="#">
                           <img class="img01" src="imgs/03.jpg" alt="">
                           <h6>主要通过自然降水，使用农家肥料人<br>工降水等传统农...</h6>
                       </a>
                   </li>
                   <span class="r"></span>
                   <div class="block_white"></div>
                   <span class="l"></span>
                   <li>
                       <a href="#">
                           <img class="img01" src="imgs/04.jpg" alt="">
                           <h6>主要通过自然降水，使用农家肥料人<br>工降水等传统农...</h6>
                       </a>
                   </li>
                   <span class="r"></span>
               </ul>
           </div>
           <span class="under_left"><img src="imgs/image.top_r.jpg" height="105" width="9" alt=""></span>
       </div>

       <div class="last_two">
           <ul>
               <li class="one_one">
                   <img src="imgs/pic.jpg" alt="">
                   <p>绿色食品(北京)有限公司志于有机事业的发展，坚持以人为本，
                   走可持续发展的道路，从农业到餐桌，实行全程监控体系，以优质的产品为更多的人提供健康的食品安...<a href="#">详细内容>></a></p>
               </li>
               <li class="two_two">
                   <a href="#">
                       <img src="imgs/pic01.jpg" alt="01">
                       <p>(古道)纯牛奶</p>
                   </a>
                   <a href="#">
                       <img src="imgs/pic02.jpg" alt="02">
                       <p>油茶籽油</p>
                   </a>
                   <a href="#">
                       <img src="imgs/pic03.jpg" alt="03">
                       <p>龙兴香桃</p>
                   </a>
               </li>
               <li class="three_three">
                   <p>&emsp;地址：北京市海淀区知青路未来大厦6层</p>
                   <p>&emsp;邮编：100191</p>
                   <p>&emsp;热线电话：010-62358888</p>
                   <p>&emsp;传真：010-88636666</p>
                   <p>&emsp;邮箱：lssp@lssp.com</p>
               </li>
           </ul>
       </div>
</body>
</html>