lovecoding
/
W250511


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_7d5k4ej4p9u.css">
    <style>
        /* css reset */
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        /* 头部区域 开始 */
        .top-fixed{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }
        .fixed-content .top-fixed header {
            height: 1rem;
            width: 100%;
            background-color: #e54847;
            font-size: 0.3rem;
            color: #fff;
            position: relative;
            line-height: 1rem;
            text-align: center;
        }

        .fixed-content .top-menu {
            position: absolute;
            right: 10px;
            top: 0;
        }

        .fixed-content .top-menu i {
            font-size: 30px;
        }

        /* 头部区域 结束 */
        /* 导航区域 开始 */

        .nav-left .arr {
            display: block;
            width: 0;
            height: 0;
            border-right: 5px solid rgba(0, 0, 0, 0);
            border-left: 5px solid rgba(0, 0, 0, 0);
            border-bottom: 5px solid rgba(0, 0, 0, 0);
            border-top: 5px solid #b0b0b0;
        }

        nav {
            background-color: #fff;
            font-size: 0.3rem;
            display: flex;
            justify-content: space-between;
            height: 1rem;
            line-height: 1rem;
            padding: 0 .2rem;
            border-bottom: .02rem solid #e6e6e6;
        }

        nav .nav-center ul {
            display: flex;
        }

        .nav-left {
            display: flex;
        }

        .nav-left span {
            font-size: .28rem;
            color: #b0b0b0;
        }

        .nav-left .arr {
            margin-top: .5rem;
        }

        .nav-center {
            font-size: .3rem;
            color: #666;
            font-weight: 700;
            position: relative;
        }

        .nav-center .tab-line {
            position: absolute;
            bottom: .08rem;
            left: .24rem;
            width: .5rem;
            height: .06rem;
            background-color: #e54847;
            border-radius: 1px;
        }

        .nav-center li {
            margin: 0 10px;
        }

        .nav-right .iconfont {
            font-size: .5rem;
            color: #e54847;
            font-weight: bold;
        }

        /* 导航区域 结束 */
        /* 底部导航区域 开始 */
        footer{
            height: 1rem;
            width: 100%;
            border-top: .01rem solid #d8d8d8;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #fff;
        }
        footer ul{
            display: flex;
            justify-content: space-around;
        }
        footer ul li{
            font-size: .2rem;
            color: #696969;
            text-align: center;
            padding-top: .1rem;
        }
        footer li .iconfont{
            font-size: .5rem;
        }
        footer .active{
            color: #f03d37;
        }
        /* 底部导航区域 结束 */
        .scroll-content{
            height: 500vh;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="app">
        <!-- 顶部导航及底部导航区域 -->
        <div class="fixed-content">
            <div class="top-fixed">
                <!-- 头部区域 开始 -->
                <header>
                    <span>猫眼电影</span>
                    <div class="top-menu">
                        <i class="iconfont icon-ego-menu"></i>
                    </div>
                </header>
                <!-- 头部区域 结束 -->
                <!-- 导航区域 开始 -->
                <nav>
                    <div class="nav-left">
                        <span>北京</span>
                        <i class="arr"></i>
                    </div>
                    <div class="nav-center">
                        <ul>
                            <li>热映</li>
                            <li>影院</li>
                            <li>待映</li>
                        </ul>
                        <div class="tab-line"></div>
                    </div>
                    <div class="nav-right">
                        <i class="iconfont icon-search"></i>
                    </div>
                </nav>
                <!-- 导航区域 结束 -->
            </div>
            <footer>
                <ul>
                    <li class="active">
                        <i class="iconfont icon-dianying"></i>
                        <p>电影</p>
                    </li>
                    <li>
                        <i class="iconfont icon-shipin"></i>
                        <p>视频</p>
                    </li>
                    <li>
                        <i class="iconfont icon-yanchu"></i>
                        <p>演出</p>
                    </li>
                    <li>
                        <i class="iconfont icon-wode"></i>
                        <p>我的</p>
                    </li>
                </ul>
            </footer>
        </div>
        <!-- 滚动区域 内容区域 -->
        <div class="scroll-content"></div>
    </div>
    <script src="./js/rem.js"></script>
    <script>

    </script>
</body>

</html>