一个具有顶部,底部和中间的html页面,但没有js
- 个性推荐 歌单 主播电台 排行榜 私人FM 每日歌曲推荐 云音乐新歌榜 推荐歌单 一生中最爱的是谁谁? 一生中最爱的是谁谁? 一生中最爱的是谁谁? 一生中最爱的是谁谁? 一生中最爱的是谁谁? 一生中最爱的是谁谁? 一生中最爱 谭咏麟
复制代码- page { height: 100%;}.root { display: flex; flex-direction: column; height: 100%; background-color: #f0f0f0;}.tabs { display: flex; background-color: pink;}.tabs .item { flex: 1; text-align: center; font-size: 12px; background-color: #222; color: #ccc; padding: 8px 0;}.tabs .item.active { color: #fff; border-bottom: 2px solid #e9232c;}.content { flex: 1; background-color: #111214; color: #ccc; overflow: hidden;}.slide image { width: 100%; height: 130px;}.portals { display: flex; margin-bottom: 15px;}.portals .item { flex: 1;}.portals .item image { width: 60px; height: 60px; display: block; margin: 10px auto;}.portals .item text { display: block; font-size: 12px; text-align: center;}.list .title { margin: 5px 10px; font-size: 14px;}.list .inner { display: flex; flex-wrap: wrap;}.list .inner .item { width: 33.33333333%;}.list .inner .item image { display: block; width: 120px; height: 120px; margin: 0 auto;}.list .inner .item text { font-size: 14px;}.player { display: flex; height: 50px; background-color: #17181A;}.poster image { width: 40px; height: 40px; margin: 5px;}.info { flex: 1; color: #888; font-size: 14px; margin: 5px;}.info .title{ display: block; font-size: 16px; color: #ccc;}.controls image { width: 40px; height: 40px; margin: 5px 2px;}
复制代码 可以改一下页面的固定样式部分- { "navigationBarTitleText": "Music Player", "navigationBarBackgroundColor": "#333", "navigationBarTextStyle": "white"}
复制代码 ```
免责声明:本文内容部分来源于网络,出于网络分享目的,如对您的权益版权有异议我们将予以删除,谢谢合作! |
|