index.html 10.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>首页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/swiper.min.css">

    <script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<div class="head">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/sun_15.png" alt="" >
            </div>
            <div class="swiper-slide">
                <img src="img/sun_15.png" alt="" >
            </div>
            <div class="swiper-slide">
                <img src="img/sun_15.png" alt="" >
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="tophead">
        <div class="topheadleft">
            <div class="topheadleftimg">
                <img src="img/sun_13.png" alt="">
            </div>

            <div class="topheadrightname">北京</div>
        </div>
        <div class="topheadmiddle">
            <input type="text">
        </div>
        <div class="topheadright">
            <div class="topheadrightimg">
                <img src="img/sun_14.png" alt="">
            </div>
            <div class="topheadrightname">消息</div>
        </div>
    </div>
</div>

<div class="body">
    <div class="chuzulist">

        <div class="chuzuitem">
            <img src="img/sun_16.png" alt="">
            <div class="chuzuname">房屋出售</div>
        </div>
        <div class="chuzuitem">
            <img src="img/sun_17.png" alt="">
            <div class="chuzuname">房屋出租</div>
        </div>
        <div class="chuzuitem">
            <img src="img/sun_18.png" alt="">
            <div class="chuzuname1">写字楼出租</div>
        </div>
    </div>

    <div class="fangwulist">
        <div class="fangwulsititem">
            <div class="fangwuimg">
                <img src="img/sun_19.png" alt="">
            </div>
            <div class="fangwuname">房屋求购</div>

        </div>
        <div class="fangwulsititem">
            <div class="fangwuimg">
                <img src="img/sun_20.png" alt="">
            </div>
            <div class="fangwuname">房屋求租</div>

        </div>
        <div class="fangwulsititem">
            <div class="fangwuimg">
                <img src="img/sun_21.png" alt="">
            </div>
            <div class="fangwuname">商铺出租</div>

        </div>
        <div class="fangwulsititem">
            <div class="fangwuimg">
                <img src="img/sun_22.png" alt="">
            </div>
            <div class="fangwuname">求房赚钱</div>

        </div>

    </div>

    <div class="guanyu">关于我们</div>

    <div class="aboutusbox">
        <div class="aboutboxleft">
            <img src="img/sun_23.png" alt="">
            <div class="aboutword">
                <text class="chubei">平均出售</text>
                <text class="chubeinum">15</text> <text class="chubei"></text>


            </div>
        </div>

        <div class="aboutboxright">
            <div class="aboutrtop">
                <div class="abouttopleft">
                    <img src="img/sun_24.png" alt="">
                    <div class="aboutword">
                        <text class="chubei">储备买家</text>
                        <text class="chubeinum">68302</text>


                    </div>
                </div>
                <div class="abouttopright">
                    <img src="img/sun_25.png" alt="">

                    <div class="aboutword">
                        <text class="chubei">全城经纪人</text>
                        <text class="chubeinum">68302</text>
                    </div>
                </div>
            </div>
            <div class="aboutbottom">
                <img src="img/sun_26.png" alt="">
                <div class="aboutword">
                    <text class="chubei">全城中介</text>
                    <text class="chubeinum">68302</text>


                </div>
            </div>
        </div>

    </div>
    <div class="mianimg">
        <img src="img/sun_28.png" alt="">
        <div class="mianbox">
            <div class="mianboxtop">免中介网 让买房更真实简单</div>
            <div class="mianitembox mianbox1">
                <div class="mianitemboxleft">
                    <img src="img/sun_102.png" alt="">
                </div>
                <div class="mianitemboxright">隐私保护</div>
            </div>
            <div class="mianitembox">
                <div class="mianitemboxleft">
                    <img src="img/sun_101.png" alt="">
                </div>
                <div class="mianitemboxright">免费上门评估</div>
            </div>
            <div class="mianitembox">
                <div class="mianitemboxleft">
                    <img src="img/sun_100.png" alt="">
                </div>
                <div class="mianitemboxright">全城中介帮卖</div>
            </div>
        </div>
    </div>

    <div class="remen">
        <div class="remenleft">
            <img src="img/sun_27.png" alt="">
        </div>
        <div class="remenright">热门房源</div>
    </div>

    <div class="fangwulist">
        <div class="fangwulistitem fangwuactive">房屋出售</div>
        <div class="fangwulistitem">房屋出租</div>
        <div class="fangwulistitem">写字楼出租</div>
        <div class="fangwulistitem">商铺出租</div>
    </div>

    <div class="fangwubox">
        <div class="fangwuboxitem">
            <div class="fangwuboxitemleft">
                <img src="img/house.png" alt="">
            </div>
            <div class="fangwuitemright">
                <div class="fangitemritop">
                    <div class="fangitemtopleft">热门</div>
                    <div class="fangitemtoprightname">首创路程西府海棠</div>
                </div>
                <div class="room">
                    <div class="roomleft">三室两厅</div>
                    <div class="pingfang">120㎡</div>
                </div>
                <div class="kaojin">
                    <div class="kaojinleft">品牌房企</div>
                    <div class="kaojinright">临近地铁</div>
                </div>

                <div class="moneyyue">8000元/月</div>
            </div>
        </div>
        <div class="fangwuboxitem">
            <div class="fangwuboxitemleft">
                <img src="img/house.png" alt="">
            </div>
            <div class="fangwuitemright">
                <div class="fangitemritop">
                    <div class="fangitemtopleft1">新上</div>
                    <div class="fangitemtoprightname">首创路程西府海棠</div>
                </div>
                <div class="room">
                    <div class="roomleft">三室两厅</div>
                    <div class="pingfang">120㎡</div>
                </div>
                <div class="kaojin">
                    <div class="kaojinleft">品牌房企</div>
                    <div class="kaojinright">临近地铁</div>
                </div>

                <div class="moneyyue">8000元/月</div>
            </div>
        </div>
        <div class="fangwuboxitem">
            <div class="fangwuboxitemleft">
                <img src="img/house.png" alt="">
            </div>
            <div class="fangwuitemright">
                <div class="fangitemritop">
                    <div class="fangitemtopleft">热门</div>
                    <div class="fangitemtoprightname">首创路程西府海棠</div>
                </div>
                <div class="room">
                    <div class="roomleft">三室两厅</div>
                    <div class="pingfang">120㎡</div>
                </div>
                <div class="kaojin">
                    <div class="kaojinleft">品牌房企</div>
                    <div class="kaojinright">临近地铁</div>
                </div>

                <div class="moneyyue">8000元/月</div>
            </div>
        </div>
        <div class="fangwuboxitem">
            <div class="fangwuboxitemleft">
                <img src="img/house.png" alt="">
            </div>
            <div class="fangwuitemright">
                <div class="fangitemritop">
                    <div class="fangitemtopleft">热门</div>
                    <div class="fangitemtoprightname">首创路程西府海棠</div>
                </div>
                <div class="room">
                    <div class="roomleft">三室两厅</div>
                    <div class="pingfang">120㎡</div>
                </div>
                <div class="kaojin">
                    <div class="kaojinleft">品牌房企</div>
                    <div class="kaojinright">临近地铁</div>
                </div>

                <div class="moneyyue">8000元/月</div>
            </div>
        </div>
    </div>

    <div class="seemore">查看更多</div>

</div>

<div class="foot">
    <div class="footitem">
        <div class="footitemtop">
            <img src="img/sun_05.png" alt="">
        </div>
        <div class="itembottom1">首页</div>
    </div>
    <div class="footitem">
        <div class="footitemtop">
            <img src="img/sun_06.png" alt="">
        </div>
        <div class="itembottom">房源</div>
    </div>
    <div class="footitem">
        <div class="footitemtop">
            <img src="img/sun_07.png" alt="">
        </div>
        <div class="itembottom">发布房源</div>
    </div>
    <div class="footitem">
        <div class="footitemtop">
            <img src="img/sun_08.png" alt="">
        </div>
        <div class="itembottom">我的</div>
    </div>



</div>


</body>

<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>

<script>

    var mySwiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
        autoplay: true,//可选选项,自动滑动

    })

    $(".fangwulistitem").click(function(){
        $(this).addClass("fangwuactive").siblings(".fangwulistitem").removeClass("fangwuactive")
    })
</script>
</html>