html实践

最新推荐文章于 2024-06-04 08:19:41 发布

YWL1214

最新推荐文章于 2024-06-04 08:19:41 发布

阅读量235

点赞数

文章标签： html

本文链接：https://blog.csdn.net/xl121406/article/details/126545267

版权

水果网页：

实现代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>健康资讯</title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           #one{
               width: 700px;
               height: 45px;
               /*background-color:gold;*/
               margin: 15px auto;
           }
           #two{
               width: 100%;
               height: 300px;
               background-color: brown;
               margin: 15px auto;
               overflow: hidden;
               position: relative;
           }
           #two #b{
               width: 1100px;
               height: 300px;
           }
           #three{
           width: 80%;
              height: 400px;
               /*background-color:red;*/
               margin:80px auto;
               float: center;
           }
           #three_one{
               width: 60%;
              height: 400px;
               /*background-color:blueviolet;*/
               margin: 0px auto ;
               float: left;
           }
           #three_two{
               width: 40%;
              height: 400px;
               /*background-color:lavender;*/
               margin: 0px auto ;
               float: left;
           }
           #fuor{
background: url(../img/水果8.jpg) no-repeat center center;
background-size: cover;
width: 100%;
height: 400px;
/* 只需要给背景图加上该属性即可 */
background-attachment: fixed;
}
.four_one{
   width: 32.333%;
height: 400px;
float: left;
}
.four_two{
   width: 32.333%;
height: 400px;
float:left;
}
.four_three{
   width: 32.333%;
height: 400px;
float:right;
}
.center{
   /*display: table-cell;
vertical-align: middle;
text-align: center;*/
   position: relative;
   left: 50%;
   top: 40%;
   margin: -60px 0 0 -75px;
   border-bottom: 3px white solid;
}
.font_color{
   line-height: 400px;
   text-align: center;
   color:white;
   font-family: "微软雅黑";

}
#five{
   width: 100%;
height: 600px;
background-color: rosybrown;
}
.five_one{
   width: 60%;
   height: 600px;
   float:left;
   background-color: white;
}
.five_two{
   width: 40%;
   height: 600px;
   float:left;
   background-color: white;
}
.five_center{
   position: relative;
   left: 24%;
   top: 18.5%;
   margin: -60px 0 0 -75px;
}
.five1{
   width: 100%;
   height: 250px;
   /*background-color: blanchedalmond;*/
   float:left;
}
.five2{
   width: 100%;
   height: 50px;
   /*background-color: cadetblue;*/
   float:left;
}
.five3{
   width: 100%;
   height: 200px;
   /*background-color: #6495ED;*/
   float:left;
}
.five_font1{
   font-size: 70px;
   text-align: center;
   line-height: 250px;
   color:darkcyan;
   font-family:"微软雅黑";
}
.five_font2{
   text-align: center;
   /*line-height: 250px;*/
   color:grey;
   font-family:"微软雅黑";
}
/* #buttom{
    height: 200px;
               width: 100%;
               background:grey;
}*/
.v1{
       font-family: "华文隶书";
              font-size: 30px;
              text-align: center;
              line-height: 200px;
              color: whitesmoke;

}
           .z_img{
               overflow: hidden;
position: absolute;
width: 100%;
height: 300px;
           }
           .w_dian{
position: absolute;
top: 320px;
left: 600px;
}
span{
   display: inline-block;
width: 27px;
height: 27px;
line-height: 27px;
text-align: center;
border-radius: 50%;
border: 2px solid rgba(245, 207,207,0.47);
margin-left: 10px;
cursor: pointer;
}
ul li{list-style:none;
           float:right;
           width: 18%;
           height:45px;
           line-height: 45px;
           text-align:center;}
           a{
              text-decoration: none;
              color: rosybrown;
              }
           ul li:hover{
              cursor:pointer;
           background-color: cadetblue;
           font-family: 华文琥珀;
           /*color: #7FFFD4;*/
           font-size: 22px;
           }
       a:hover{
           color:white;
           cursor: pointer;
           }
       a:link{
           /*color: burlywood;*/
           color:sandybrown;
           }
       .a{
               width: 100%;
              height: 75px;
              /*background:hotpink;*/
              font-family: "方正舒体";
              font-size: 50px;
              /*text-align: center;*/

           }
           .b{
               width: 100%;
              height: 60px;
              /*background: cornflowerblue;*/
              /*text-align: center;*/
              font-family: "微软雅黑";
              line-height: 60px;
              font-size: 20Px;
           }
           .c{
               width: 100%;
              height: 60px;
              /*background: aquamarine;*/
              /*text-align: center;*/
              font-family: "微软雅黑";
              line-height: 30px;
              font-size: 13px;
           }
       .abc{
           margin: 0px 0px 0px 1350px;
       }
       .yy{
           border-bottom: 3px gold solid;
       }
       </style>
       </head>
