button样式 | 易学教程

jQuery Mobile的使用方法

阅读更多关于 jQuery Mobile的使用方法

安装: <link rel="stylesheet" href="下载到本地的文件目录.min.css" media="screen" title="no title">这个是jQuery Mobile库，下载网址:jquerymobile.com 　　　 <script src="./js/jquery-1.12.4.min.js"></script>这个是jQuery的库，下载网址:jquery.com/download 　　　 <script src="./js/jquery.mobile-1.4.5.min.js"></script>这个是jQuery Mobile库，下载网址:jquerymobile.com 　 Demo: 需要引入meta, 为了使我们的网站适应移动设备屏幕尺寸. 并设置不要让页面缩放, 让他以1:1的比例. 　　　　 <meta name="viewport" content="width=device-width,initial-scale=1"> 　　　　在body标签内写: 　　　　　　<div data-role='page'> 　　　　　　 <div data-role="header">……</div> 　　　　　　 <div role="main">……</div> 　　　　　　 <div data-role="footer">……<

自定义element-ui主题

阅读更多关于自定义element-ui主题

自定义element主题颜色：主要参考这个文章https://blog.csdn.net/wangcuiling_123/article/details/78513245，再自己做了一遍成功。感谢。一、创建项目并安装element 　　创建项目略，安装element略，上官网查看怎样安装配置。二、安装主题工具 npm i element-theme -g 三、安装chalk主题，可以从 npm 安装或者从 GitHub 拉取最新代码 # 从 npm npm i element-theme-chalk -D # 从 GitHub npm i https://github.com/ElementUI/theme-chalk -D 四、获取theme的sass文件并修改 et -i //[可以自定义变量文件，默认为element-variables.scss] > ✔ Generator variables file //表示成功这时根目录下会产生element-variables.scss（或自定义的文件），大致如下：直接编辑 element-variables.scss 文件，例如修改主题色为自己所需要的颜色 $--color-primary: purple; 五、编译主题修改完变量后，要编译主题（如果编译后，再次修改了变量，需要重新编译） et > ✔ build

Javascript-基本使用

阅读更多关于 Javascript-基本使用

本章向您提供了展示 JavaScript 能力的部分实例。 JavaScript 能够改变 HTML 内容 getElementById() 是多个 JavaScript HTML 方法之一。本例使用该方法来“查找” id="demo" 的 HTML 元素，并把元素内容（ innerHTML）更改为 "Hello JavaScript"： <!DOCTYPE html> <html> <body> <h2>JavaScript 能做什么</h2> <p id="demo">JavaScript 能够改变 HTML 内容。</p> <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button> </body> </html> 提示：JavaScript 同时接受双引号和单引号： JavaScript 能够改变 HTML 属性本例通过改变 <img> 标签的 src 属性（source）来改变一张 HTML 图像：灯泡点亮灯泡关掉灯泡 <!DOCTYPE html> <html> <body> <h2>JavaScript 能做什么？</h2> <p>JavaScript 能够改变 HTML 属性值。</p> <p

Bootstrap框架

阅读更多关于 Bootstrap框架

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前：命名：重复、复杂、无意义（想个名字费劲）样式：重复、冗余、不规范、不和谐页面：错乱、不规范、不和谐在使用Bootstrap之后：各种命名都统一并且规范化。页面风格统一，画面和谐。 Bootstrap下载官方地址：https://getbootstrap.com 中文地址：http://www.bootcss.com/ 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。 Bootstrap环境搭建目录结构： bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├──

从零开始学Bootstrap(2)

阅读更多关于从零开始学Bootstrap(2)

继从零开始学Bootstrap(1)后，我们需要实际做一些页面，边学边做。因为前端是一项非常注意实践的技术，知识点太多、太琐碎了，所以我们只能边学边做。根据我们想要做的效果，去查相应的资料。不要想着把所有的东西都学会后再做网页实践。过程中会频繁查阅资料的网站： http://www.w3school.com.cn/ 这是W3C联盟为了传播W3C标准而建立的网站，有很多关于Web端的技术，你可以将其看作为一部Web技术的百科全书。 http://v3.bootcss.com/ 不用多说，BootStrap3官方文档 http://www.runoob.com/ 这个其实跟W3school差不多，但是比W3school要全要杂一点，好多内容都是从原版W3C英文网站和原版BootStrap官方英文文档翻译过来，但是我感觉他的翻译质量要更高（因为前两个网站说白了也是翻译过来的），有些Case更加好懂。闲话不多说，让我们开始：（1）明确实现目标如下图所示，这就是咱们要实现的一个简单网站。布局简单，也没有很炫的效果。但是要实现一个功能：从Json文件（关于Json的知识可以到上述网站去查）里读取相关信息，显示在网站上。 Json文件内容： { "Class 001": { "Xiao Wang": { "Gender": "Male", "Age": "18",

记一次小程序样式优化重构

阅读更多关于记一次小程序样式优化重构

