072-075

若与云飘
于 2023-09-20 22:09:24 发布
阅读量42
点赞数
文章标签：前端
本文链接：https://blog.csdn.net/2302_79364872/article/details/133103667
版权
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>072</title>
</head>
<body> 
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #cs2{
            display: none;
        }
        #cs1:hover #cs2{
            display: block;
        }
        #cs4{
            display: none;
        }
        #cs3:hover #cs4{
            display: block;
        }
        #cs6{
            display: none;
        }
        #cs5:hover #cs6{
            display: block;
        }
        #cs8{
            display: none;
        }
        #cs7:hover #cs8{
            display: block;
        }
        #cs10{
            display: none;
        }
        #cs9:hover #cs10{
            display: block;
        }
        #cs12{
            display: none;
        }
        #cs11:hover #cs12{
            display: block;
        }
        a:hover{
            color: red;
        }
        .cs1{
            width: 100%;
            height: 90px;
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(255, 255, 255);
            position: fixed;
        }
        .cs2{
            list-style: none;
            float: left;
        }
        img{
            float: left;
            margin-right: 15px;
        }
        .cs3{
            float:left ; 
            font-size: 17px;
            margin-left: 25px;
        }
        li{
            width: 110px;
            height: 45px;
            padding-top: 30px;
            /* border: 1px solid red; */
        }
        .cs5{
            float:right; 
            margin-right: 8%;
            font-size: 17px;
            list-style: none;
            border-left: 1px solid rgba(0, 0, 0,.1);
            border-right: 1px solid rgba(0, 0, 0,.1);
            height: 59px;
        }
        .cs6{
            width: 100%;
            height: 625px;
            background-repeat: no-repeat;
            background-image: url(https://www.nongfuspring.com/assets/img/pc/about-us/introduce/banner.png);
            float: left;
        }
        .cs7{
            margin-top: 15%;
            text-align: center;
            font-size: 60px;
        }
        .cs8{
            margin-top: 15px;
            text-align: center;
            font-size: 30px;
        }
        p{
          color: aliceblue;
        }

        .cs9{
            width: 100%;
            height: 900px;
            background-color: rgb(250, 250, 250);
            float: left;
        }        
        .cs10{
            width: 40%;
            height: 625px;
            float: left;
            margin-left: 50px;
            margin-top: 150px;
        }
        .cs10 p{
            color: black;
        }
        .cs11{
                font-size: 50px;
        }
        .cs12{
            font-size: 19px;
            margin-top: 25px;
        }
        .cs13{
            font-size: 24px;
            margin-top: 100px;
        }
        .cs14{
            font-size: 19px;
        }
        .cs15{
            width: 50%;
            height: 625px;
            float: left;
            background-repeat: no-repeat;
            background-color: rgb(250, 250, 250);
            background-size: contain;
            margin-left: 100px; 
            margin-top: 150px;
            /* margin-right:10%; */
            background-image: url(https://www.nongfuspring.com/assets/img/pc/about-us/introduce/f2.png);
        } 
        .cs16{
            width: 100%;
            height: 800px;
            /* margin-top: 50px; */
            float: left;
            background-repeat: no-repeat;
            /* background-size: cover; */
            /* margin-right: 50%; */
            background-image: url(https://www.nongfuspring.com/assets/img/pc/about-us/introduce/f3.jpg);
        }
        .cs17{
            margin-left: 200px;
            margin-top: 200px;
        }
        .cs18{
            font-size: 55px;
        }
        .cs19{
            font-size: 20px;
            margin-top: 35px;
        }
        .cs20{
            font-size: 20px;
            margin-top: 70px;
        }
        .cs21{
            width: 100%;
            height: 350px;
            background-color: rgb(255, 255, 255);
            float: left;
        }
        .cs22{
            width: 31%;
            height: 350px;
            background-color: rgb(255, 255, 255);
            float: left;
            margin-left: 10%;
        }
        .cs23{
            color: black;
            margin-top: 100px;
            font-size: 50px;
        }
        .cs24{
            color: black;
            margin-top: 30px;
            font-size: 18px;
        }
        .cs25{
            width: 31%;
            height: 350px;
            background-color: rgb(255, 255, 255);
            float:right;
            margin-right: 10%;
        }
        .cs26{
            color: black;
            font-size: 18px;
            margin-top: 70px;
        }
        .cs27{
            width: 100%;
            height: 600px;
            background-color: rgb(255, 255, 255);
            float: left;
            background-image: url(https://www.nongfuspring.com/assets/img/pc/about-us/introduce/f4.jpg);
            background-size: 83%;
            background-repeat: no-repeat;
            background-position: center;
        }
        .cs28{
            width: 100%;
            height: 650px;
            float: left;
            background-color: rgb(255, 255, 255);
        }
        .cs29{
            width: 45%;
            height: 550px;
            float: left;
            margin-top: 100px;
            background-color: rgb(255, 255, 255);
            background-image: url(https://www.nongfuspring.com/assets/img/pc/about-us/introduce/f5.jpg); 
            background-repeat: no-repeat;
            background-size: contain;
            margin-left: 9%;
        }
        .cs30{
            width: 38%;
            height: 550px;
            float: left;
            margin-top: 100px;
            background-color: rgb(255, 255, 255);
            font-size: 45px;
        }
        .cs31{
            font-size: 20px;
            color: rgb(0, 0, 0);
            margin-top: 40px;
        }
        .cs32{
            margin-top: 100px;
            color: black;
        }
        .cs33{
            width: 100%;
            height: 800px;
            float: left;
            background-color: rgb(255, 255, 255);
        }
        .cs34{
            width: 40%;
            height: 750px;
            float: left;
            background-color: rgb(255, 255, 255);
            margin-left: 8%;
        }
        .cs35{
            font-size: 45px;
            margin-top: 30%;
            color: black;
        }
        .cs36{
            margin-top: 45px;
            font-size: 23px;
            color: black;
        }
        .cs37{width: 100%;
            background-color: rgb(255, 255, 255);
        }
        .cs38{
            width: 45%;
            height: 100px;
            background-color: brown;
            margin-top: 40px;
            font-size: 23px;
            float: left;
        }
        .cs40{
            width: 40%;
        }
        .cs42{
            width: 45%;
            background-color: brown;
            margin-top: 40px;
            font-size: 23px;
            float: left;
        }
        .cs43{
            width: 49%;
            height: 250px;
            background-color: rgb(255, 255, 255);
            float: left;
        }
        .cs44{
            width: 49%;
            height: 250px;
            float: right;
            background-color: rgb(255, 255, 255);
        }
        .cs45,.cs46{
            font-size: 20px;
            color: black;
        }
        .cs47{
            width: 43%;
            height:600px ;
            margin-top: 200px;
            background-color: rgb(255, 255, 255);
            float: right;
            background-size: 95%;
            background-repeat: no-repeat;
            margin-right: 10px;
            background-image: url(https://www.nongfuspring.com/assets/img/pc/about-us/introduce/f6.png);
        }
        .cs48{
            width: 100%;
            height: 800px;
            float: left;
            background-image: url(https://www.nongfuspring.com/assets/img/pc/about-us/introduce/f7.jpg);
            background-repeat: no-repeat;
            background-size: contain;
        }
        .cs49{
            width: 100%;
            height: 100px;
            float: left;
        }
        .cs50{
            width: 38%;
            height: 300px;
            float: left;
            margin-left:10%;
            background-color: rgb(255, 255, 255);
            margin-top: 100px;
        }
        .cs51{
            width: 50%;
            height: 350px;
            float: left;
            background-color: rgb(216, 5, 128);
            background-image: url(https://www.nongfuspring.com/assets/img/pc/about-us/introduce/f8.png);
            background-size: cover;
        }
        .cs52{
            color: black;
            font-size: 50px;
        }
        .cs53{
            color: black;
            font-size: 18px;
            margin-top: 30px;
        }
        .cs55{
            width: 100%;
            height:642px ;
            margin-top: 22%;
            background-color: rgb(255, 255, 255);
            float: left;
            background-image: url(https://www.nongfuspring.com/assets/img/pc/about-us/introduce/f9.png);
            background-size: contain;
            background-repeat: no-repeat;
        }
        .cs56{
            font-size: 50px;
            margin-left: 10%;
            margin-top: 20%;
        }
        .cs57{
            width: 100%;
            height: 600px;
            float: left;
            background-color: rgb(250, 250, 250);
        }
        .cs58{
            width: 60%;
            height: 500px;
            background-color: rgb(250, 250, 250);
            border-right: 1px solid rgba(0, 0, 0,.1);
            float: left;
        }
        .cs59 .cs60{
            width: 180px; 
            margin-left: 100px;
            float: left;
            margin-top: 60px;
            list-style: none;
            font-size: 20px;
            /* border: 1px solid red; */
        }
        li{
            list-style: none;
        }
        .cs60 li{
            font-size: 18px;
            /* border: 1px solid red; */
            height: 3px;
            margin-top: 10px;
            color: gray;
        }

        .cs61{
            width: 39%;
            height: 500px;
            background-color: rgb(250, 250, 250);
            float: left;
        }
        .cs62{
            color: rgb(250, 250, 250);
        }
        .cs62 span{
            display: block;
            margin-left: 10%;
        }
        .cs63{
            width: 55%;
            height: 100px;
            background-color: rgb(250, 250, 250);
            float: left;
            line-height: 100px;
            margin-left: 5%;
            border-top: 1px solid rgba(0, 0, 0,.1);
        }
        .cs64{
            width: 40%;
            height: 100px;
            background-color: rgb(250, 250, 250);
            float: left;
            background-image: url(https://www.nongfuspring.com/assets/img/footLogo.bbcb013a.jpg);
            border-top: 1px solid rgba(0, 0, 0,.1);
        }
        .cs60 li:hover{
            color:red ;
        }
    </style>
    <div class="cs1">
        <img src="https://www.nongfuspring.com/assets/img/logo.ae828a1b.png" title="农夫山泉" style="margin-left: 8%;">
        <ui class="cs2">
            <li class="cs3" id="cs1"><span style="color: red;">关于我们</span>                
                <ul id="cs2" style="list-style: none;width: 160px;background-color:  rgb(255, 255, 255);line-height: 50px;">
                    <li><a>公司介绍</a></li>
                    <li><a>公司管理层</a></li>
                    <li><a>企业大事记</a></li>
                    <li><a>人和文化</a></li>
                    <li><a>宣传片</a></li>
                </ul>
            </li>
            <li class="cs3"><a>旗下产品</a></li>
            <li class="cs3" id="cs3"><a>水源地与产地</a>
                <ul id="cs4" style="list-style: none;width: 160px;background-color:  rgb(255, 255, 255);line-height: 投资者日历50px;">
                    <li><a>水源介绍</a></li>
                    <li><a>种植基地介绍</a></li>
                    <li><a>工厂介绍</a></li>
                </ul>
            </li>
            <li class="cs3"><a>水健康知识</a></li>
            <li class="cs3"><a>新闻公告</a></li>
            <li class="cs3" id="cs7"><a>投资者关系</a>
                <ul id="cs8" style="list-style: none;width: 160px;background-color:  rgb(255, 255, 255);line-height: 50px; font-size: 15px;">
                    <li><a>公告及通函</a></li>
                    <li><a>财务信息</a></li>
                    <li><a>公司治理</a></li>
                    <li><a>ESG/可持续发展</a></li>
                    <li><a>投资者日历</a></a></li>
                </ul>
            </li>
            <li class="cs3"><a>联系我们</a></li>
        </ui>
        <ui class="cs4">
            <li class="cs5" id="cs11">简体中文v
                <ul id="cs12" style="list-style: none;width: 160px;background-color: rgb(255, 255, 255);line-height: 50px;">
                    <li><a title="农夫山泉">简体中文</a></li>
                    <li><a title="農夫山泉">繁體中文</a></li>
                    <li><a title="Nongfu Spring">English</a></li>
                </ul>
            </li>
        </ui>
    </div>
    <div class="cs6">
        <p class="cs7">天然、健康</p>
        <p class="cs8">我们不生产水，我们只是大自然的搬运工</p>
    </div >

    <div class="cs9">
        <div class="cs10">
            <p class="cs11">中国饮用水行业标杆式企业</p>
            <p class="cs12">农夫山泉股份有限公司成立于1996年，中国饮料20强之一，是在中国<BR>市场上同时具备规模性、成长性和盈利能力的饮料龙头企业。</p>
            <P class="cs13">成立于<br><span style="font-size: 100px;">1996</span>年</P>
            <hr color="red" width="15px" align="left" style="margin: 50px 0px;">
            <P class="cs14">以2019年零售额计，农夫山泉在茶饮料、功能饮料及果汁饮料的市场<br>份额均居中国市场前三位。</P>
        </div>
        <div class="cs15">
        </div>
    </div>
        <div class="cs16">
            <div class="cs17">
            <p class="cs18">"天然、健康”的品牌理念</p>
            <p class="cs19">多年来，农夫山泉坚持"天然、健康"的品牌理念，从不使用城市自来水<BR>生产瓶装饮用水，也从不在饮用水中添加任何人工矿物质。为了保障持<BR>续大量的优质天然水供应，农夫山泉独具战略眼光，前瞻性地在中国布<BR>局了十二大稀缺的优质天然水源，奠定了为消费者提供长期天然健康服<BR>务的基础和能力，形成长期稳定的竞争优势。</p>
            <hr color="red" width="15px" align="left" style="margin: 50px 0px;">
            <p class="cs20">农夫山泉根据消费者洞察，结合中国文化，推出了一系列经典的广告语<BR>和营销案例。农夫山泉坚信，一个产品推向市场，不仅仅是产品，更要<BR>具有品牌的灵魂和精神。</p>
            </div>
        </div>
        <div class="cs21">
            <div class="cs22">
                <p class="cs23">科技成就天然之美</p>
                <p class="cs24" style="color: rgba(0, 0, 0,.5);">农夫山泉拥有领先的装备水平、制造能力、强大的供应链管理能力和严格的质量保障体系。</p>
            </div>

            <div class="cs25">
                <hr color="red" width="15px" align="left" style="margin-top: 100px;">
                <p class="cs26" style="color: rgba(0, 0, 0,.5);">农夫山泉拥有世界先进的饮用水生产线，和达到Log6无菌标准的高速无菌灌装设备，在主要的三大水源地均具备低能耗、高效率的铁路直运能力，已经建立起涵盖原料、研发、制造、销售通路的闭环产品质量保障体系。</p>
            </div>
        </div>

    <div class="cs27">
    </div>
    <div class="cs28">
        <div class="cs29">
        </div>
        <div class="cs30">
            <p class="cs32">多元化的产品布局</p>
            <p class="cs31" style="color: rgba(0, 0, 0,.5);">农夫山泉不断推陈出新，形成多元化产品矩阵，除饮用水外，已经布局即饮茶、功能饮料、果汁、植物蛋白、咖啡类等品类。</p>
            <hr color="red" width="15px" align="left" style="margin-top: 50px;">
        </div>
    </div>
    <div class="cs33">
        <div class="cs34">
            <div class="cs37">
            <p class="cs35">完善的全国性销售渠道</p>
            <p class="cs36" style="color: rgba(0, 0, 0,.5); font-size: 21px;">面对瞬息万变的市场环境，农夫山泉建立了完善的全国性销售渠道，依托大数据系统持续提升分销效率。截至2019年，农夫山泉 通过销售人员的手机终端系统管理全国4000余个经销商，1万余名一线销售及销售管理人员，并通过大数据分析系统管理经销商库存，严控产品终端货龄，提升运营效率。</p>
            <hr color="red" width="15px" align="left" style="margin-top: 50px;">
            <br><br>
            </div>
            <div class="cs43">
                <p class="cs45" style=" border-right: 1px solid rgba(0, 0, 0,.1);">全国经销商<br><span style="font-size: 80px;">4000<sup>+</sup></span></p>
            </div>
            <div class="cs44">
                <p class="cs46">全国一线销售人员<br><span style="font-size: 80px;">10000<sup>+</sup></span></p>
            </div>
        </div>
        <div class="cs47">
        </div>
    </div>
    <div class="cs48">
    </div>

    <div class="cs49">
        <div class="cs50">
            <p class="cs52">积极投身社会公益事业</p>
            <p class="cs53" style="color: rgba(0, 0, 0,.5);">农夫山泉一贯积极投身和倡导社会公益事业。不论是1998年长江抗洪，<BR>还是2008年汶川地震、2010年云南大旱，我们都会竭尽所能帮助灾区民<BR>众。我们还发起了旨在帮助贫困地区学校改善体育设施的“阳光工程”，以<BR>及旨在帮助水源地的贫困孩子、感恩水源地人民的“饮水思源”等多项公益<BR>活动。我们将公益活动作为我们应尽的社会责任。</p>
        </div>
        <div class="cs51"></div>
    </div>
    <div class="cs55"> 
        <p class="cs56">以初心，执着坚持，专注未来，<br><br>铸就中国饮料超级品牌。</p>
    </div>

    <div class="cs57">
        <div class="cs58">
            <ul class="cs59">
                <li class="cs60">关于我们
                    <ul>
                        <li>公司介绍</li>
                        <li>公司管理层</li>
                        <li>企业大事记</li>
                        <li>人和文化</li>
                        <li>宣传片</li>
                     </ul>
                </li>
                <li class="cs60">旗下产品
                    <ul>
                        <li>水类</li>
                        <li>茶类</li>
                        <li>功能饮料类</li>
                        <li>果汁类</li>
                        <li>其他类</li>
                    </ul>
                </li>
                <li class="cs60">水源地与产地
                    <ul>
                        <li>水源介绍</li>
                        <li>种植基地介绍</li>
                        <li>工厂介绍</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="cs61">
            <p class="cs62">
                <span style="display: block;margin-top: 90px; font-size: 19px;color: black;">关于我们</span><br><BR>
                <span style="font-size: 30px; color: red;">95077<sup>&#9743</sup></span>
                <span style="color: grey;font-size: 18px;">全国订水服务热线</span><br>
                <span style="color: rgb(80, 84, 83);margin: 20px 10%; font-size: 18px;">地址：杭州市西湖区葛衙庄181号（310024）</span><br>
                <span style="color: grey;">&#9744关注微信公众号</span>
            </p>
        </div>
        <div class="cs63">
            <P style="color: gray;">&copy;021 Nongfu Spring. All rights reserved. 浙ICP备10201315号-3</P>
        </div>
        <div class="cs64"></div>
    </div>
</body>
</html>
若与云飘
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
072-075

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>072</title></head><body> <style>
复制链接

扫一扫