html页面简单,wx-一个简单页面

一个具有顶部，底部和中间的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"

}

```