好吧，已经学了jQueryMobile一年了，今天心血来潮，想要写一篇关于jQueryMobile的博客文章，记得去年暑假在公司实习jQueryMobile，想一想真是怀念当时还是菜鸟的自己，年轻就是任性呀（笑~），好了，关于jQueryMobile方面的概念知识，大家可以去网上查阅相关资料，今天我写了一些jQueryMobile的按钮样式，还是比较漂亮的，代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />

    <script src="js/jquery.js"></script>

    <script src="js/jquery.mobile-1.4.0-rc.1.js"></script>

    <title>Flat</title>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-theme="f">

            <h1>DOTA资料大全</h1>

        </div>

        <div data-role="content">

            <a href="#" data-theme="a" data-icon="flat-settings" data-role="button">英雄简介</a>

            <a href="#" data-theme="b" data-icon="flat-new" data-role="button">物品资料</a>

            <a href="#" data-theme="c" data-icon="flat-man" data-role="button">经典出装</a>

            <a href="#" data-theme="d" data-icon="flat-mail" data-role="button">野怪资料</a>

            <a href="#" data-theme="e" data-icon="flat-bubble" data-role="button">教学视频</a>

            <a href="#" data-theme="f" data-icon="flat-menu" data-role="button">经典解说</a>

            <a href="#" data-theme="g" data-icon="flat-heart" data-role="button">明星专访</a>

            <a href="#" data-theme="g" data-icon="flat-time" data-role="button">关于作者</a>

        </div>

    </div>

</body>

</html>

网页效果如下图：

jQueryMobile的按钮样式的更多相关文章

  1. 纯CSS打造好看的按钮样式

    好看的按钮.链接.div样式,效果预览: http://hovertree.com/code/run/css/s8o19792.html 发现今天积分和排名不错: 代码如下: <!DOCTYPE ...

  2. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  3. Expression Blend4经验分享：制作一个简单的文字按钮样式

    首先在Grid里放一个TextBlock,对象时间线窗口的结构树如下 右键点击grid,选择构成控件 会弹出构成控件的对话框,选择你要构成的控件类型,控件名称,控件样式存储位置 这里我们选择butto ...

  4. WinForm------TreeList修改节点图标和按钮样式

    转载: https://documentation.devexpress.com/#WindowsForms/DevExpressXtraTreeListTreeList_CustomDrawNode ...

  5. [k]自定义上传文件按钮样式

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...

  6. [BS-10] 统一设置app所有页面的“返回”按钮样式

    统一设置app所有页面的“返回”按钮样式 如果想统一设置app所有页面的“返回”按钮样式,首先自定义WZNavigationController类继承UINavigationController类,然 ...

  7. css 滑动按钮样式

    <div class="pub_switch_box"> <input type="checkbox" id="pub_switch ...

  8. 上传按钮样式优化 <input type="file" />

    <html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...

  9. uploadify 自定义按钮样式

    uploadify是一款不错的JQUERY上传插件,但是FLASH按钮的外挂往往跟我们网页的设计不太搭配.一开始我还试图反编译uploadify.swf来修改其外观,结果发现反编译为FLA后里面没有任 ...

随机推荐

  1. 排序算法(1)--Insert Sorting--插入排序[1]--straight insertion sort--直接插入排序

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.基本思想 将一个记录插入到已排序好的有序表中,从而得到一个新,记录数增1的有序表.即:先将序列的第1个记录看成 ...

  2. js-ES6学习笔记-async函数

    1.async 函数是 Generator 函数的语法糖.前文有一个 Generator 函数,依次读取两个文件. var fs = require('fs'); var readFile = fun ...

  3. 【读书笔记】iOS-网络-同步请求，队列式异步请求，异步请求的区别

    一,同步请求的最佳实践. 1,只在后台过程中使用同步请求,除非确定访问的是本地文件资源,否则请不要在主线程上使用. 2,只有在知道返回的数据不会超出应用的内存时才使用同步请求.记住,整个响应体都会位于 ...

  4. Mac 上用 Homebrew 安装 .NET Core 1.0 RC4 004771

    年级大了,其实并不是很喜欢升级到最新版,特别是不怎么爱用还没有 Release 的版本了.虽然 .NET Core 已经是 RC4,但毕竟还没有 Release.可过年回来,用 yeoman 创建了一 ...

  5. JavaSE——多线程

    进程和线程: 进程是指运行中的应用程序,每一个进程都有自己独立的内存空间.一个应用程序可以启动多个进程. 线程是指进程中的一个执行流程,有时也称为执行情景. 线程和进程的主要区别在于:每个进程都需要操 ...

  6. SD从零开始01-02

    SD从零开始1 SD中的组织结构 销售相关的组织结构: 销售组织Sales organization 分销渠道Distribution channel 产品组Division 销售区域Sales ar ...

  7. 使用ADB无线连接Android真机进行调试

    使用ADB无线连接Android真机进行调试   其实这已经是一个很古老的知识了,记录一下备忘. 准备工作 手机和电脑需要在同一个局域网内 电脑上已经安装好ADB工具,可以是Mac或者Windows ...

  8. 【Redis】Redis学习（一） Redis初步入门

    一.Redis基础知识 1.1 Redis简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,h ...

  9. [Android] Linux下JNI简单实现过程

    大概梳理了一下JNI的过程: start->先写好A.java文件,里面添加native方法B,调用库C.so->编译成.class文件->用javac生成.h文件,文件包含Java ...

  10. 机器学习实战（Machine Learning in Action）学习笔记————03.决策树原理、源码解析及测试

    机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理.源码解析及测试 关键字:决策树.python.源码解析.测试作者:米仓山下时间:2018-10-2 ...