button样式

vue cli3---elementUI 按需导入（babel.config.js）

由 泪湿孤枕 提交于 2020-03-17 22:54:41
在使用vue cli3脚手架时，需要按需导入element-ui 组件，步骤如下： 1. 安装element-ui npm i element-ui -S 2. 按需导入需要安装，babel-plugin-component npm install babel-plugin-component -D 3.官网提供的是，将 .babelrc 修改为： { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } 注意：项目中没有.babelrc文件，无需新建.babelrc文件，直接可以在babel.config.js中配置即可，如下： module.exports = { presets: [ '@vue/app', ["@babel/preset-env", { "modules": false }] ], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } 这里需要注意：

jQuery学习(三)——选择器总结

由 人盡茶涼 提交于 2020-03-17 00:21:54
1、基本选择器 id选择器：$(“#id名称”); 元素选择器：$(“元素名称”); 类选择器：$(“.类名”); 通配符：* 多个选择器共用(并集) 案例代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本选择器</title> 6 <link rel="stylesheet" href="../../css/style.css" /> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("#one").css("background-color","pink"); 12 }); 13 14 $("#btn2").click(function(){ 15 $(".mini").css("background-color","pink"); 16 }); 17 18 $("#btn3").click(function(){ 19 $("div").css("background-color","pink"); 20 }); 21 22 $("#btn4")

jQuery

由 ⅰ亾dé卋堺 提交于 2020-03-16 03:54:10
表单筛选器 :text :password :file :radio :checkbox :submit :reset :button 例子： $(":checkbox") // 找到所有的checkbox 表单对象属性: :enabled :disabled :checked :selected 例子： 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 找到被选中的option： <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option 链式操作：每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。 筛选器方法 下一个元素： $("#id").next()　

Day49 前端知识之jQuery

由 我的梦境 提交于 2020-03-16 03:52:40
一.jQuery介绍 　　1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库 　　2.jQuery使用户能够方便的处理HTML Document,Events,实现动画效果,方便的进行Ajax交互,能够极大地简化JavaScript编程,它的宗旨是:Write less,do more. 二.jQuery优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

jQuery入门

由 别来无恙 提交于 2020-03-15 20:48:42
jQuery是什么 说白了jQuery是一个js库 当然了除了这个库之外，我们还有跟多的库，比如：Prototype、YUI、Dojo、Ext JS、移动端的zepto等 目的就简洁的，快速的开发 学习jQuery本质： 就是学习调用这些函数（方法）。 1.jQuery的优点 轻量级。核心文件才几十kb，不会影响页面加载速度。 跨浏览器兼容，基本兼容了现在主流的浏览器。 链式编程、隐式迭代。 对事件、样式、动画支持，大大简化了DOM操作。 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。 免费、开源。 2.jQuery如何使用呢？ 首选你要去下载 在你的scrpit标签中（末尾）引入这个文件，当然了你也可以在加载的时候在页面头部引入,比如你使用windows.load.....，不过在jquer中有更好的解决方案 最简单的使用 $('div').hide(),//隐藏盒子 特别要说明的一点是：jQuery有一些兼容的小问题，但.....你不用去管它 3.正式的开始使用它 3.1入口函数 这个就是一个人入口函数，相当于 DOMContentLoaded等待dom结构加载完再去执行js代码 // 第一种: 简单易用。 $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; // 第二种: 繁琐，但是也可以实现 $

ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素

由 試著忘記壹切 提交于 2020-03-12 07:52:07
Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。所有的CSS样式和HTML元素与移动设备优先的流式栅格系统结合，能让开发人员快速轻松的构建直观的界面并且不用担心在较小的设备上响应的具体细节。 Bootstrap 栅格（Grid）系统 在移动互联网的今天，越来越多的网站被手机设备访问，移动流量在近几年猛增。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 栅格参数 Bootstrap 3提供了一系列的预定义class来指定列的尺寸，如下所示： Bootstrap 栅格系统被分割为12列，当布局你的网页时，记住所有列的总和应该是12。为了图示，请看如下HTML所示： <div class="container"> <div class="row"> <div class="col-md-3" style="background-color: green;"> <h3>green</h3> </div> <div class="col-md-6" style="background-color: red;"> <h3>red</h3> </div> <div class="col-md-3" style="background-color:

Bootstrap 基础讲解2

由 核能气质少年 提交于 2020-03-11 16:15:31
-------------------------------------------思想是行动的先导，心理问题直接作用并影响人的思想。 知识预览 bootstrap简介 CSS栅格系统 四 表格 表单 回到顶部 bootstrap简介 http://v3.bootcss.com/ Bootstrap优点： 下载： Bootstrap引入 1 2 3 4 < meta name="viewport" content="width=device-width, initial-scale=1"> < link href="dist/css/bootstrap.min.css" rel="stylesheet"> < script type="application/javascript" src="dist/jquery-3.1.1.js"></ script > < script type="application/javascript" src="dist/js/bootstrap.min.js"> 回到顶部 CSS栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

HTML学习笔记二20200310

由 你离开我真会死。 提交于 2020-03-10 15:45:56
接着昨天的写了 甩个链接 HTML学习笔记一 昨天的状态是这个样子的 < link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet" type = "text/css" > < style > . red - text { color : red ; } h2 { font - family : Lobster , Monospace ; } p { font - size : 16 px ; font - family : Monospace ; } . thick - green - border { border - color : green ; border - width : 10 px ; border - style : solid ; border - radius : 50 % ; } . smaller - image { width : 100 px ; } < / style > < h2 class = "red-text" > CatPhotoApp < / h2 > < p > Click here for < a href = "#" > cat photos < / a > . < / p > < a href = "#" > < img

Bootstrap的全局css样式部分

由 ⅰ亾dé卋堺 提交于 2020-03-08 09:37:50
Bootstrap 的栅格系统： 1. 为了合适的排列与内补，行（ row ）写在 .container 或者 .container-fluid 中； 在手机上（超小屏幕 <768px ） : 总是水平排列的， .container 最大宽度自动，类前缀是 .col-xs- ，最大列宽（ column ）自动； 在平板上（小屏幕 >=768px ） : 开始是堆叠，当大于阙值是为水平排列； .container 最大宽度 750px ；类前缀是 .col-sm- ；最大列宽 62px ； 在桌面显示器上（中等屏幕 >=992xp ） : 开始是堆叠，当大于阙值是为水平排列； .container 最大宽度 970px ；类前缀是 .col-md- ；最大列宽 81px ； 在大桌面显示器（大屏幕 >=1200px ） : 开始是堆叠，当大于阙值是为水平排列； .container 最大宽度 1170px ；类前缀是 .col-lg- ；最大列宽 97px ； 示例： <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col

前端学习(四)-轮播图案例

由 感情迁移 提交于 2020-03-04 19:05:24
文章目录 前言 导入jQuery函数库 轮播图 需求分析 实现 css html 开发流程 html框架开发 样式开发 动态页面生成 总结 前言 上篇文章： 前端学习(三)-jQuery函数库 上篇文章简单的介绍了下jQuery函数库的功能，本篇文章将上篇学到的内容应用到实际的开发当中，通过轮播图案例来熟悉jQuery。 导入jQuery函数库 有两种方法获取jQuery函数库，可以将jQuery下载到本地再通过script导入，或者在网络允许的情况下直接使用url导入。 jQuery常用下载地址：http://www.jq22.com/jquery-info122 /*两种使用其中一种即可，第一种是通过url跨域引入包，第二种是下载到本地后引入本地包*/ < script src = " https://code.jquery.com/jquery-3.4.1.min.js " > </ script > < script src = " jquery/jquery.min.js " > </ script > 轮播图 需求分析 一个轮播图的窗口，实现图片的自动轮播。 当鼠标进入轮播图窗口时，自动轮播停止，鼠标移除后恢复。 可以通过左右按钮控制图片播放。 窗口下方有悬浮条提示图片轮播到第几张，同时可以通过点击小球切换图片。 实现 首先预先下载好jquery.js包和五张图片
订阅 button样式