master

分支 (2)

管理

管理

master

main

wood-structure-buildings-in-Western-Sichuan
/
Monomer.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简介</title>
    <link rel="stylesheet" href="css/sea.css">
    <link rel="stylesheet" href="css/lake.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/animate.min.css">

    <link rel="stylesheet" href="css/birds.css">
    <script src="js/swiper-bundle.min.js"></script>

    <script src="js/switchMode.js" data-type="attach"></script>

    <script src="js/lake.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/home.js" data-type="attach"></script>
    <script src="js/common.js" data-type="attach"></script>
    <script src="js/jquery-3.3.1.js"></script>
</head>

<body class="pageLoading">

    <h1 class='head-logo'>
        <a href='./index.html'>
            <span></span>
        </a>
    </h1>

<!--    <nav class='gnav'>-->
<!--        <div class='gnav-wrap'>-->
<!--            <div class='gnav-container'>-->
<!--                <ul class='gnav-main'>-->
<!--                    <li class='gnav-main__item'>-->
<!--                        <a href='Monomer.html' class='gnav-anc'>-->
<!--                            <img class='gnav-main__title' src='images/common/title/sea_letter.png' id='ocean' alt='海'>-->
<!--                            <span class='gnav-main__description'>东指羲和能走马 海尘新生石山下</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class='gnav-main__item'>-->
<!--                        <a href='lake.html' class='gnav-anc'>-->
<!--                            <img class='gnav-main__title' src='images/common/title/lake_letter.png' id='lake' alt='湖'>-->
<!--                            <span class='gnav-main__description'>沙漠回看清禁月 湖山应梦武林春</span>-->
<!--                        </a>-->
<!--                    </li>-->

<!--                    <li class='gnav-main__item'>-->
<!--                        <a href='river.html' class='gnav-anc'>-->
<!--                            <img class='gnav-main__title' src='images/common/title/river_letter.png' id='river' alt='川'>-->
<!--                            <span class='gnav-main__description'>百川东到海 何时复西归</span>-->
<!--                        </a>-->
<!--                    </li>-->

<!--                    <li class='gnav-main__item'>-->
<!--                        <a href='mountain.html' class='gnav-anc'>-->
<!--                            <img class='gnav-main__title' src='images/common/title/mountain_letter.png' id='mountain'-->
<!--                                alt='山'>-->
<!--                            <span class='gnav-main__description'>会当凌绝顶 一览众山小</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            <div class='gnav-news'>-->
<!--                <ul class='gnav-news-list'>-->
<!--                    <li class='gnav-news-list__item'>-->
<!--                        <a href='Monomer.html' class='anc-hover anc-hover_visible'>-->
<!--                            <figure class='gnav-news-list__image'>-->
<!--                                <img src='images/home/sea.jpg' alt='海'>-->
<!--                            </figure>-->
<!--                            <h2 class='gnav-news__title'>海阔凭鱼跃，天高任鸟飞。</h2>-->
<!--                        </a>-->
<!--                    </li>-->

<!--                    <li class='gnav-news-list__item'>-->
<!--                        <a href='river.html' class='anc-hover anc-hover_visible'>-->
<!--                            <figure class='gnav-news-list__image'>-->
<!--                                <img src='images/common/mountain_hua_01.jpg ' alt='川'>-->
<!--                            </figure>-->
<!--                            <h2 class='gnav-news__title'>川从陕路去，河绕华阴流。</h2>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class='gnav-news-list__item'>-->
<!--                        <a href='lake.html' class='anc-hover anc-hover_visible'>-->
<!--                            <figure class='gnav-news-list__image'>-->
<!--                                <img src='images/home/lake.JPG' alt='湖'>-->
<!--                            </figure>-->
<!--                            <h2 class='gnav-news__title'>八月白露降，湖中水方老。</h2>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class='gnav-news-list__item'>-->
<!--                        <a href='mountain.html' class='anc-hover anc-hover_visible'>-->
<!--                            <figure class='gnav-news-list__image'>-->
<!--                                <img src='images/home/mountain.jpg' alt='山'>-->
<!--                            </figure>-->
<!--                            <h2 class='gnav-news__title'>暮从碧山下，山月随人归。</h2>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->

<!--        </div>-->

