Vue 初始化使用笔记

23. May 2018 HTML5 0
做为一个后端开发,搞点前端也是必不可少的,最实用的就是平时写点东西展示出来,工作中调试接口,省去前后端交互的很多事,我会告诉前端接口我已经测试过了,接口问题和我无关哦。 1.vue安装使用,初始化项目绝对要使用vue-cli,不然太难搞 npm install --global vue npm install --global vue-cli vue init webpack my-project 接下来根据自己需求安装,可以的话,全选yes,依赖自动安装,完成后可以使用 npm run dev 查看项目,初始化介绍。 2.添加 axios npm install axios 在main.js中添加刚安装的axios import axios from \'axios\' import qs from \'qs\' import VueAxios from \'vue-axios\' axios.defaults.headers.post[\'Content-Type\'] = \'application/x-www-form-urlencoded\' axios.defaults.timeout = 5000 Vue.use(VueAxios, axios) 添加请求拦截器,格式化提交数据,否则数据提交失败。 axios.interceptors.request.use((config) => { if (config.method === \'post\') { config.data ...

Bootstrap 3.x打印问题

06. September 2017 HTML5 0
问题描述: 使用Bootstrap 3.x的网页打印预览会出现a标签显示超链接,背景图片透明,字段全黑等问题,是bootstrap中设置了@media print相关属性导致。 源码如下: @media print { * { color: #000 !important; text-shadow: none !important; background: transparent !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: \" (\" attr(href) \")\"; } abbr[title]:after { content: \" (\" attr(title) \")\"; } a[href^=\"javascript:\"]:after, a[href^=\"#\"]:after { content: \"\"; } pre, blockquote { border: ...

Jquery操作CSS兄弟节点和子节点,实现下拉特效和鼠标hover跟随特效

16. January 2017 HTML5 0
function show_jian(){ //紧挨着当前元素后面的兄弟元素 $(‘#lib_content1_nav’).find(“.lib_lib”).each(function(){ $(this).hover(function(){ $(this).next().css(‘display’,’block’); },function(){ $(this).next().css(‘display’,’none’); }) }); }; function show_down(){ 操作刷选的子节点 $(‘#lib_content2_left_text’).find(‘li’).each(function(){ $(this).hover(function(){ $(this).children(“div:last-child”).css(‘display’,’block’); },function(){ $(this).children(“div:last-child”).css(‘display’,’none’); }) }); }; ———————————————————-HTML <div id=”lib_content1_nav”> 兄弟节点跟随 <ul> {pc:content action=”category” num=”6″ siteid=”$siteid” catid=”139″ order=”listorder ASC”} {loop $data $r} <li> <div class=”lib_lib”> <a href=”{$r[url]}” style=”color: #ffffff”> {$r[catname]}</a> </div> <div class=”lib_content1_nav_jian”><img src=”{IMG_PATH}lib/lib_jian.png”></div> </li> {/loop} {/pc} </ul> </div> <div ...

Jquery图片滚动特效

16. January 2017 HTML5 0
———————————–Jquery jQuery.fn.extend({ pic_scroll:function (){ $(this).each(function(){ var _this=$(this);//存储对象 var ul=_this.find(“ul”);//获取ul对象 var li=ul.find(“li”);//获取所有图片所有的li var w=li.size()*li.width();//统计图片的长度 li.clone().prependTo(ul);//克隆图片一份放入ul里 ul.width(2*w);//设置ul的长度,使所有图片排成一排 var i=1,l; _this.hover(function(){i=0},function(){i=1});//鼠标经过时设置i=0达到鼠标经过停止效果 setInterval(function(){ //定时滚动函数 l = _this.scrollLeft(); if (l < 858) { _this.scrollLeft(l+i); } else { _this.scrollLeft(0); } },20); }) } }); <script type=”text/javascript”> $(document).ready(function(){ $(‘#content3_pic’).pic_scroll(); }) </script ———————————–Html <div id=”content3_pic”> <ul> {pc:content action=”lists” num=”4″ siteid=”$siteid” catid=”154″ order=”listorder desc”} ...

CSS简单胶囊式导航栏

16. January 2017 HTML5 0
—————————-css #lib_nav ul{ width: 1190px; height: 50px; margin: 0 auto; } #lib_nav ul li{ width: 148px; height:50px; display: block; float: left; border-left: 1px #ccc solid; font-size: 16px; font-family: “Microsoft YaHei”; color: rgb( 85, 85, 85 ); text-align: center; position: relative; /*padding-top: 16px;*/ } #lib_nav ul li a{ width: 148px; height: 35px; position: relative; display: block; ...

WEB中大屏图片居中显示,超出隐藏

15. December 2016 HTML5 0
有时候网页中需要全屏大图铺满屏幕,对于不同尺寸的显示器来说,超出部分就要隐藏,并且显示中间部分,如下: <div style=”width: 100%; height:346px; overflow: hidden; background: url({IMG_PATH}yzgh/cwu.gif) no-repeat center;”> </div> 把图片作为背景居中。

“< !- - saved from url=(0014)about:internet - ->“,一行代码阻止“IE浏览器提示已限制网页运行脚本或ActiveX控件”提示

16. November 2016 HTML5 0
我们在网站开发中,有些需要兼容IE8以下的浏览器,那么问题就来了,在IE浏览器中,当运行JS文件的时候,经常有提示,如“Internet Explorer 已限制网页运行脚本或ActiveX控件”,“为了有利于保护安全性,Internet Explorer己限制此网页进行可以访问计算机的脚本或ActiveX控件。请单击这里获取选项”,这些提示真的很讨人厌,虽然可以在IE浏览器中设置,打开工具——Internet选项–>高级 找到”允许活动内容在我的计算机上的文件中运行” 打上勾,确定。重启IE,然而我们不能要求用户去设置浏览器来适合我们网页,那么我们开发人员就只能上代码啦! 在<!DOCTYPE html”>下面添加下面一句话 <!– saved from url=(0014)about:internet –> 搞定!关闭浏览器重新打开试试。 官方解释(In cases where the generic MOTW comment (<!-- saved from url=(0014)about:internet -->) is used because the domain name is unknown, the “about:internet” forces Internet Explorer to host the webpage in the Internet zone.) 这句话的作用是让Internet Explorer 使用 Internet 区域的安全设置,而不是本地计算机区域的设置。 如需识别从特定域下载(从而已应用了包含该域的区域的安全设置)的 HTML,请使用相应域名添加以下注释: <!-- ...

Nginx下Ajax跨域问题,No ‘Access-Control-Allow-Origin’

11. November 2016 HTML5 0
解决Ajax跨域权限问题(No ‘Access-Control-Allow-Origin’),我知道的有两种方法。 第一种 在nginx配置文件(nginx.conf)中加入 location /{ add_header ‘Access-Control-Allow-Origin’ ‘http://www.blacker.top’; add_header ‘Access-Control-Allow-Credentials’ ‘true’; add_header ‘Access-Control-Allow-Methods’ ‘GET’; } 第一条指令:授权从www.blacker.top的请求 第二条指令:当该标志为真时,响应于该请求是否可以被暴露 第三天指令:指定请求的方法,可以是GET,POST 出于安全角度考虑,尽量不要使用Access–Control–Allow–Origin: *  //允许来自任何域的访问 第二种 使用Jsonp 进行跨域请求。  

网页中head之间meta标签应该如何写?降龙十八掌之第四掌HTML(兼容篇)

09. November 2016 HTML5 0
第一:<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ /> 这行代码是必要的,X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame。 特别说明“IE=edge是“以最高级别的可用模式显示内容”,和不设置是不一样的。有些因素会自动触发兼容性文档视图,这个时候设置X-UA-Compatible就可以防止这个自动触发的行为。 默认行为大致有这些: 存在于注册表中的兼容性视图列表,当url匹配时将自动切换到兼容性视图 在注册表中的对应字段指定了使用兼容性视图来显示所有网站 未指定DOCTYPE,则使用Quirks模式 曾经遇到过错误。 至于chrome=1,若在IE安装了GCF,默认首先使用GCF进行渲染。Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器,虽然这个插件目前用的很少了,但是万一呢,加上更严谨。   第二:<meta name=”renderer” content=”webkit|ie-comp|ie-stand”> 目前针对于360浏览器 content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。 若页面需默认用极速核,增加标签:<meta name=”renderer” content=”webkit”> 若页面需默认用ie兼容内核,增加标签:<meta name=”renderer” content=”ie-comp”> 若页面需默认用ie标准内核,增加标签:<meta name=”renderer” content=”ie-stand”> 这个meta标签主要针对于360浏览器,这方面360浏览器相比国内其他浏览器做的很棒哦,点赞!如果360开放强制使用极速内核接口就更好了。国内双核浏览器,是IE内核和webkit,在360浏览器中,360官网,淘宝,天猫等网站都只能运行在极速模式,没有注意到的小伙伴们可以试试哦,这个功能好像得和360合作。 文档地址http://se.360.cn/v6/help/meta.html   第三:<meta name=”viewport” content=”width=device-width, initial-scale=1″> 移动设备上的viewport分为layout viewport  、 visual viewport   和 ideal viewport  三类,其中的ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度。 width 设置layout viewport  的宽度,为一个正整数,或字符串”width-device” initial-scale 设置页面的初始缩放值,为一个数字,可以带小数 ...