3 月，跳不动了？>>> 上周花了 3 天的时间和老大一起重构了一下小程序的样式开发，虽然说在开发的过程中遇到了一些问题，但是最终减少了不少样式代码，同时功能上也更加强大。进一步来说，如果在后面我们的小程序用户想要自己定制化主题，也可以很快的实现。全局样式开发之前的小程序开发中，我们全方面使用了 Component 构造小程序组件以及页面(页面也可以使用 Component 构造器来编写)。当然一方面是因为小程序 Component 的开发体验非常好，拥有类似于 Vue mixin, watch 的 behaviors 和 observers ，比 Page 构造器强大了很多。另一方面，对于业务较重的小程序来说, Component 也有性能优势。可以参照滴滴开源小程序框架Mpx 中的 Page与Component setData性能对照。在开发过程中，有很多样式是可以复用的。如果在之前开发中经常使用 Bootstrap 之类的 ui 库，那么你就会习惯使用这种库的 utilities 类。但是默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。不会受到全局样式 app.wxss 的影响。所以我们只能通过增加 @import 语法来辅助各个组件进行开发。 @import "xxx.css"; 如果你使用 CSS 预处理器来辅助小程序开发的话，可能就需要通过

wxPython中基本控件学习

阅读更多关于 wxPython中基本控件学习

wxPython 工具包提供了多种不同的窗口部件，包括了本章所提到的基本控件。我们涉及静态文本、可编辑的文本、按钮、微调、滑块、复选框、单选按钮、选择器、列表框、组合框和标尺。对于每种窗口部件，我们将提供一个关于如何使用它的简短例子，并附上相关的 wxPython API 的说明。显示文本这一节以在屏幕上显示文本的例子作为开始，包括用作标签的静态文本域，有样式和无样式的都使用了。你可以创建用于用户输入的单行和多行文本域。另外，我们将讨论如何选择文本的字体。如何显示静态文本？大概对于所有的 UI 工具来说，最基本的任务就是在屏幕上绘制纯文本。在 wxPython 中，使用类 wx.StaticText 来完成。图7.1显示了这个静态文本控件。在 wx.StaticText 中，你能够改变文本的对齐方式、字体和颜色。简单的静态文本控件可以包含多行文本，但是你不能处理多种字体或样式。处理多种字体或样式，要使用更精细的文本控件，如 wx.html.HTMLWindow ，它在第十六章中说明。为了在静态文本控件中显示多行文本，我们要包括其中有换行符的字符串，并使控件的大小足够显示所有的文本。有一个特点是你在图7.1中所不能看到的，那就是 wx.StaticText 窗口不会接受或响应鼠标事件。如何显示静态文本例子7.1显示了产生图7.1的代码。例7.1

Bootstrap框架和inconfont、font-awesome使用

阅读更多关于 Bootstrap框架和inconfont、font-awesome使用

Bootstrap框架和inconfont、font-awesome使用 iconfont的使用： https://www.cnblogs.com/clschao/articles/10387580.html Bootstrap介绍　　Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。　　它是为实现快速开发Web应用程序而设计的一套前端工具包。　　它支持响应式布局，并且在V3版本之后坚持移动设备优先。就是复制黏贴一把梭，html\css\js代码的封装组合为什么要使用Bootstrap？　　在Bootstrap出现之前：　　命名：重复、复杂、无意义（想个名字费劲）　　样式：重复、冗余、不规范、不和谐　　页面：错乱、不规范、不和谐　　在使用Bootstrap之后：各种命名都统一并且规范化。页面风格统一，画面和谐。 Bootstrap下载　　官方地址：https://getbootstrap.com 　　中文地址：http://www.bootcss.com/ 　　我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。 Bootstrap环境搭建　　目录结构： bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme

微信小程序按钮

阅读更多关于微信小程序按钮

微信小程序button组件样式韦弦Zhy 关注 22018.07.03 19:21:14字数 438阅读 108,988 button.png 上图下字.png 需要使用微信小程序 button组件的 open-type 来实现授权之类的操作时，发现样式并不是自己想要的，然后改起来也并不是很方便，下面让我们一起看一下：默认状态 <button>确定</button> 此时，各项值均为默认值，效果如下：有边框以及圆角默认状态.png 设置其css如下：背景颜色 background-color 文字颜色 color ,设置 type 为 primary 是背景色为微信绿，无法设置背景颜色 .btn1 { width: 80%; margin-top: 20rpx; background-color: beige; color: white; } 设置背景颜色和文字颜色.png 修改圆角： .btn1 { width: 80%; margin-top: 20rpx; background-color: beige; color: white; border-radius: 98rpx; } 屏幕快照 2018-07-03 18.52.02.png 效果并不好，此时增加 .btn1::after { border-radius: 98rpx; } 效果图如下：完美圆角效果

checkbox不显示，试试去掉-webkit-appearance这个样式

阅读更多关于 checkbox不显示，试试去掉-webkit-appearance这个样式

目前在项目中发现一个大坑，搞的我找了好久不知道因为什么，自用的reset.css中加入了 -webkit-appearance: none;其他所有表单没有出现问题，但checkbox会不显示，值改为checkbox或去掉该样式之后问题解决，不知道是否为浏览器更新之后出现的bug，因为以前并没有出现过类似问题。 chrome 68.0.3440.106（正式版本）说明：改变按钮和其他控件的外观，使其类似于原生控件。 -webkit-appearance 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支持，请慎用。语法： -webkit-appearance：none | button | button-bevel .... 默认值：none 取值： -webkit-appearance取值代码效果介绍 Chrome Safari iOS Safari Android Browser none 去除系统默认appearance的样式, 常用于IOS下移除原生样式支持支持支持支持 button 渲染成button的风格支持支持支持支持 button-bevel 渲染成button-bevel的风格支持支持不支持不支持

订阅 button样式