Wx – a simple page

Time:2020-3-14

An HTML page with top, bottom, and middle, but no JS

Personality recommendation
    
    
      song sheet
    
    
      Anchor station
    
    
      Ranking List
    
  
  
  
    
      
        
      
      
        
      
      
        
      
    
    
      
        
        Private FM
      
      
        
        Daily song recommendation
      
      
        
        Cloud music new song list
      
    
    
      
        推荐song sheet
      
      
        
          
          Who is the favorite in life?
        
        
          
          Who is the favorite in life?
        
        
          
          Who is the favorite in life?
        
        
          
          Who is the favorite in life?
        
        
          
          Who is the favorite in life?
        
        
          
          Who is the favorite in life?
        
      
    
  
  
  
    
      
    
    
      Love in life
      Alan Tam
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;
}

You can change the fixed style part of the page

{
    "navigationBarTitleText": "Music Player",
    "navigationBarBackgroundColor": "#333",
    "navigationBarTextStyle": "white"
}

“`