|
|
@@ -5,7 +5,7 @@
|
|
|
<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_5060986_u20sk30q3k8.css">
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5060986_2rvbxzmk7lh.css">
|
|
|
<style>
|
|
|
/* 重置样式 css reset */
|
|
|
*{
|
|
|
@@ -116,6 +116,35 @@
|
|
|
left: 25vw;
|
|
|
}
|
|
|
/* 导航部分 end */
|
|
|
+ /* 底部tab按钮 start */
|
|
|
+ .footer{
|
|
|
+ height: 1rem;
|
|
|
+ background-color: #fff;
|
|
|
+ border-top: 1px solid #d8d8d8;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .footer span{
|
|
|
+ font-size: .2rem;
|
|
|
+ }
|
|
|
+ .footer ul{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .footer li{
|
|
|
+ height: 1rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ text-align: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #696969;
|
|
|
+ }
|
|
|
+ .footer li.active{
|
|
|
+ color: #e54847;
|
|
|
+ }
|
|
|
+ /* 底部tab按钮 end */
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -127,6 +156,7 @@
|
|
|
<i class="iconfont icon-menu"></i>
|
|
|
</div>
|
|
|
</header>
|
|
|
+ <!-- 顶部导航 -->
|
|
|
<nav>
|
|
|
<div class="address">
|
|
|
<span>哈尔滨</span>
|
|
|
@@ -144,6 +174,27 @@
|
|
|
<i class="iconfont icon-Search"></i>
|
|
|
</div>
|
|
|
</nav>
|
|
|
+ <!-- 底部tab按钮 -->
|
|
|
+ <div class="footer">
|
|
|
+ <ul>
|
|
|
+ <li class="active">
|
|
|
+ <i class="iconfont icon-dianyingpiaoiocn"></i>
|
|
|
+ <span>电影/影院</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-dianshiju"></i>
|
|
|
+ <span>视频</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-yanchu"></i>
|
|
|
+ <span>演出</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-user1"></i>
|
|
|
+ <span>我的</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 引入rem.js文件 动态设置html字体大小 -->
|
|
|
<script src="./rem.js"></script>
|
|
|
@@ -151,6 +202,7 @@
|
|
|
// 获取元素
|
|
|
var aNavBtn = document.querySelectorAll(".nav-btn li");
|
|
|
var oNavBtn = document.querySelector(".nav-btn");
|
|
|
+ var aTabBtn = document.querySelectorAll(".footer li");
|
|
|
// 为顶部导航添加点击事件
|
|
|
for(var i=0;i<aNavBtn.length;i++){
|
|
|
aNavBtn[i].ontouchstart = function(){
|
|
|
@@ -165,6 +217,17 @@
|
|
|
|
|
|
}
|
|
|
}
|
|
|
+ // 为底部tab按钮添加点击事件
|
|
|
+ for(var i=0;i<aTabBtn.length;i++){
|
|
|
+ aTabBtn[i].ontouchstart = function(){
|
|
|
+ // 移除所有按钮的选中效果
|
|
|
+ for(var j=0;j<aTabBtn.length;j++){
|
|
|
+ aTabBtn[j].classList.remove("active");
|
|
|
+ }
|
|
|
+ // 添加当前按钮的选中效果
|
|
|
+ this.classList.add("active");
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
