|
|
@@ -0,0 +1,161 @@
|
|
|
+<!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>
|
