MUYI1111-CSDN博客

转载 Vue系列：Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 ...

2018-12-14 13:21:00 301

转载 Vue系列：.sync 修饰符的作用及使用范例

作用：对传递给子组件的 prop 数据进行“双向绑定”。（正常情况下，prop 的数据都是单向数据流）代码参考如下：父组件部分子组件部分转载于:https://www.cnblogs.com/One-sprite/p/10101572.html...

2018-12-11 13:12:00 293

转载 Vue系列：Websocket 使用配置

WebSocket 是什么？WebSocket是一种网络通信协议。而且是在 HTML5 才开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。为什么需要 WebSocket ？了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。HTTP的弊端：无法实现服务器主动向客户端发起消息，它不支持持久连接的。在webso...

2018-12-10 15:43:00 762

转载 Vue系列：Slot 插槽的使用范例

插槽对于自定义的组件开发来说，是十分强大的功能。这篇主要做个简单梳理插槽可以分3种：1.简单插槽2.具名插槽3.作用域插槽转载于:https://www.cnblogs.com/One-sprite/p/10096380.html...

2018-12-10 14:40:00 189

转载 Vue系列：滚动页面到指定位置实现

方法1：scrollTop 滚动到某位置方法2：scrollTo，scrollBy，scroll滚动到某位置方法3：scrollIntoView() 实现滚动到具体某元素需注意，上述3种方法都不是平滑滚动转载于:https://www.cnblogs.com/One-sprite/p/10083899.html...

2018-12-07 17:02:00 2486

转载 Vue系列：为不同页面设置body背景颜色

由于SPA页面的特性，传统的设置 body 背景色的方法并不通用。解决方案：利用组件内的路由实现代码参考如下转载于:https://www.cnblogs.com/One-sprite/p/10083629.html...

2018-12-07 16:28:00 1480

转载 Element UI系列：Upload图片自定义上传

HTML部分代码Javascript部分代码CSS代码样式部分可以自由调整主要实现的原理是利用 http-request 的属性对上传进行自定义转载于:https://www.cnblogs.com/One-sprite/p/10070617.html...

2018-12-05 14:04:00 746

转载 Vue系列：wangEditor富文本编辑器简单例子

考虑到该富文本编辑器可能会在后续项目中继续使用，因此单独将其做成一个组件，把wangeditor作为组件的形式使用。以下是参考代码子组件部分：父组件引用子组件：以上就是wangEditor 编辑器在 Vue 项目中的使用配置以及步骤更多的配置信息请参考官网查看文档（地址：http://www.wangeditor.com/）转载于:https...

2018-12-05 11:14:00 373

转载 Element UI系列：Select下拉框实现默认选择

实现的主要关键点在于 v-mode 所绑定的值，必须是 options 数组中对应的 value 值转载于:https://www.cnblogs.com/One-sprite/p/10062784.html

2018-12-04 10:57:00 1183

转载 sublime text 3 15个常用插件介绍

1.ColorPicker功能：调色板（需要输入颜色时，可直接选取颜色）使用：快捷键Windows:ctrl+shift+c2.Emmet功能：编码快捷键，前端必备使用：在输入代码段后，按Tab键具体安装可以看这里https://jingyan.baidu.com/article/ce43664935b90c3772afd377.html3.S...

2018-03-19 13:04:00 204

转载 CSS3：pointer-events | a标签禁用

2018-03-05 19:32:00 200

转载 CSS3: @font-face 介绍与使用

@font-face 是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？(@font-face这个功能早在IE4就支持了你肯定会感到惊讶著作权归作者所有。)@font-face的语法规则：@font-...

2018-03-05 10:55:00 190

转载 css公共样式 | 标签元素初始化