<!--    </nav>-->
<!--    <header class='header'>-->
<!--        <div class='header-wrap'>-->
<!--            <div id="switch">-->
<!--                <img src='./images/common/moon.svg' id='moon' alt='themeIcon' class='themeIcon'>-->
<!--            </div>-->
<!--            <div class='header-reserve translate-btn'>-->
<!--                <a href='#' class='jp'>回到顶部</a>-->
<!--            </div>-->
<!--        </div>-->
<!--    </header>-->

    <h1 class='head-logo'>
        <a href='./index.html'>
            <span>川西民居</span>
        </a>
    </h1>


    <div class='translate-btn'>
        <a href='./Monomer_en.html' >En</a>
    </div>

    <main id="state" class="main">

        <div class="page_head">

            <div class="bird-container bird-container--one">
                <div class="bird bird--one"></div>
            </div>

            <div class="bird-container bird-container--two">
                <div class="bird bird--two"></div>
            </div>

            <div class="bird-container bird-container--three">
                <div class="bird bird--three"></div>
            </div>

            <div class="bird-container bird-container--four">
                <div class="bird bird--four"></div>
            </div>
            <div class="page_head_title"><span>简介</span></div>

        </div>


        <!-- contents -->
        <div class="contents">


            <!--轮播图-->
            <ul class="lake_img">
                <li class="lake_img_item">
                    <picture>
                        <img src="./images/lake/lake_swiper/monomer01.jpg" alt="">
                    </picture>
                </li>
                <li class="lake_img_item">
                    <picture>
                        <img src="./images/lake/lake_swiper/monomer02.jpg" alt="">
                    </picture>
                </li>
                <li class="lake_img_item">
                    <picture>
                        <img src="./images/lake/lake_swiper/monomer03.jpg" alt="">
                    </picture>
                </li>
                <li class="lake_img_item">
                    <picture>
                        <img src="./images/lake/lake_swiper/monomer04.jpg" alt="">
                    </picture>
                </li>
                <li class="lake_img_item">
                    <picture>
                        <img src="./images/lake/lake_swiper/monomer01.jpg" alt="">
                    </picture>
                </li>
                <li class="lake_img_item">
                    <picture>
                        <img src="./images/lake/lake_swiper/monomer02.jpg" alt="">
                    </picture>
                </li>
                <li class="lake_img_item">
                    <picture>
                        <img src="./images/lake/lake_swiper/monomer03.jpg" alt="">
                    </picture>
                </li>
                <li class="lake_img_item">
                    <picture>
                        <img src="./images/lake/lake_swiper/monomer04.jpg" alt="">
                    </picture>
                </li>
            </ul>

            <section class="sea_sec">
                <div class="sea_text">
                    <p>
                        <span class="first_word">简介</span>
                        <br>
                    </p>
                    <p>
                        <span>川西民居诞生于川西平原，多以木结构为主，用材因地制宜、因材设计，讲究“天人合一”自然观与环境观。经历了漫长的发展历程，川西传统木结构民居自成一家，成为相对独特的民居建筑样式，是中国民居中的瑰宝。</span>
                        <br>
                    </p>
                </div>
                <ul class="image_multi">
<!--                    <li><img src="./images/sea/strcture4.jpg" alt=""></li>-->
<!--                    <li><img src="./images/sea/strcture1.jpg" alt=""></li>-->
<!--                    <li><img src="./images/sea/strcture2.jpg" alt=""></li>-->
<!--                    <li><img src="./images/sea/strcture3.jpg" alt=""></li>-->
                </ul>
            </section>

<!--            <section class="sea_sec">-->
<!--                <div class="sea_text">-->
<!--                    <p>-->
<!--                        <span class="first_word">天井</span>-->
<!--                        <br>-->
<!--                    </p>-->
<!--                    <p>-->
<!--                        <span>天井是指宅院中房与房之间或房与围墙之间所围成的露天空地。即四面有房屋、三面有房屋另一面有围墙或两面有房屋另两面有围墙时中间的空地。</span>-->
<!--                        <br>-->
<!--                        <span>“天井”普遍存在于明清至今的中国传统民居中，同时街道场镇店居里也可见天井，小的仅有一尺间宽。</span>-->
<!--                        <br>-->
<!--                        <span>天井一般有三个主要用途：改善采光，加强通风，组织排水。</span>-->
<!--                        <br> <span>川西地区空气潮湿、温差较小，且宅深屋多，天井借助风压差将屋内的潮气与灰尘排于屋外；</span>-->
<!--                    </p>-->
<!--                    <p>-->
<!--                        <span>还建有抽风天井或抽风口，以利于形成良好的穿堂风。</span>-->
<!--                        <br>-->
<!--                        <span>天井内的房檐设置成向内斜坡状，雨水顺着房檐流入天井再可聚集排出院外，寓意水聚天心，称“四水归堂”。</span>-->
<!--                        <br>-->
<!--                        <span>在传统的中国风水观中，水意味着“财气”，水聚天心，意味着“财不外流”。</span>-->
<!--                        <br>-->
<!--                    </p>-->

<!--                </div>-->
<!--            </section>-->

