button样式 | 易学教程

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 │ ├──

微信小程序button修改样式无效

阅读更多关于微信小程序button修改样式无效

效果如下图中：这是修改样式后在开发工具中的效果。但是在手机上预览就是无效的了，如下图：原来微信小程序的基础样式已经升级到v2版本了，在app.json中可以查阅到： "style": "v2", //基础样式升级 "sitemapLocation": "sitemap.json" 把 "style": "v2", 删除就可以了！来源： CSDN 作者：潇湘一夜雨链接： https://blog.csdn.net/xuelian3015/article/details/104193677

微信小程序开发笔记⑬——窗口监控、动态设置导航栏、动态设置tabBar、动态设定背景颜色、页面滚动和动画制作

阅读更多关于微信小程序开发笔记⑬——窗口监控、动态设置导航栏、动态设置tabBar、动态设定背景颜色、页面滚动和动画制作

窗口监听官方描述 https://developers.weixin.qq.com/miniprogram/dev/api/ui/window/wx.onWindowResize.html 监控窗口的大小时候发生了变化 < view > < button bindtap = " window " > 窗口监听操作 </ button > </ view > /** * 窗口大小改变监听事件 */ window : function ( ) { wx . onWindowResize ( ( result ) => { console . log ( res ) } ) } , 动态设置导航栏官方描述 https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.showNavigationBarLoading.html < view > < button bindtap = " navigationBar " > 动态设置导航栏 </ button > </ view > /** * 设置动态导航栏 */ /** * 设置动态导航栏 */ navigationBar : function ( ) { // 设置导航栏的颜色 wx . setNavigationBarColor ( {

50 前端学习7之 Bootstrap

阅读更多关于 50 前端学习7之 Bootstrap

目录一、jQuery补充 1. 动画效果 2. 补充 2.1 each循环 2.2 data() 二、Bootstrap 1. 布局容器 2. 栅格系统 2.1 栅格参数 2.2 列偏移 3. 表格 4. 表单 5. 按钮 5.1 预定义样式 6. 快速浮动一、jQuery补充 1. 动画效果 // 基本 show(毫秒数) // 显示 hide(毫秒数) // 隐藏 toggle(毫秒数) // 滑动 slideDown(毫秒数) slideUp(毫秒数) slideToggle(毫秒数) // 淡入淡出 fadeIn(毫秒数) fadeOut(毫秒数) fadeTo(毫秒数) fadeToggle(毫秒数) 2. 补充 2.1 each循环 jQuery.each(collection, callback(indexInArray, valueOfElement))：描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。 li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循环的具体元素。 }) 输出： 010 120 230 340

jQuery 动画

阅读更多关于 jQuery 动画

1 基本效果 hide() 隐藏 show() 显示 toggle() 隐藏显示来回切换基本效果的CSS属性变化：透明度变化，元素大小相关的样式（padding，border，width/height），外边距（margin） 2 滑动效果 slideDown() 显示 slideUp() 隐藏 slideToggle() 切换垂直方向上的变化 height / padding-top / margin-top 3 淡入淡出效果 fadeIn() fadeOut() fadeToggle() fadeTo() 透明度的变化（渐变） 4 自定义动画 animate({}, speed, fn) 自定义动画 stop() 使动画停止 finish() 使动画完成 delay() 延迟动画的执行 5 动画设置 jQuery.fx.off 动画开关 jQuery.fx.interval jQuery动画的帧数 1-5 demo <!doctype html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > jQuery 动画 </ title > < style > #box,#box1 { padding : 20px ; width : 400px ; height : 300px ;

如何编写轻量级 CSS 框架

阅读更多关于如何编写轻量级 CSS 框架