PC参考样式1：@charset "utf-8";html{background:#fff;overflow:auto;}body{min-width:1200px;font:12px/18px "Microsoft Yahei";font-weight:lighter;color:#333; -webkit-font-smoothing: antialiased; }...

2018-03-04 18:13:00 414

转载 if IE语句 | 判断浏览器IE版本及添加升级提示

本文引自：http://blog.csdn.net/u013372487/article/details/48521929实现方法判断当前浏览器是否IE6（或IE6内核）判断当前浏览器是否IE7及以下版本...

2018-03-04 15:16:00 237

转载低版本IE兼容 H5+CSS3 方案

【主要是针对ie6 7 8对支持和让老浏览器支持html5+css3的一些js脚本】html5shiv.js // 让IE8及耕地版本的IE识别section,article,nav等html5元素cdn地址：<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.j...

2018-03-04 15:07:00 157

转载 Meta 用法汇总

本文引自：http://blog.csdn.net/MR_LP/article/details/53607087什么是 meta ？meta 是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的...

2018-03-04 15:03:00 778

转载 CSS： hack 方式一览

本文引自：http://blog.csdn.net/freshlover/article/details/12132801什么是CSS hack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效...

2018-03-04 14:35:00 120

转载 CSS3： perspective 3D属性

本文引自：http://blog.csdn.net/cddcj/article/details/52956540perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。三维元素在观察者后面的部分不会绘制出来，即z轴坐标值大于perspective属...

2018-03-04 14:23:00 315

转载图片格式：gif / png / pg / webp 介绍

本文引自：https://www.cnblogs.com/changyangzhe/articles/5718285.htmlGIF介绍GIF 意为Graphics Interchange format（图形交换格式），GIF图片的扩展名是gif。现在所有的图形浏览器都支持GIF格式，而且有的图形浏览器只熟悉GIF格式。GIF 是一种索引颜色格式，在颜色数很少的情况...

2018-03-04 12:13:00 970

转载 CSS：抗锯齿 font-smoothing

本文引自：http://www.cnblogs.com/sunshq/p/4595673.html-webkit-font-smoothing这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页面小清晰了。淘宝也在用哦！它有三个属性：none ------...

2018-03-04 12:04:00 132

转载转载 | 缩小浏览器窗口右边出现空白

本文引自：http://blog.csdn.net/gyy93/article/details/70905405布局做好的页面不会因为缩小浏览器窗口而右边出现空白？“发现现在缩小窗口，底部出现进度条，滑动至右边，就出现空白”这个问题是个十分常见且容易忽略的bug。原因是因为出现空白的元素设置了宽度100%，缩小窗口相当于减小了宽度值，那么为什么出现滚动条呢？是因为页面中至少有一...

2018-03-04 01:46:00 166

转载转载 | Sublime text3 实用快捷键整理

实用快捷键Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：选择多行Ctrl+Shift+Enter：在当...

2018-03-04 00:34:00 116

转载转载 | SVG向下兼容优雅降级方法

本文引自：http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/1.svg image标签降级技术<svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="9...

2018-03-04 00:26:00 146

转载 CSS等分布局方法

原文链接：http://caibaojian.com/css-equal-layout.htmlCSS等比例划分，在CSS布局中是比较重要的，下面分享几种常用方法和探讨一下兼容性。一：浮动布局+百分比emmet html代码：ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容}.float-ul{width: 100%; ...

2018-02-13 17:51:00 211

转载如何用实现文字环绕图片？

方法1-CSS实现：　　直接對著圖片設置float就可以了img { float: right; padding: 20px 0 20px 20px;}　　這樣你把圖片插入在哪行，它就會以那行為基準貼齊右側　　存在问题：当把中间的文字替换成连续的英文字母时，文字不换行　　问题原因：浏览器默认解析英文或者数字时，是按照单词进行解析。也就是...

2018-02-09 12:00:00 692

转载转载 | 网页中返回顶部代码(多种方法)

1. 最简单的静态返回顶部，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能方法一：用命名锚点击返回到顶部预设的id为top的元素<a href="#top" target="_self">返回顶部</a> 方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）<a ...

2017-09-06 12:32:00 192

转载转载 | 如何给网页标题添加icon小图标

打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标，当网页被添加到收藏夹或者书签中时也会出现网页的图标，怎么在网页title左边显示网页的logo图标呢？方法一（被动式）：制作一个ico格式的图片，将图片命名为favicon.ico，像素大小为16*16，所使用的颜色不得超过16色，然后再把favicon.ico放到网站的根目录下就行了。这样的话浏览器会不停的...

2017-08-21 17:16:00 229

转载转载 | textarea 在浏览器中固定大小和禁止拖动

HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动...

2017-08-21 16:05:00 122

转载转载 | embed用法（网站中视频、音频的添加）

网站中添加视频：<embed src="http://player.video.qiyi.com/390cf6c74450e4c70b7bd2d883169914/0/0/w_19rsjdrsil.swf -albumId=2280637809-tvId=2280637809-isPurchase=0-cnId=9" al...

2017-08-19 16:13:00 1199

转载转载 | 如何实现模块半透明文字内容不透明？

两种方法一种是用background:rgba(0, 0, 0, 0.5),兼容性只支持IE8往上另一种方法使用透明度要考虑IE8往下可以用这个：<style type="text/css">.box{ position:relative; width:200px; height:200px; bor...

2017-08-18 22:12:00 168

转载转载 | 一种让超大banner图片不拉伸、全屏宽、居中显示的方法

现在很多网站的Banner图片都是全屏宽度的，这样的网站看起来显得很大气。这种Banner一般都是做一张很大的图片，然后在不同分辨率下都是显示图片的中间部分。实现方法如下：<html> <head> <title>Title</title> <style> ...

2017-08-18 16:00:00 191

转载转载 | 防止页面图片过大出现横滚动条问题

- JS方法 -就是一小段JS加到页面中就可以，下面把这段代码贴出来：1 jQuery(document).ready(function () { 2 jQuery("body").attr("style","overflow-x:hidden"); 3 });- CSS方法 -一、防止图片撑破DIV方法一原始处...

2017-08-18 09:42:00 729

转载转载 | CSS实现单行、多行文本溢出显示省略号（…）

本文引自：https://www.cnblogs.com/wyaocn/p/5830364.html首先，要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能...

2017-08-16 15:56:00 149

转载 css常用代码块

顶部固定导航栏 | css position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 48px; border-top: 2px solid #fa7d3c; box-shadow: 0 0 1px 0px rgba(0,0...

2017-08-01 20:26:00 2093

转载转载 | float 清除浮动的7种方法

什么叫浮动：浮动会使当前标签脱离文档流，产生上浮的效果，同时还会影响周边元素（前后标签）及父级元素的位置和width，height属性。下面用一个小例子来看一看浮动的全过程：1.首先我们新建一个网页，在网页中用div元素创建三个小的正方形，为了区别分别给他们不同的ID值和背景颜色，代码如下 1 <style> 2 div{ 3 width:100p...

2017-08-01 09:51:00 182

转载转载 | CSS图片下面产生间隙的 6种解决方案

在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳，供大家参考。1、将图片转换为块级对像即，设置img为：display:block;在本例中添加一组...

2017-07-31 09:53:00 132

转载（转载）内联元素设置宽高问题

block元素的特点：总是在新行上开始；此元素将显示为块级元素，此元素前后会带有换行符。高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。可以控制宽高。<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。inline元素的特点：和...

2017-07-19 14:09:00 235

转载 HTML/CSS：display:flex 布局教程

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就...

2017-06-20 16:43:00 297

转载 HTML/CSS：block，inline和inline-block概念和区别

总体概念block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（...

2017-06-15 17:23:00 122

转载 HTML/CSS：导航栏水平和垂直

1.垂直导航栏导航栏 = 链接列表导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的。如需构建垂直导航栏，我们只需要定义 <a> 元素的样式演示：代码：HTML<div class="nav"> <ul> <li>&l...

2017-06-15 16:03:00 1733

空空如也

空空如也