Framework7学习笔记之 卡片式效果

一：卡片效果

卡片效果是一种更好的内容展示风格，有标题、信纸背景、底部标注等。

二：定义卡片布局

<div class="card">
    <div class="card-header">标题</div>
    <div class="card-content">
        <!--卡片内容 -->
    </div>
    <div class="card-footer">卡片底部标注</div>
</div>

原文地址：https://www.cnblogs.com/ygj0930/p/8458441.html

时间： 2024-10-29 21:55:25

Framework7学习笔记之 卡片式效果的相关文章

JS学习笔记--轮播图效果

希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代码 <style> ul, ol { padding:0; margin:0; } li { list-style:none; } #box { width:600px; height:350px; border:10px solid #ccc; margin:0 auto; position:r

Android学习笔记_81_Android ProgressDialog 各种效果

1,弹出Dialog 屏幕不变暗. 创建一个样式就OK了:在styles.xml文件里添加样式: 1, <style name="dialog" parent="@android:style/Theme.Dialog">        <item name="android:windowFrame">@null</item>边框        <item name="android:window

Framework7学习笔记之 手风琴效果(折叠、展开效果)

一:手风琴效果 手风琴效果类似于列表视图,不同的地方在于:点击列表元素时,会展开列表元素,展示详细的元素信息,而不是跳转到详情页:再次点击,就折叠起来. 二:手风琴布局(list的升级版) <div class="list-block accordion-list">//增加accordion-list类 <ul> <li class="accordion-item"> <a href="#" class

【JQ学习笔记】提示的效果

<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> <p><a href

JQuery学习笔记-JQuery的动画效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untit

Android学习笔记(25):带动画效果的View切换ViewAnimator及其子类

ViewAnimator可以实现带动画效果的View切换,其派生的子类是一些带动画效果切换功能的组件. ViewAnimator支持的XML属性: Attribute Name Description android:animateFirstView 设置显示第一个View组件时是否使用动画 android:inAnimation 设置显示组件时使用的动画 android:outAnimation 设置隐藏组件时使用的动画 1. ViewSwitcher视图切换组件. 添加视图的方法: 由Vie

framework7学习笔记二：基础知识

一:DOM7 framework7有自己的 DOM7 - 一个集成了大部分常用DOM操作的高性能库.它的用法和jQuery几乎是一样的,包括大部分常用的方法和jquery风格的链式调用. 在开发时,为了避免命名冲突以及方便开发,我们把dom7定义为一个变量: var $$ = Dom7; 之后,就可以在页面中使用 $$ 了. DOM7可以调用的方法,请查阅官方文档:http://docs.framework7.cn/Index/dom.html 二:

Jqurey学习笔记---5、jQuery 效果 - 隐藏和显示

jQuery 效果 - 隐藏和显示演示一个简单的 jQuery hide() 方法. a.$(document).ready(function ()-->触法事件-->执行事件. 1. <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#

Jqurey学习笔记---6、jQuery 效果 - 淡入淡出

jQuery 效果 - 淡入淡出 实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. jQuery fadeOut() 演示 jQuery fadeOut() 方法. jQuery fadeToggle() 演示 jQuery fadeToggle() 方法. jQuery fadeTo() 演示 jQuery fadeTo() 方法. jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隐藏的元素. 语法: $(selector).f