Framework7 自定义样式

@航空母舰

于 2018-09-21 14:13:26 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： php

本文链接：https://blog.youkuaiyun.com/hudeyong926/article/details/99540693

javascript 专栏收录该内容

70 篇文章

订阅专栏

本文详细介绍了如何在divapp中通过指定id=app来自定义样式，包括如何覆盖默认样式，以及如何设置页面、导航栏、工具栏和列表的背景图片。通过使用特定的选择器，可以实现对应用外观的完全控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div app 这个body 里第一层，就是你的应用的意思。对于这个id="app" ,需要在你自定义app.js 中初始化

var app = new Framework7({root: "#app"});

所以在css中可以写#app class名，来自定义样式，这样官方固定的样式就会失效，如果不加#app 你写不起作用的，如果你自己写的样式就不用加#app。

使用背景图片

<div class="pages">
    <div class="page navbar-fixed toolbar-fixed">
        <div class="navbar"></div>
        <div class="page-content"></div>
        <div class="toolbar"></div>

css

#app .page{background: url(/statics/front2/images/game/step_bg.png) no-repeat; background-size: 100% 100%;}
#app .navbar{background: none;}
#app .navbar:after{background: none;background-color: transparent;}
#app .toolbar{background: none;}
#app .toolbar:before{background: none;background-color: transparent;}
#app .list ul{background: none;}