<!--            <section class="sea_sec">-->

<!--                <ul class="image_single">-->
<!--                    <li class="image_multi_wide"><img src="./images/sea/building8.webp" alt=""></li>-->
<!--                </ul>-->

<!--            </section>-->

<!--            <section class="sea_sec">-->
<!--                <div class="sea_text">-->
<!--                    <p>-->
<!--                        <span class="first_word">结论</span>-->
<!--                        <br>-->
<!--                    </p>-->
<!--                    <p>-->
<!--                        <span>“青瓦出檐长，穿斗白粉墙，宅前敞院坝，四周立檐廊”，独特的穿斗木结构、冷滩瓦工艺、大出檐构造、天井院坝设计钧鲜明地展现了川西人民的创新意识与实践精神。结合当地自然条件，充分利用土地资源，川西坝子的传统民居力求建设“天人合一”的宜居空间。川西民居蕴含着多彩文化，在城市现代化的快速发展的今天，我们应该竭尽全力，保护与传承这一地方建筑文化。</span>-->
<!--                        <br>-->
<!--                    </p>-->
<!--                </div>-->
<!--            </section>-->

        </div>
        <!-- introduction -->
        <div class="introduction">
            <div class="introduction_img"><img
                    src="./images/temp/vintage-fairytale-houses-in-austrian-mountains-picjumbo-com.jpg" alt="">
            </div>
        </div>

    </main>

    <!-- footer -->
    <footer id="global-footer">
        <div class="container">
            <p class="footer-text">川西木结构民居文化<br> Culture Connotation of the Traditional Western Sichuan Dwellings</p>
            <img class="footer_img" src="./images/common/footer_icon.png" alt="footer_icon">
        </div>
    </footer>

    <div id="loader">
        <div id="loadBar" class="animated slideInLeft"></div>
    </div>

    <div class="scrollIndicator"></div>
    <script>
        // var theme = "light"
        // //主页、目录的深色/浅色主题变化
        // function switchMode() {
        //     var element = document.body
        //     element.classList.toggle("darktype")
        //     //山页面图片
        //     var icon = document.getElementById('moon')
        //     var head_logo = document.getElementById('head_logo')
        //     var page_letter = document.getElementById('sea_letter')
        //     //目录页图片
        //     var ocean = document.getElementById("ocean")
        //     var lake = document.getElementById("lake")
        //     var river = document.getElementById("river")
        //     var mountain = document.getElementById("mountain")
        //     console.log(icon)
        //     console.log(theme)
        //     if (theme == "dark") {
        //         //主页部分图片变化为浅色主题状态
        //         icon.src = "./images/common/moon.svg"
        //         head_logo.src = "./images/home/head_logo.png"
        //         page_letter.src = "./images/common/title/sea_letter.png"
        //         //目录页部分图片变化为浅色主题状态
        //         ocean.src = "./images/common/title/sea_letter.png"
        //         lake.src = "./images/common/title/lake_letter.png"
        //         river.src = "./images/common/title/river_letter.png"
        //         mountain.src = "./images/common/title/mountain_letter.png"
        //         theme = "light"
        //     } else {
        //         //主页部分图片变化为深色主题状态
        //         icon.src = "./images/common/sun.svg"
        //         head_logo.src = "./images/home/head_logo_dark.png"
        //         page_letter.src = "./images/common/title/sea_letter_dark.png"
        //         //目录页部分图片变化为浅色主题状态
        //         ocean.src = "./images/common/title/sea_letter_dark.png"
        //         lake.src = "./images/common/title/lake_letter_dark.png"
        //         river.src = "./images/common/title/river_letter_dark.png"
        //         mountain.src = "./images/common/title/mountain_letter_dark.png"
        //         theme = "dark"
        //     }
        // }

        //Scroll事件，对每一个image_single的img添加fadeInUp动画
        $(function () {
            this.handleScroll = function () {
                let currentScroll = window.pageYOffset + window.innerHeight;
                // console.log(currentScroll);
                //$(".imgae_single img")是一个对象数组
                let el = $(".image_single img");
                // console.log(el);
                for (let i = 0; i < el.length; i++) {
                    if (el[i].offsetTop < currentScroll) {
                        $(el[i]).addClass('animated fadeInUp');
                        // console.log('success!');
                    } else {
                        $(el[i]).removeClass('fadeInUp');
                    }
                }
            }
            window.addEventListener('scroll', this.handleScroll, true);
        })

        //高亮事件
        $(function () {
            //鼠标进入的时候,其他的li标签透明度：0.5
            $(".image_multi li").hover(function () {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function () {
                // 鼠标离开，其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(400, 1);
            })
        });
    </script>
</body>


</html>