![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端效果
文章平均质量分 54
芳月存心
活着高兴,就不怕穷。
活着本身,就不是为了谁,仅仅是因为活着就是为了活着
展开
-
【css】table-border样式小结
关于table这个tag内嵌标签: thead(可选)、tbody(可选)、td、tr、colgroup 、caption(可选)属性:align ,bgcolor ,bordercolor,border ,cellpadding ,cellspacing ,frame ,width ,summary ,rules 。现在的table的属性基本已经过时,都使用css进行设置table样式。...原创 2019-09-25 20:30:04 · 797 阅读 · 0 评论 -
【div+css】关于滚动条
如何出现滚动条?万变不离其宗:文档内容超过其高度就会有滚动条。1.设固定高度+overflow:auto就会出现滚动条,此举措表示适配的时候会让自己崩溃。2.设置top+bottom即可让它高度自动适应(此刻不设置div高度,文档内容自填充),当然此刻要注意好定位,定位不好,真的也会崩溃。例子1:无固定高度的<style type="text/css"> html,body{ ...原创 2018-03-08 20:43:47 · 395 阅读 · 0 评论 -
【vue-cli】去掉eslint语法检查
find this file: config/index.js find thie line: config.dev.useEslint = falsethen => npm run dev原文:https://segmentfault.com/q/1010000006215850?_ea=1053838转载 2018-03-14 22:37:04 · 2605 阅读 · 0 评论 -
【js】js常用正则表达式
1.js去空格str为要去除空格的字符串:去除所有空格: str = str.replace(/\s+/g,”“); 去除两头空格: str = str.replace(/^\s+|\s+$/g,”“);去除左空格:str=str.replace( /^\s*/, ”);去除右空格:str=str.replace(/(\s*$)/g, “”);转载 2018-01-08 16:57:45 · 152 阅读 · 0 评论 -
【CSS】文字属性的一些总结
1.截取多余字符并以省略号显示{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}不行,就试一试定定宽高2.文本居中 1) vertical-align 有时候设置了text-align:center 却发现文字还是不居中,其实text-原创 2017-11-06 15:47:57 · 321 阅读 · 0 评论 -
【css+js】图片轮播
css: .slideshow-container { max-width: 1000px; position: relative; margin: 0 auto; } .mySlides { displa转载 2017-12-28 16:26:43 · 351 阅读 · 0 评论 -
【js】 a标签中href中javascript:void(0)理解
这个是为了 在点击此链接后回到页首,如果你写href="#"那么点击后会回到页首,这样影响操作。 人员管理 人员管理 建议使用void 0方式,因为return方式,有时会影响click事件的传播,尤其是return false的时候。原因如下: href="#"是个锚点,链接指向当前页面。 href="javascript:void(0);" 和 href="j转载 2017-12-19 15:22:20 · 2309 阅读 · 0 评论 -
【nodejs express框架】一些小结
1.项目结构对照.net mvc5框架,便于理解。 node_modules==引用 bin ==原创 2017-12-19 15:06:33 · 418 阅读 · 0 评论 -
【vue-cli】vue-cli+webpack配置下局域网,手机无法访问绑定ip的vue项目
http://192.168.0.104:8080/#/ 访问我的vue项目,浏览器可以打开,手机无法打开,在同一局域网段下。1.设置config文件下的index.js文件: dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, /...原创 2018-03-08 23:03:31 · 6698 阅读 · 0 评论 -
【css】【整理版】知识点小结
1.css元素: 1.1 凡是带有inline的元素,都有文字特性。 1.2 em的计算 em=1*font-size 1.3 元素分类 1)行级元素:内容决定元素所占位置,不可以通过css改变宽高常见行级元素:span strong em a del22)块级元素:独占一行,可以通过css改变宽高常见块级元素:div p ul li ol fo...原创 2018-03-13 23:32:47 · 121 阅读 · 0 评论 -
【vue】计算属性和侦听器
当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch<div id="demo">{{ fullName }}</div>watch版本:var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar'...转载 2018-03-26 14:30:40 · 442 阅读 · 0 评论 -
【css】关于图片自适应的技巧
1. 两个div , 最外层div 则是设定图片的宽高,里层的div则设置图片的url,利用background属性进行图片的加载,在做头像的时候就可以做到剪裁加载。内层div的css设置:/*设置图片样式*/.img{ width: 100%; height: 100%; background-position: center; background-size:cov...原创 2018-10-17 11:49:20 · 2251 阅读 · 0 评论 -
【js】js判断PC端还是Mobile端
if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent....原创 2018-09-30 14:47:08 · 241 阅读 · 0 评论 -
【css】css缩写
css缩写参考文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties css缩写 能缩减大量的代码,使代码便于阅读、理解。 1.background background:#F00 url(header_bg.gif) no-repeat fixed left top;...原创 2018-05-04 16:07:01 · 512 阅读 · 0 评论 -
【css】iconfont 在线链接怎么用
font-class引用font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。与unicode使用方式相比,具有如下特点:兼容性良好,支持ie8+,及所有现代浏览器。相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。不过因...原创 2018-04-09 23:14:38 · 2739 阅读 · 0 评论 -
【css】网页动画效果
1.图标旋转的效果html代码: <div class="apply-entrance "> <p class="apply-tt ">我要讲课<i class="icon-font i-v-bottom-small "></i></p> &a原创 2018-04-09 11:57:08 · 240 阅读 · 0 评论 -
【css】content-box 的应用
1.搜索文本框拼接html代码:<div class="header-index-search "> <div class="mod-search "> <a class="mod-search-dropdown "> <span class="mod-se原创 2018-04-09 11:35:20 · 452 阅读 · 0 评论 -
【css】boder-sizing 中content-box与boder-box的区别
1.盒子模型尺寸基准有两种,分别是content-box和border-box (默认是content-box)2.理论上说,content-box与border-box区别是两者的盒子的宽度是否包含表框和内边距。3.新建两个不同背景填充的div(con1设置为box-sizing:border-box,con为默认的content-box)[html] view plain copy<h...转载 2018-04-09 11:17:06 · 943 阅读 · 0 评论 -
【css】box-shadow 单双边阴影
box shadow 单边阴影 两边阴影box-shadow语法:x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect,其中阴影半径可以为负值,意思是增加或减少指定数值的阴影半径正常阴影 box-shadow: 5px 5px 5px black; 阴影半径为负值 box-shadow: 5px 5px 5px -5px black;阴影半转载 2018-04-09 09:29:48 · 3826 阅读 · 0 评论 -
【css】css图片廊
思路:利用左浮动进行排列,设置hover效果,动画自设。浮动清除使用伪元素after css: .responsive { float: left; padding: 0 6px; width: 24%; margin: 10px auto;转载 2017-12-27 16:20:42 · 353 阅读 · 0 评论 -
【css】提示框Tooltip
css: .content { line-height: 2em; min-width: 24px; border: 1px solid #d4d4d4; padding: 5px; padding-top: 7px;转载 2017-12-27 12:54:41 · 305 阅读 · 0 评论 -
【css】常用知识点小结
1. 凡是带有inline的元素,都有文字特性。 2. 盒模型可视宽高计算,不算margin,算 padding+boder+content:width|height 3. 定位:position (都配合left|right|top|bottom进行定位) 1).absolute 脱离原来位置进行定位(三维立体,Z轴定位) 相对于最近的有定位的父级进行定位,如原创 2017-11-13 13:35:39 · 178 阅读 · 0 评论 -
【html5】 canvas小结
canvas小结1). 默认情况下 元素没有边框和内容。2). 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。3). 你可以在HTML页面中使用多个 元素.4). getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。5).canvas拥有坐标,是一个原创 2017-11-17 13:26:40 · 244 阅读 · 0 评论 -
【vuejs】 模态框组件-confirm或者alert框
前言在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求。这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了。目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能。这个组件还是有很多扩展空间的,可以增加更转载 2017-11-01 15:51:24 · 5594 阅读 · 1 评论 -
【js】js设为首页加入收藏
//设为首页var sethomepage = function (url){ if (document.all) { document.body.style.behavior = 'url(#default#homepage)'; document.body.setHomePage(window.location.href); } el原创 2017-10-13 11:38:41 · 1142 阅读 · 0 评论 -
【js】滚动条的一些想法
1. 确定那个div里的内容是需要滚动条的。2.滚动条时内容超过高度溢出才有的玩意。3.定位好需要滚动的div //滚动加载事件 scrollBind() { var obj = document.getElementById(this.scrollCurrentNavbar); if (obj.scrollTop + obj.clientHeight原创 2017-11-07 10:29:24 · 132 阅读 · 0 评论 -
【jquery】 ajax parsererror was not called 报错[0,0,error]
问题介绍:$.ajax({ type: "GET", url: url, dataType: "jsonp", success: function (result) { alert("SUCCESS!!!"); }, error: function (xhr, ajaxOptions, thrownError) {转载 2017-10-09 16:28:05 · 1189 阅读 · 0 评论 -
用Html5和csss3做出漂亮的登录注册界面
用html5和css3切换登录注册界面首先我们先创造两个HTML5 forms,那样我们可以利用css3进行设置,使用icon font,这个案例就是来展示如何连接两个form之间的切换。HTML代码<div id="container_demo" > <!-- hidden anchor to stop jump http://www.css3crea...翻译 2017-02-06 22:04:33 · 52908 阅读 · 0 评论 -
【css】47 个css小技巧
01. 文字的水平居中将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center;02. 使用line-height让文字垂直居中 想设置包含block的且高度固定元素内的字体垂直时,只需要设置line-height跟其元素height一致即可。html: <div id="container">some text here</d转载 2017-11-17 16:46:55 · 675 阅读 · 0 评论 -
【vuejs】vue数组操作
vue中数组的操作总结: 一、根据索引设置元素: 1、调用$set方法:this.arr.$set(index, val);2、调用splice方法:this.arr.splice(index, 1, val);二、合并数组:this.arr = this.arr.concat(anotherArr);三、清空数组:this.arr = [];四、主要的数组转载 2017-11-06 10:19:04 · 28328 阅读 · 2 评论 -
【css】block,inline和inline-block概念和区别
总体概念block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。大体来说HTML元素各有其自身的布局级别(block元素还是inlin转载 2017-11-15 14:00:22 · 1567 阅读 · 0 评论 -
【css】css制作下拉菜单
css基础样式: ul { overflow: hidden;/*解决ul无高度*/ background-color: #333; } /*使用左浮动制作水平菜单*/ li { float: left;转载 2017-12-26 16:24:04 · 262 阅读 · 0 评论 -
【css+js+canvas】canvas的验证码生成
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <canvas id="canvas" width="150" height="50"></canvas><script> function randomNum(min,max){转载 2017-12-26 14:14:20 · 547 阅读 · 0 评论 -
【css】浮动的影响及解决方法(父元素无高度,而子元素有高度)
当一个元素内只包含浮动元素的时候,它会出现高度折叠,即元素的上下底边重合,即出现高度为0的情况,这样会导致后面接着的内容与上面内容出现重叠现象,针对这个问题分享几种解决方法:1、直接给父元素设定heightul { list-style-type: none; height: 30px; /*添加高度属性*/}2、父元素设置overflow属性值–auto|hid...转载 2017-12-22 15:43:32 · 1964 阅读 · 0 评论 -
【css】导航栏小结(一)-----简单导航
导航栏=链接列表导航条基本上是一个链接列表,所以使用 <ul> 和 <li>元素非常有意义:1).垂直导航栏 只需要设置<a> 元素的样式,就可以建议一个垂直导航栏。 注意请务必指定 <a>元素在垂直导航栏的的宽度。如果省略宽度,IE6可能产生意想不到的效果。 css:<style>ul{ list-style-type:none; margin:0; paddi转载 2017-12-22 14:01:38 · 1142 阅读 · 0 评论 -
【js】日期天数加减
以在某个日期上加减天数来说,其实只要调用Date对象的setDate( )函数就可以了,具体方法如下:function addDate(date,days){ var d=new Date(date); d.setDate(d.getDate()+days); var month=d.getMonth()+1; var day = d.getDate(); i转载 2017-12-21 15:42:52 · 1388 阅读 · 0 评论 -
【jquery】手风琴思路
html 代码:<!--手风琴效果--><div class="flash4"> <ul> <li class="first"> <div class="imgTop"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt="" class="tm" width="538" height="405"></div>转载 2017-12-21 13:51:05 · 265 阅读 · 0 评论 -
【css】css margin,padding 缩略写法
四个值 上 右 下 左三个值 上 左右 下两个值 上下 左右原创 2017-11-24 17:10:38 · 434 阅读 · 0 评论 -
【js】替换字符串中所有指定的字符
第一次发现JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符. 而str.replace(/\-/g,"!")则可以全部替换掉匹配的字符(g为全局标志)。 replace() The replace() method returns the string that results when you replace转载 2017-12-12 09:31:00 · 1659 阅读 · 0 评论 -
C#去除HTML标签
C#去除HTML标签在做网站的时候,用到了去除html标签的问题,用正则匹配到html标签,然后replace即可。public static string ReplaceHtmlTag(string html, int length = 0){ string strText = System.Text.RegularExpressions.Regex.Repla转载 2017-09-25 16:29:11 · 931 阅读 · 0 评论