一个具有顶部,底部和中间的html页面,但没有js

<view class="root">
<!-- 标签栏的页签 固定高度 -->
<view class="tabs">
<view class="item active">
<text>个性推荐</text>
</view>
<view class="item">
<text>歌单</text>
</view>
<view class="item">
<text>主播电台</text>
</view>
<view class="item">
<text>排行榜</text>
</view>
</view>
<!-- 内容区域 自适应高度 -->
<scroll-view class="content" scroll-y>
<swiper class="slide" autoplay indicator-dots>
<swiper-item>
<image src="../../images/slide.png"></image>
</swiper-item>
<swiper-item>
<image src="../../images/slide.png"></image>
</swiper-item>
<swiper-item>
<image src="../../images/slide.png"></image>
</swiper-item>
</swiper>
<view class="portals">
<view class="item">
<image src="../../images/04.png"></image>
<text>私人FM</text>
</view>
<view class="item">
<image src="../../images/05.png"></image>
<text>每日歌曲推荐</text>
</view>
<view class="item">
<image src="../../images/06.png"></image>
<text>云音乐新歌榜</text>
</view>
</view>
<view class="list">
<view class="title">
<text>推荐歌单</text>
</view>
<view class="inner">
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
</view>
</view>
</scroll-view>
<!-- 播放控制条条 固定高度 -->
<view class="player">
<view class="poster">
<image src="../../images/poster.jpg"></image>
</view>
<view class="info">
<text class="title">一生中最爱</text>
<text class="artist">谭咏麟</text>
</view>
<view class="controls">
<image src="../../images/01.png"></image>
<image src="../../images/02.png"></image>
<image src="../../images/03.png"></image>
</view>
</view>
</view>
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"
}

wx-一个简单页面的更多相关文章

  1. Extjs6(三)——用extjs6.0写一个简单页面

    本文基于ext-6.0.0 一.关于border布局 在用ext做项目的过程中,最常用到的一种布局就是border布局,现在要写的这个简单页面也是运用border布局来做.border布局将页面分为五 ...

  2. 利用HttpClient写的一个简单页面获取

    之前就听说过利用网络爬虫来获取页面,感觉还挺有意思的,要是能进行一下偏好搜索岂不是可以满足一下窥探欲. 后来从一本书上看到用HttpClient来爬取页面,虽然也有源码,但是也没说用的HttpClie ...

  3. 如何用 Nodejs 分析一个简单页面

    本文目的 在浏览器地址栏中输入 localhost:3000,在页面显示 博客园首页 的 20 篇文章标题. 过程分析 首先需要端口的监听,这就需要引入 Node 中最重要的模块之一 express. ...

  4. React学习及实例开发(二)——用Ant Design写一个简单页面

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...

  5. PyCharm Django 显示一个简单页面

    1.创建项目及创建应用 如:创建一个名zqxt_tmpl的项目,创建一个 learn的应用 在(Terminal)中执行 django-admin.py startproject zqxt_tmpl ...

  6. ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  7. 一个简单的Webservice的demo(中)_前端页面调用

    首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...

  8. 实现iOS图片等资源文件的热更新化(五): 一个简单完整的资源热更新页面

    简介 一个简单的关于页面,有一个图片,版本号,App名称等,着重演示各个系列的文章完整集成示例. 动机与意义 这是系列文章的最后一篇.今天抽空写下,收下尾.文章本身会在第四篇的基础上,简单扩充下代码, ...

  9. HTML5实战教程———开发一个简单漂亮的登录页面

    最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...

  10. bootstrap 一个简单的登陆页面

    效果如图:用bootstrap 写的一个简单的登陆 一.修改样式 样式可以自己调整,例如换个背景色之类的,修改 background-color属性就可以 #from { background-col ...

随机推荐

  1. vue防抖节流之v-debounce--throttle使用指南

    最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...

  2. MySql分库分表与分区的区别和思考

    一.分分合合 说过很多次,不要拘泥于某一个技术的一点,技术是相通的.重要的是编程思想,思想是最重要的.当数据量大的时候,需要具有分的思想去细化粒度.当数据量太碎片的时候,需要具有合的思想来粗化粒度. ...

  3. Python编译升级

    [root@localhost python]# tar xvf Python-3.6.9.tgz [root@localhost python]# cd Python-3.6.9/ [root@lo ...

  4. python json序列化与反序列化操作

    python json序列化与反序列化操作 # dumps() dict-->str 序列化 # loads() str---dict 反序列化 result1 = json.dumps({'a ...

  5. django-formset实现数据表的批量操作

    什么是formset 我们知道forms组件是用来做表单验证,更准确一点说,forms组件是用来做数据库表中一行记录的验证.有forms组件不同,formset是同科同时验证表中的多行记录,即form ...

  6. 一个null,差点把系统给弄崩溃了

    今天生产上面发现了一个奇异的bug,URL上面会带上一个ID,这个ID是关联别的系统的,类似这种格式 xxx.xxx.xxx.xxx  ,是别的系统自己填写的,我们的URL会带上id=xxx.xxx. ...

  7. Mac系统安装文件提示文件已损坏,打不开解决办法

    Mac系统安装文件提示文件已损坏,打不开解决办法: 修改系统配置:系统偏好设置 - 安全性与隐私 - 任何来源”.如果没有“任何来源”这个选项,是因为你的系统是macOS Sierra 10.12,苹 ...

  8. Python之HTTP静态服务器-面向对象版开发

    利用面向对象的思想完成HTTP静态Web服务器的开发. 主要思路如下: 1.抽象出一个服务器类 1.1 编写类的对象属性 1.2 编写类的方法 注意: 在进行请求资源路径判断时,需要确认请求路径中是否 ...

  9. 《手把手教你》系列进阶篇之1-python+ selenium自动化测试 - python基础扫盲(详细教程)

    1. 简介 如果你从一开始就跟着宏哥看博客文章到这里,基础篇和练习篇的文章.如果你认真看过,并且手动去敲过每一篇的脚本代码,那边恭喜你,至少说你算真正会利用Python+Selenium编写自动化脚本 ...

  10. elk的搭建

    一:准备工作 1.准备一台虚拟机 192.168.175.222      elk-node2 2.关闭防火墙以及selinux 命令:systemctl stop firewalld       # ...