button样式

setInterval 一个定时器搞定 <style> button{ background: #45BCF9; color: #fff; padding: 4px 10px; border: none; outline: none; cursor: pointer; } button:hover{ background: #00a8fe; } button.disabled{ background: #000; cursor: auto; } button.disabled:hover{ background: #000; } </style> <button type="button" onclick="fn()">获取验证码</button> <script> function fn(){ var oBtn = document.getElementsByTagName('button')[0]; var time = 60; var timer = null; oBtn.innerHTML = time + '秒后重新发送'; oBtn.setAttribute('disabled', 'disabled'); // 禁用按钮 oBtn.setAttribute('class', 'disabled'); // 添加class 按钮样式变灰 timer =

在输入框前后添加扩展 要将输入框和扩展包裹在同一个 .input-group 内部，扩展需要添加 .input-group-addon 样式 < form > < div class = "row" > < div class = "col-xs-4" > < div class = "input-group" > < span class = "input-group-addon" > < span class = "glyphicon glyphicon-user" > < / span > < / span > < input type = "text" class = "form-control" placeholder = "Username" > < / div > < / div > < div class = "col-xs-4" > < div class = "input-group" > < input type = "text" class = "form-control" placeholder = "Amount" > < span class = "input-group-addon" > .00 < / span > < / div > < / div > < div class = "col-xs-4" > < div class = "input

这里我们主要讲一下3D图形以三维面平移的设计方法。 3D图按照三维平移，可以有上，下，左，右，前，后 ，共6个方向，我们分别将这六个操作由按键来实现操作。 对于按键的布局我们上下为一列，左右前后为一行。 1 <DockPanel.Resources> 2 <Style TargetType="Button"> 3 <Setter Property="HorizontalAlignment" Value="Center"/> 4 <Setter Property="Padding" Value="3"/> 5 </Style> 6 </DockPanel.Resources> 7 8 <StackPanel DockPanel.Dock="Top" Background="Gray" Height="auto"> 9 <Button Click="up_Click">↑</Button> 10 <Button Click="down_Click">↓</Button> 11 <StackPanel HorizontalAlignment="Center" 12 Orientation="Horizontal"> 13 <Button Click="left_Click">←</Button> 14 <Button Click="right_Click">→</Button> 15

浅谈关于.vue文件中的style的scoped属性 注意：scoped作用：使得.vue中的样式不影响其他.vue组件样式，而不是scoped使得.vue组件样式不受外样式影响。 1、在vue组件中，为了使样式私有化（模块化），不对全局造成污染，在style标签上添加scoped属性，以表示它只属于当下的模块。但是要慎用，因为在我们需要修改公共组件（第三方库或者项目中定制的组件）的样式的时候，scoped会造成很多困难，组要增加额外的复杂度。 一、创建公共组件button： //button.vue < template > < div class = "button-warp" > < button class = "button" > text < / button > < / div > < / template > ... < style scoped > . button - warp { display : inline - block ; } . button { padding : 5 px 10 px ; font - size : 12 px ; border - radus : 2 px ; } < / style > 浏览器渲染后的button组件为: < div data - v - 2311 c06a class = "button-warp" > <

前端知识之 bootstrap 01. bootstrap的介绍和下载 01.1 介绍 Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。 注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。 使用Bootstrap的好处： Bootstrap简单灵活，可用于架构流行的用户界面，具有 友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。 01.2 下载 bootstap英文官方: https://getbootstrap.com/ bootstrap中文官网： http://www.bootcss.com/ 下载地址: http://v3.bootcss.com/getting-started/#download 注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码 和 sass项目，只需要下载生产环境的Bootstrap即可。 下载完成以后的目录如下： bootstrap/dist/ ├── css/ │ ├── bootstrap.css #

我有一个文本输入和一个按钮（见下文）。 当在文本框中按下 Enter 键时，如何使用 JavaScript 触发按钮的click事件 ？ 当前页面上已经有一个不同的“提交”按钮，因此我不能简单地将该按钮设为“提交”按钮。 而且，如果 只 从一个文本框中按下该按钮，我 只 希望按 Enter 键即可单击该特定按钮，没有别的。 <input type="text" id="txtSearch" /> <input type=" button " id="btnSearch" value="Search" onclick ="doSomething();" /> #1楼 对于jQuery Mobile，我必须要做 $('#id_of_textbox').live("keyup", function(event) { if(event.keyCode == '13'){ $('#id_of_button').click(); } }); #2楼 将按钮设为Submit元素，因此它将是自动的。 <input type = "submit" id = "btnSearch" value = "Search" onclick = "return doSomething();" /> 请注意，您需要一个包含输入字段的 <form> 元素才能完成此工作（感谢Sergey Ilinsky）。

示例 Alert对任何长度的文本都可用，同时还可以视情况添加“抹除”按钮。为了适当的样式， 必须 使用下文中四个类中的一个（例如， .alert-success ）。对于行内的抹除，请使用alerts jQuery 插件。 <div class="alert alert-success" role="alert"> <strong>做得好！</strong> 你成功地读了这个重要的警告信息。 </div> <div class="alert alert-info" role="alert"> <strong>注意！!</strong> 这种警告需要你的注意，但它并不重要。 </div> <div class="alert alert-warning" role="alert"> <strong>警告！</strong> 更好的检查自己，你不太好。 </div> <div class="alert alert-danger" role="alert"> <strong>哦突然！</strong> 改变一些事情，并尝试再次提交。 </div> 链接颜色 在一条alert中，使用 .alert-link 实用工具类可以快速提供匹配的着色链接。 <div class="alert alert-success" role="alert"> <strong>做得好！</strong>

一、冒泡事件简介 当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。 方法一：event.stopPropagation( ); 例如： <div> <p> 段落文本内容 <input type = "button" value = "点击" /> </p> </div> html代码： // 为所有div元素绑定click事件 $ ( "div" ). click ( function ( event ){ alert ( "div-click" ); } ); //为所有p元素绑定click事件 $ ( "p" ). click ( function ( event ){ alert ( "p-click" ); } ); //为所有button元素绑定click事件 $ ( ":button" ). click ( function ( event ){ alert ( "button-click" ); // 阻止事件冒泡到DOM树上 event . stopPropagation (); // 只执行button的click，如果注释掉该行，将执行button、p和div的click } ); 方法二：event.target 现在，事件处理程序中的变量 event 保存着事件对象。而 event.target

一、什么是资源 通常使用 WPF 资源作为重用通常定义的对象和值的简单方法。 例如定义一种可以复用的单色的Brush对象，按钮的背景及矩形的填充颜色均使用此Brush： <Window x:Class="WPFResource.WinBasicResource" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Basic Resource" Height="200" Width="300"> <Window.Resources> <SolidColorBrush x:Key="myBrush" Color="Gold" /> </Window.Resources> <StackPanel> <Button Margin="5" Content="Sample Button" Background="{StaticResource myBrush}" /> <Rectangle Margin="5" Width="100" Height="100" Fill="{StaticResource myBrush}" /> </StackPanel> </Window>

摘自： http://www.cnblogs.com/hiyz/archive/2012/07/07/2580315.html WPF是制作界面的一大利器，下面就用WPF模拟一下360的软件管理界面，360软件管理界面如下： 界面不难，主要有如下几个要素： 窗体的圆角 自定义标题栏及按钮 自定义状态栏 窗体的半透明效果 窗体4周有一圈半透明阴影（抓的图上看不出来） 实现思路很简单，首先隐藏默认窗口的标题栏和边框，然后用WPF的Border或Canvas等元素模拟定义窗体的标题栏、内容区和状态栏。 具体实现如下： 第一步： 定义义个窗口基类，继承自Window，在构造函数中加载自定义窗口的样式文件，代码如下： public partial class WindowBase：Window { InitializeTheme(); } private void InitializeTheme() { string themeName = ConfigManage.CurrentTheme; // 样式所在的文件夹 App.Current.Resources.MergedDictionaries.Add(Application.LoadComponent( new Uri( string .Format( " ../Theme/{0}/WindowBaseStyle.xaml " ,