<body>
       <div id="all">
           <div id="one">
           <ul>
               <li><a href="注册会员.html">注册会员</a></li>
               <li><a href="健康资讯.html">健康资讯</a></li>
               <li class="yy"><a href="关于我们.html">关于我们</a></li>
               <li><a href="新鲜蔬果.html">新鲜蔬果</a></li>
               <li ><a href="首页.html">首页</a></li>
</ul>
<div class="tp">
   
           </div>
           </div>

           <div id="two" class="z_img">
               <img class="z_img" src="../img/背景6.jpeg" alt=" " id="zzj">
               <img src="../img/水果图片3.jpg"/>
               <img src="../img/水果图片5.jpg"/>
               <img src="../img/水果图片4.jpg"/>
               <img src="../img/背景6.jpeg">
               <img src="../img/水果图片5.jpg">
           </div>

           <div class="w_dian">
               <span ></span>
               <span ></span>
               <span ></span>
               <span ></span>
               <span ></span>
           </div>

           <script>
var span = document.querySelectorAll('span');
for (let i = 0;i<span.length;i++){
span[0].style.backgroundColor = 'rgba(255, 255,255)';
span[i].onclick = function(){
for (let i = 0;i<span.length;i++){
span[i].style.backgroundColor =''
}
span[i].style.backgroundColor = 'rgba(255, 255,255)';
let zzj = document.getElementById('zzj');
let img = document.querySelectorAll('img')[i+1];
zzj.src = img.src;
}
}
</script>

<div id="three">
    <div id="three_one">
    <div class="a">
        <p><font color="#40E0D0">    Choose quzlity fruit</font></p>
    </div>

    <div class="b">
        <p>甄选优质水果</p>
    </div>

    <div class="c">
        <p><font color=#708090>随菩人们生活水半的提高，儺庸安金的进囗类中局惴食品消些之然会成为社会主流的消些趋身，将利用顺车速运团资源，</br>
        <p><font color=#708090>   放眼金球优质美倉。逐步实现金球产地直采，縮短供应琏》让用户享壹到頁正0 污染、安金、优质优价的金球美食·</br>
            <p><font color=#708090>致力于水果产业链和水果· 0 营锁业态的发屋，水果知识和皇化的创造与传陲。我们终从源头吧关，新鲜、绿色、天然、原生态，好的!</font></p>
    </div>
    </div>

    <div id="three_two">
        <img src="../img/水果圈.png"/ width="600px" height="400px">
    </div>
</div>

<div id="fuor">

   <div class="four_one">
       <img class="center" src="../img/优质原产地3.png"/>
       <p class="font_color">优质的原产地自身优越的生长环境造就的美味生态有机肥</p>
   </div>

   <div class="four_two">
       <img class="center" src="../img/便捷的极速运达.png"/>
       <p class="font_color">科学的种植先进的滴灌技术，施用生态有机肥</p>
   </div>

   <div class="four_three">
       <img class="center" src="../img/科学种植.png"/>
       <p class="font_color">便捷的极速运达物流仓储配送，覆盖范围广</p>
   </div>

</div>

<div id="five">
   <div class="five_one">
       <img class="five_center" src="../img/企业理念.jpg"/ width="600px" height="500px">
   </div>

   <div class="five_two">
       <div class="five1">
           <p class="five_font1">品牌优势</p>
       </div>

       <div class="five2">
           <p class="five_font2">全球美食：专享世界特色美食，足不出户坐等全球美味；</p>
       </div>

       <div class="five2">
           <p class="five_font2">产地直采：专注原产地采购，国内外直采正品保障;</p>
       </div>

       <div class="five2">
           <p class="five_font2">全程冷链：专业冷链存储运输，生鲜美食品质无忧;</p>
       </div>

       <div class="five3">
           <p class="five_font2">顺丰直达：专属物流快速送达、原汁原味新鲜到家。</p>
       </div>
   </div>
</div>

<div id="box">
   <a href="javascript:scroll(0,0)"><img class="abc" src="../img/背景5.jpeg" width="50px" height="50px"></a>
<a οnclick="pageScroll()">返回</a>
</div>

<script>
function pageScroll(){
window.scrollBy(0,-100);
scrolldelay = setTimeout('pageScroll()',100);
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
if(sTop==0) clearTimeout(scrolldelay);
}
</script>
<div id="buttom">
    
    <p class="v1">请联系我们-12374000008</p>
</div>

</body>
</html>