好吧，已经学了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. 设计模式原则(7)--Composition&AggregationPrinciple(CARP)--合成&聚合复用原则

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.定义:  要尽量使用合成和聚合,尽量不要使用继承. 2.使用场景: 要正确的选择合成/复用和继承,必须透彻地理 ...

  2. js-react组件生命周期

    组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMoun ...

  3. AngularJS学习 之 UI以及逻辑生成

    学习<Angular高级编程>理解如下 要求: 创建如下界面,有导航栏,一个Watchlists面板,面板上有个加号button,一句说明“”Use+to create a list“” ...

  4. C#反射的一些经验[转载]

    写代码的时候经常需要分析已有类型的信息例如:分析现有类型自动生成类, 或者为现有的类自动增加一些功能总结了一点点经验以ClassA  a; 为例1. 通过typeof(ClassA) 或者 a.Get ...

  5. PeopleSoft面试题...

    Q1:PS发出的邮件附件名字中中文字符乱码在哪设置? A1: 分为APP和PROCESS两个配置文件,分别在psprcs.cfg 和 psappsrv.cfg 中 SMTP Settings设置. 评 ...

  6. Linux CentOS 6.5 + Apache + Mariadb + PHP环境搭建

    Web自动化测试-服务端测试环境部署 by:授客 目录 一. 二. 三. 四. 五. 六. 七. 八. 九. 十. 操作系统环境:CentOS 6.5-x86_64 下载地址:http://www.c ...

  7. .NET(C#)如何遍历Dictionary

    我们知道.NET中的Dictionary是键/值对的集合,使用起来也是比较方便,Dictionary也可以用KeyValuePair来迭代遍历,具体如下: using System; using Sy ...

  8. js拼接table查询信息部分

    其一: $("#datagrid").empty(); var a=0; <order-rows> a++; $("#datagrid").appe ...

  9. git命令：全局设置用户名邮箱配置

    1.查看git配置信息 git config --list 2.查看git用户名 git config user.name 3.查看邮箱配置 git config user.email 4.全局配置用 ...

  10. wget 的 使用方法

    问题: 最近在使用 wget ,感觉有很多的功能都不会,现在进行写一篇文章,更新一些wget的使用技巧,防止以后忘记的时候,重新回来进行查阅. 正文: 现在经常使用: curl -O url 下载文件 ...