lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./rem.js"></script>
    <style>
        body{
            margin: 0;
        }
        ul{
            margin:0;
            padding:0;
        }
        li{
            list-style: none;
        }
        .container{
            font-size: .36rem;
        }
        /* 头部  */
        .top-head header{
            background-color: #e54847;
            height: 0.7rem;
            text-align: center;
            line-height: 0.7rem;
            position: relative;
        } 
        .top-head header span{
            color: #fff;
        }
        .top-head .more-btn{
            position: absolute;
            right: 20px;
            top:0;
        }
        .top-head .more-btn ul{
            position: absolute;
            top: 0.5rem;
            left: -1.5rem;
            width: 2rem;
            z-index: 1;
            box-shadow: 0 .06rem .18rem 0 rgba(0,0,0,.1);
        }
        .top-head .more-btn ul li{
            height: .9rem;
            line-height: .9rem;
            font-size: 0.3rem;
            text-align: center;
            color: #333;
            background-color: #fff;
            border-bottom: .02rem solid #f0f0f0;
        }
        .top-head .more-btn img{
            width: .3rem;
            height: .3rem;
        }
        /* 头部导航 */
        .top-head nav{
            height: .9rem;
            border-bottom: 0.02rem solid #e6e6e6;
            display: flex;
            justify-content: space-between;
            padding: 0 .2rem;
            align-items: center;
        }
        .top-head .nav-center{
            flex-grow:3;
            margin: 0 .2rem;
            position: relative;
        }
        .top-head .nav-center ul{
            display: flex;
            justify-content: space-around;
            font-size: .3rem;
            font-weight: 700;
            color: #666;
            align-items: center;
        }
        .top-head .nav-center .bottom-line{
            position: absolute;
            bottom: -5px;
            left: 4vw;
            width: .4rem;
            height: 3px;
            border-radius: 3px;
            background-color: #f03d37;
        }

        .top-head .nav-center .active{
            color: #333;
            font-size: .34rem;
        }
        .top-head .nav-right{
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .top-head .nav-right img{
            width: .4rem;
            height: .4rem;
        }
        .top-head .nav-left{
            display: flex;
            align-items: center;
            
        }
        .top-head .nav-left span{
            color: #666;
            font-size: .3rem;
        }
        .top-head .nav-left i{
            border-top:5px solid #666;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid transparent;
            transform: translate(3px,3px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="top-head">
            <header>
                <span>猫眼电影</span>
                <div class="more-btn">   
                    <img src="./img/list.png" alt="list">
                    <ul>
                        <li>首页</li>
                        <li>榜单</li>
                        <li>热点</li>
                        <li>商城</li>
                    </ul>
                </div>
            </header>
            <nav>
                <div class="nav-left">
                    <span>哈尔滨</span>
                    <i></i>
                </div>
                <div class="nav-center">
                    <ul>
                        <li class="active">热播</li>
                        <li>影院</li>
                        <li>待映</li>
                        <li>经典电影</li>
                    </ul>
                    <div class="bottom-line"></div>
                </div>
                <div class="nav-right">
                    <img src="./img/search.png" alt="img">
                </div>
            </nav>
        </div>
        <div class="center-content"></div>
        <div class="bottom-nav"></div>
    </div>
</body>
</html>