Github: https://github.com/nzbin/snack Docs: https://nzbin.github.io/snack 前言这篇文章我已经酝酿了半年之久，或者说拖沓了这么久吧。想说的东西很多，却又无从说起。如今轻量级框架如雨后春笋，层出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。在之前的文章中，我提到了面向对象的 CSS（比如 BEM、OOCSS、SMACSS ，详见 http://vanseodesign.com/css/dry-principles/ ）。这是一种思想，并不涉及具体的 CSS 问题，主要是类命名的策略！现在仍然有很多人对于前端框架的认识还停留在表面，认为 Bootstrap 是后端人员专用，前端没必要等等。我不知道这种说法从何而来，我最开始也不喜欢使用框架，或许和很多人的想法一样，畏惧新知识、害怕难以驾驭、遇到问题的时候无法解决等等。最关键的一点是很多人认为框架的样式是固定的，修改起来太麻烦，还不如自己根据设计图写起来方便。为什么使用框架为什么使用框架？答案显而易见，效率。除此之外，使用框架或者研究框架的意义还有很多，比如面向对象思想的具体实现。在上一家公司工作的时候，开始的几个项目我也是用最原始的方法书写 CSS 。项目之中最让我头疼的就是类的命名。我想大多数人都是根据功能去命名

jQuery操作css样式、属性、动画、节点

阅读更多关于 jQuery操作css样式、属性、动画、节点

css样式操作：　　1、设置单个样式: css(name, value) 　　2、设置多个样式:css(obj) 　　3、获取样式:css(name) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>高圆圆</li> <li>周二珂</li> <li>冯提莫</li> <li>郑爽</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function () { //css(name, value) //修改单个样式 //name:样式名 value:样式值 /* $("li") .css("backgroundColor", "pink") .css("color", "red") .css("fontSize", "32px"); */ //css(obj) //修改多个样式 /* $("li").css({ backgroundColor:"pink", color: "red", fontSize:"32px", border: "1px solid black" }); */ //获取样式 //css(name) //name

ios与android适配处理

阅读更多关于 ios与android适配处理

先写下我遇到并亲测的，其他待具体考证，可参考http://www.cnblogs.com/yangluoyiBlog/p/6415529.html 1、做IOS按钮button颜色的时候发现发白，和预期颜色不一样，这是因为IOS本身存在系统原生样式，这个时候需要css 来移除原生样式，其他值可参考http://www.css88.com/book/css/webkit/visual/appearance.htm -webkit-appearance: none -webkit-appearance取值代码效果介绍 Chrome Safari iOS Safari Android Browser none 去除系统默认appearance的样式, 常用于IOS下移除原生样式支持支持支持支持 button 渲染成button的风格支持支持支持支持 button-bevel 渲染成button-bevel的风格支持支持不支持不支持 caret 渲染成caret的风格支持支持不支持不支持 checkbox 渲染input:checkbox样式的复选框按钮支持支持支持支持 listbox 渲染为listbox样式的复选框按钮支持支持支持支持 listitem 渲染成listitem的风格支持支持不支持不支持 media

cdn方式使用element-ui样式

阅读更多关于 cdn方式使用element-ui样式

1.关于vue脚手架注册使用element-ui 就不在这里详细讲解了改天在讲解在页面上面先引入element-ui的css文件 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 然后是引入js文件因为elemnt-ui 是基于vue书写的所以这里注意了一定要先引入vue文件顺序不要乱 <script src="https://unpkg.com/vue/dist/vue.js"></script> 然后在引入element.js <script src="https://unpkg.com/element-ui/lib/index.js"></script> 然后就可以在代码中使用element-ui的样式了吗？其实这个时候还不行我在上面说了是基于vue文件封装的各种样式组件所以你要在里面中监听才可以全都是写在app中 <div id="app"> <el-row> <el-button>默认按钮</el-button> <el

HTML表单控件

阅读更多关于 HTML表单控件

input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件传统控件 button 定义一个按钮 select 定义一个下拉列表 option 定义下拉列表中的一个选项 optgroup 定义选项组，用于组合选项 textarea 定义多行的文本输入控件 fieldset 分组表单内的相关元素 legend 定义fieldset元素的标题 label 定义input元素的标注 button button元素用来定义一个按钮，button元素内部可以放置文本或图像或其他多媒体内容。但唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为始终为button元素设置type属性，IE7-浏览器的默认类型是button，而其他浏览器的默认类型是submit IE7-提交button元素之间的文本，而其他浏览器则会提交value属性的内容 <button> 元素比 <input> 元素更易样式化。可以添加内联HTML内容（如 <em> ， <strong> 甚至 <img> ），并使用:after和

订阅 button样式