• select框默认样式去除

    html5|css3
  • 前世今生博客正式完工

    趣事奇闻
  • 梦之诡道

            梦,大家都会做,也都有自己看法和理解。今天就带大家走进我的“亲身”经历。        炙热的太阳烘烤着大地,我吃过午饭蹲坐在门前的大树下。门前竹林上的知了叫个不停,似乎也在向老天不断的抗议。看见爸爸和妈妈们高大的身影渐行渐远,我最终也无奈的拖起手边的锄头缓缓的向远处的山头走去。        我是小古,打我记事起就一直住在这里。我祖上三代都是老实巴交的农民。据说我爷爷在我爸很小的时候就过世了,就我家还有几户邻居住在这个小村庄。我从小体弱多病,爸爸妈妈经常大年三十的背着我忘医院跑。所以我妈妈都很稀罕我,什么重活都不让我干。但我爸不这么认为,他说正是因为我从小体弱多病,所有才要多锻炼。我爸呢身体也不好,由于他小时候家庭条件不好,屋子经常漏雨,导致腿部有风湿类疾病。我也从小就会做不少家务。     “小古,干嘛呢?快点好好走路。”思绪瞬间被拉回了现实,我加快了脚步,慢慢的赶上了他们。过了半个多小时,我们终于到了此行的目的地。眼前一片绿油油的菜籽地,我们今天就是要把这一亩三分地的杂草锄完。于是我们就埋头干了起来,过了大概一个小时的样子天空突然刮起了大风。大风过后,天色渐渐的暗了几分,我爸说道“这咋不对啊!刚刚还是大太阳的,油菜籽都是蔫的。这才多大功夫,就变了天。”我爸说完还不到两分钟,天空就狂风大作,隐隐有下暴雨的节奏,惊得树上的乌鸦仓惶逃窜。看这架势仿佛末日来临的前奏,于是我爸慌张的对我们说"这老天今天发什么疯,还不让我们干活了!我们收拾收拾农具回家吧”。        我一听要回家了顿时来了精神,扛起锄头撒欢似的就往家奔去。在回家的途中快要经过一个名为断魂崖的地方,狂风停了天色却出奇的暗,都快伸手不见五指,周围一片寂静连平时山中热闹的“演奏会”都没有了,静的似乎只能听见自己的心跳声和仓惶的脚步声。此时,只见我爸说:"这似乎有些不对,我们得要赶紧回家。" 听完我爸这番话,我心中不时的发虚只求快点回家。        突闻一声刺耳的尖叫声,我抬头一看,瞬时一股冷意袭来遍身冰冷彻骨,一阵眩晕感油然而生《未完待续》。。。

    jq 复制文字到剪贴板

    今天给大家分享两种实现复制文字到剪贴板的简单方法。一、使用execCommand方法用法:document.execCommand(sCommand[,交互方式, 动态参数])&nbsp;sCommand:为命令参数,如复制copy,打开open,全选selectAll等交互方式:两种可选参数true,false。true为显示对话框,false为不显示对话框。可不写动态参数:一般为可用值或属性值,可不写例如:<span id="daima">11111</span><input type="button" id="Copy" value="点击复制代码" /><script type="text/javascript">&nbsp; &nbsp; $("#Copy").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; var copyText = $("#daima");//获取对象&nbsp; &nbsp; &nbsp; &nbsp; copyText .select();//选择&nbsp; &nbsp; &nbsp; &nbsp; document.execCommand("Copy");//执行复制&nbsp;    alert("复制成功!");&nbsp; &nbsp; })</script>二、clipboard.js插件例如:<p data-clipboard-text="https://www.itao520.cn"&nbsp; class="btn">前世今生</p>下载clipboard.min.js,并在页面中引用<!--&nbsp;clipboard&nbsp;Script&nbsp;-->&nbsp;&nbsp;<script src="dist/clipboard.min.js"></script>在script中实例化语句var clipboard = new Clipboard(&#39;.btn&#39;);clipboard.on(&#39;success&#39;, function(e) {&nbsp; &nbsp; console.log(e.text);&nbsp; //&nbsp;复制的文字&nbsp;});

    php中统计中文字符串长度的两种方法

    在php里当需要判断一个字符串长度时,我们首先想到的是strlen()函数,strlen()返回的就是字符串的长度,这样使用没有任何问题。但是遇到中文或包含中文的字符串时就会出问题。为此,我分享两种统计中文字符长度的方法。一.mb_strlen(string&nbsp; $str,string [,$encoding = mb_internal_encoding() ])$str 要检查的中文字符串$encoding 参数为字符编码,如果省略,则使用内部字符编码该函数返回 str 字符数的统计,是整型。二.iconv_strlen()$str 要检查的中文字符串$encoding 参数为字符编码,如果省略,则使用内部字符编码该函数返回str字符串的长度。例如:$str = &#39;hello,中国!&#39;;$res1 = iconv_strlen($str,&#39;utf-8&#39;);$res2 = mb_strlen($str,&#39;utf-8&#39;); echo $res1."<br>";echo $res2;返回的$res1,$res2都为9

    文字水平垂直居中实现方法

    下面给大家介绍一下关于文字水平垂直居中的实现方法。一.利用padding属性居中padding: 50px;二.利用vertical-align属性display:table-cell;vertical-align:middle;利用这个属性前提是把display设置为table-cell三.使用flex弹性布局实现display:flex;justify-content: center;&nbsp;align-items: center;

    移动端字体小于12px的解决办法

    近期在开发移动端页面时,会遇到字体小于12px无效的情况。针对这一问题我百度了一番,具体的解决思路就是利用transform属性进行缩放字体大小。具体实现如下:font-size:12px;transform:scale(0.9);

    循环遍历树形栏目

    我们在网站开发时,很多时候都会用到树形栏目。具体怎么实现,我来分享一下吧。实现的思路大致是:采用递归的方式,先查询出所有的顶级栏目,根据顶级栏目id递归循环遍历子栏目,并给它们加上空格或其他符号来显示层次关系。public static function getCate($pid = 0, &$result = [], $blank = -4){ &nbsp; &nbsp;// 1、分类表查询 &nbsp; &nbsp;$res = self::all([&#39;pid&#39;=>$pid]); &nbsp; &nbsp;// 2、自定义分类层次显示关系 &nbsp; &nbsp;$blank += 4; &nbsp; &nbsp;// 3、遍历分类表 &nbsp; &nbsp;foreach ($res as $key => $value){ &nbsp; &nbsp; &nbsp; &nbsp;$cate_name = $value->cate_name; &nbsp; &nbsp; &nbsp; &nbsp;$value->cate_name = str_repeat(&#39;-&#39;,$blank).$cate_name; &nbsp; &nbsp; &nbsp; &nbsp;$result[] = $value; &nbsp; &nbsp; &nbsp; &nbsp;self::getCate($value->id,$result,$blank); &nbsp; &nbsp;} &nbsp; &nbsp;// 4、返回分类数组 &nbsp; &nbsp;return Collection::make($result)->toArray();}

    前世今生博客正式完工

    我的个人博客正式上线了,欢迎大家来光顾。随后我的小程序个人博客也会发布,敬请期待!

    秋风起,叶落相思情

    落叶题词,秋风写意,相思情不尽,时光依旧春去秋来。行走在静静得夜空下,望过往风云突变,望墨间伤痕不息。多少梦里花红酝酿苦酒,岁月几经周折旋转成指尖乾坤,流岁花空,空谱笔下花事,去时空空唯心凄。多少茫然惆怅,犹如奔腾不息得江水,涌潮般逆袭在心房,落笔铺纸,又成点点相思情,跃然纸上,流溢成悲伤千尺。秋风情中事,落叶寂寞心。阵阵秋风扑面而来,轻轻拂起了两鬓残发,思过往,无法将过去的光景,描摹出崭新得长卷,这应是一颗往事的心,在寂寞的缠绵悱恻中,勾勒出的支离破碎。有多少哀愁不言其说,瞬间在寂寞的心头愁绪万千,甚是凌乱,在脑海中结网曲张。世间多少风尘事事,沉淀在一段又一段的时光中,纵使感慨万千,还无法将往昔洗涤。时常;独自一人人漂泊在风尘仆仆的流光中,感受着一点一滴的冷暖辛酸,荣辱与共,人情炎凉,自寂寞中打马观花,看尽了繁华,踽踽独行而来。解脱不了寂寞的摧残,挣扎在孤独颤抖的灵魂中,流连往事的绵长,沧桑背后的真实。我应该是一个无比恋旧的人,喜欢在往事中,轻轻捏造出一个个悲伤得角色,然之将自己包裹其下,是为了饱受孤独之极的心,还是、我寂寞的无处释怀?就连我自己都不曾懂。久经徘徊在相思的门外,将思念放飞,将寂寞隐藏,相思如此这般,随风而起,在风中摇曳成笺。看秋雨绵绵,看秋风萧瑟,看落叶飘零。这个秋天是我又寂寞的走来,忧伤席卷着衣襟,泪眼诉说着孤单,我一个人的情愫无论如何的去点缀,最后不过这带满了忧思的伤感。你曾说陪我看尽繁华,陪我走过所有孤旅。如今;却在沉默不语下,失联的像扯断了线的风筝,在浩瀚的天空下,留着我一个人孤独的守候。如果人世间所有的伤感注定需要一个人来背负,我情愿一个人扛起所有的心伤,只因我想让你永远快乐。不再有任何忧伤,即使孤独的时候,也不会感觉到那般寂寞。看你说:你曾用孤独的心依旧爱着忧伤的我,你不怕万般辛苦的相信能改变我,让我不在为过去所牵绊,不再为忧伤所负累时,我更能体会到那颗温婉的心,柔情的抚摸着我的心房,至始至终我知道这份爱,给予我太多的温暖及心疼。时过年景匆匆,转眼不过弹指一瞬间。我们在沉长的时光中,走过物是人非,走过光阴荏苒的漫长。我知道这所有的经历,足以说明,我们真心的相爱过,不曾停留的心,在漂泊无定中,找到了温暖的归宿。多少次细数回忆,点滴的欢笑,在我寂寞如斯的心海中,感受到有你的余温,即使多次、情感依旧伤痕着,可至少不再如从前,那般暗淡的没有色彩。秋风起,相思情。无数次将思念轻轻的安放,将往昔冷冻般的收藏,而有时候还是不免触景伤情。记忆中的秋天有太多的故事,在自己成长的道路上犹如昨天一般,历历在目,难以磨灭的呈现出来。我看过落叶飘零的孤单,走过长街无人的灯火阑珊。这是一个人的回忆,始终不渝时光经过的沉淀。想念浮浮沉沉,涌动在寂寞的心头。只是这个秋天,我还是一个人游荡在这所空荡荡的城市里,无所适从的想念你。想你是一种习惯,一种难言的寂寞和孤单,没有你的欢颜笑语的日子,我好像从来没有过真正的快乐,缺憾的心真切般的想念,似乎关于你的点滴都是那么的甜蜜,那么的幸福,直到最后从孤单的思绪中反应过来,我还是一个人时,空荡荡的周围,如是那么安静。不免还是与相思题词谱句,与酒精饮痛泼墨。我不知道落叶以飘零的姿态,浅唱出多少曾经过往,更不知晓相思堆砌到玉案时,要我如何去把寂寞再度轻描淡写!一遍遍看着关于思念的句子,每一段都写的那么心疼,又不停地反问自己如何写出这么忧伤的段落。终究最后还是一个人的想念,飘飞在纸张上的依旧还是你。相思刺骨凉,落叶记情冷。短暂的相逢,何时韵成一首无声的离歌,直至到离别的泪水,轻轻滑落的眼角时才承认心的脆弱!美丽的相遇总是如此这般,以为不离开的离开了,以为要离开的没有离开。想起我们的重逢就像流星划过天际,你留在我耳畔的温柔、窃窃私语打破过黑夜的寂静。秋风在细雨绵绵中,打湿了心头的思念。相思的寂寞,在我的指尖蔓延而开的感伤,冰冷的不知所措。如果这世间最真是的想念,是这一种冰冷到孤独的寂寞,我情愿一直这样,载着关于对你的思念,漂泊在时光荏苒的轨迹中看尽春秋轮回,看尽繁华落尽,看完这一季的落叶从纷飞到枯萎。

    高考满分作文《谁欠谁的幸福》

    张无忌放弃了江湖与江山他把幸福给了赵敏却把牵挂给了小昭把漂泊给了蛛儿把憾恨给了芷若……杨过和小龙女最终做了神仙眷侣也许他知道,也许他不知道也许他装作不知道程英和陆无双为他负尽青春抛尽韶华郭襄为他天涯思君念念不忘也许他记得,也许他不记得曾经有一个叫公孙绿萼的姑娘把一生停驻在他一刹那的目光里,而他所能给的,也只能是一曲清箫、三枚金针或者某一刻的眷顾而已....这世间,太少的相濡以沫,太多的相忘江湖……我们曾经深深地爱过一些人爱的时候,把朝朝暮暮当作天长地久把缱绻一时当作被爱了一世于是承诺,于是奢望执子之手,幸福终老然后一切消失了,然后我们终于明白天长地久是一件多么可遇不可求的事情幸福是一种多么玄妙多么脆弱的东西也许爱情与幸福无关也许这一生最终的幸福与心底最深处的那个人无关也许将来的某一天,我们会牵住谁的手,一生细水长流地把风景看透。其实承诺并没有什么,不见了也不算什么所有的一切自有它的归宿我们学着看淡,学着不强求学着深藏,把你深深埋藏藏到岁月的烟尘企及不到的地方……只是,只是为什么在某个落雨的黄昏在某个寂寂的夜里你还是隐隐地在我心里淡入、淡出淡出、淡入,拿不走,抹不掉。阿朱如花的笑靥正在青石桥旁小镜湖边渐渐凋零乔峰在滂沱的夜雨中泪雨也滂沱你给我保护,我还你祝福你英雄好汉需要抱负可你欠我幸福,拿什么来弥补!陈家洛不愿负天下人,便负红颜。一个为他香消玉殒,一个因他寂寞余生,也许他的命运早早已是注定。终是塞上牛羊空许约。空许约,空许约,幸福永远未完成……我多么想和你有一个深深的拥抱之后,转身离去。情深未变却寒盟终究差了那么一点点幸福转眼消逝从此一个人,日日自己关门一个人熄灯其实也没什么不好,只不过寒冷的夜里少了一个人的温暖人有时候,总在失去时才后知后觉,一些人,一些事,以为只是生命中一抹浮云,以为可以从此相忘于江湖,却在别离之际发现,那些过往原来早已扎根在心底,拿不掉,抹不去。眷恋的人,给不了你承诺,于是你终于明白,幸福是一件多么可遇不可求的事情。可是为何仍要飞蛾扑火,执着一生?也许就如李莫愁时常低吟的那样:问世间情为何物,直教人生死相许。这世界上最复杂的东西,一个人又如何能想的透彻?有一个人,教会你如何去爱了,但是,他却不爱你了。有一个人,你一直在等他,他却忘记了你。有一个人,他想离开了,你却没有丝毫挽留,因为你渐渐明白,挽留是没有用的,你能给的,只有自由。你以为只要走的很潇洒,就不会有太多的痛苦,就不会有留恋,可是,为什么在喧闹的人群中会突然沉默下来,为什么听歌听到一半会突然哽咽不止。你不知道自己在期待什么,不知道自己在坚持什么,脑海里挥之不去的,都是过往的倒影。爱你的人,对你的要求很少,可以在很想你的时候看看你,可以在寂寞的时候和你说句话,这就是她所有的幸福。如果因为执念而作出仓促的决定,可以离开,但请不要走远,不要急着为彼此定性,不要急着分清界限,回头看看,她是否还在。在爱情里,如果两人都很被动,一段美好的姻缘不免在时间的摧残下消磨殆尽,并不是两个人不适合,而是双方都习惯于等待,等待对方先主动,没有耐心的人于是选择离开,最后徒留遗憾。所以,爱是有来生的,就像不灭的火种,只需加点干柴,它依旧能发出夺目的火光。天若有情天亦老,人若多情老得早,此情待可成追忆,只是当时已惘然。几米说:当你喜欢我的时候,我不喜欢你当你爱上我的时候,我喜欢上你当你离开我的时候,我却爱上你是你走的太快,还是我跟不上你的脚步?我们错过了诺亚方舟,错过了泰坦尼克号,错过了一切惊险与不惊险,我们还要继续错过但是,请允许我说这样自私的话多年后你若未娶我若未嫁那我们能不能在一起记住你欠我的幸福。

    《陌上花开》林清玄

    纤尘陌陌终有花开时,花开一季芬芳至永远。陌上那千年的等候,终究等来了花开一世的最终绚烂。陌上花开已迟暮,但终究在千年的等候里绽放出了美丽。这份美丽,或许于陌上而言,真的是经久的等待。或许,陌上早已有了等不来陌上花开的平和,如若陌上花开,阡陌或许觉得已经是生命的奇迹了。纤尘陌陌里,风舞尽沙,在千年的翘首里,阡陌已经忘了什么是风和沙的缠绵。在终年的清寂里,阡陌或许看透尘世,舞尽人生,不再对花开有所期待。对于突然在陌上开出的那朵尘世青莲,或许是经久等待之外的惊喜。秋风习习里,绝尘于陌上那孤寂的青莲,在不知不觉中已露尖尖角,那花蕾在晨露里绽吐芬芳。它已经错过了花开的最好季节,在秋已至的时候,抹开了沉睡已久的眼,终于明白自己为什么沉睡这么久,只因一直在寻找属于自己生命的阡陌。或许,属于它生命的阡陌一直在尘世的浮华里,未曾停留。所以千百年来的找寻,终究一次次的和属于它生命的阡陌错过。青莲想它这一生,或许已经找不到属于它生命的那方净土了。于是,沉睡再沉睡,在所有的睡意朦胧里,诠释着自己的前世今生。不过,青莲是倔强的,惟有找到它想要的阡陌,才愿意在这世绽放属于它自己的美丽。如若,遇不到给它灵魂洗涤的净土,它将永远的沉睡下去,不再醒来。或许,这份倔强终究有一天会感动苍天,让它在醒来的时候遇到了能让它娇艳开放的那方阡陌。几经轮回,沉睡之中醒来再沉睡,反复了千年,不怕一直在纤尘里流离,只因找不到让它尘埃落定的芬芳。经久的沉睡,但是记忆的芬芳一直是浓郁的,它明白自己为何一直在沉睡,因为在等待着属于它芬芳的阡陌风尘仆仆而来。所有的轮回里,遇到错过,错过再遇,一场场的浩劫最青莲它把自己禁锢在了沉睡里。青莲明白自己只是倔强又绝然的,在等着属于它的那一方陌,那一池水。如若能拥有自己想要的阡陌,最后自己的生命会归于一切的平静之中。青莲或许已经闻到了那方属于它的阡陌的味道,只是那方阡陌还在遥远的地方苍凉的遥望。青莲明白,总有一天自己等待着的那方陌,那池水,会从滚滚的红尘里最后卸下所有的喧嚣,还一切一片清寂。卸下所有的繁华,卸下所有的琐碎,呈有素颜的那天。青莲明白自己这样倔强的沉睡,为的就是找寻属于自己生命的那方阡陌。它最终需要的是不醉红尘只醉君的那份酣畅淋漓,或许此生也找不到这样的酣畅淋漓。但她自己知道,如若君不来,它就迟迟不开,不管是千年还是万年,永远的沉睡下去。如若君,一世的颠沛流离,那么它就一世的孤芳沉睡。

    php中explode()函数和implode()函数

    explode(string $str1,string $str2)explode函数把字符串打乱成数组参数说明string $str1: 必需。用于打乱的字符串string $str2: 被打乱的字符串例如:$str&nbsp;=&nbsp;"Hello&nbsp;world.&nbsp;I&nbsp;love&nbsp;Shanghai!"; print_r&nbsp;(explode("&nbsp;",$str));implode(string $str,$array)implode函数返回一个由数字元素组合成的字符串参数说明string $str: 可选。规定数组元素之间放置的内容。默认是“”(空字符串)$array : 必需。要组合成字符型的数组。例如:$arr = array(&#39;Hello&#39;,&#39;World!&#39;,&#39;Beautiful&#39;,&#39;Day!&#39;);echo implode(" ",$arr);$arr&nbsp;=&nbsp;array(&#39;Hello&#39;,&#39;World!&#39;,&#39;Beautifaul&#39;,&#39;Day!&#39;); echo&nbsp;implode("",$arr);

    php中json_decode()和json_encode()的使用方法

    json_decode(string $json ,[bool $assoc ]&nbsp;)&nbsp;对json格式的字符串进行编码参数说明String $json:&nbsp;待解码的 json string 格式的字符串$assoc:&nbsp;当该参数为 TRUE 时,将返回 array 而非 object 。&nbsp;json_decode($data)输出的是对象,而json_decode("$arr",true)是把它强制生成PHP关联数组.&nbsp;json_encode(mixed $value ,[ int $options = 0 ])&nbsp;对变量进行 JSON 编码 (该函数只接受UTF-8编码的数据)参数说明$value :&nbsp;待编码的 value ,除了resource 类型之外,可以为任何数据类型&nbsp;json_decode()和json_encode()是编译和反编译过程,注意json只接受utf-8编码的字符,否则会得到空字符或者null。

    php获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法

    php获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法php获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法,主要使用到了php的时间函数mktime。下面首先还是直奔主题以示例说明如何使用mktime获取今日、昨日、上周、本月的起始时间戳和结束时间戳,然后在介绍一下mktime函数作用和用法php获取今日开始时间戳和结束时间戳$beginToday=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;),date(&#39;Y&#39;));$endToday=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;)+1,date(&#39;Y&#39;))-1;php获取昨日起始时间戳和结束时间戳$beginYesterday=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;)-1,date(&#39;Y&#39;));$endYesterday=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;),date(&#39;Y&#39;))-1;php获取上周起始时间戳和结束时间戳$beginLastweek=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;)-date(&#39;w&#39;)+1-7,date(&#39;Y&#39;));$endLastweek=mktime(23,59,59,date(&#39;m&#39;),date(&#39;d&#39;)-date(&#39;w&#39;)+7-7,date(&#39;Y&#39;));php获取本月起始时间戳和结束时间戳$beginThismonth=mktime(0,0,0,date(&#39;m&#39;),1,date(&#39;Y&#39;));$endThismonth=mktime(23,59,59,date(&#39;m&#39;),date(&#39;t&#39;),date(&#39;Y&#39;));PHP mktime() 函数用于返回一个日期的 Unix 时间戳。语法:mktime(hour,minute,second,month,day,year,is_dst)

    单行、多行文本溢出显示省略号(css、js两种方法)

    一、css方法1、单行文本p{width:100px;overflow: hidden; &nbsp;/*超出部分隐藏*/white-space: nowrap; &nbsp;/*禁止换行*/text-overflow: ellipsis; /*省略号*/}2、多行文本这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器p{&nbsp; &nbsp; width:100px;&nbsp; &nbsp; height:40px;/*需要展示行高度*/&nbsp; &nbsp; display: -webkit-box; /* 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。*/&nbsp; &nbsp; -webkit-box-orient: vertical; /* 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。*/&nbsp; &nbsp; text-overflow: ellipsis; /* 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/&nbsp; &nbsp; -webkit-line-clamp: 2;&nbsp; &nbsp; overflow : hidden;&nbsp;}跨浏览器(浏览器需支持伪元素)p {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; line-height: 1.4em;&nbsp; &nbsp; /* 3 times the line-height to show 3 lines */&nbsp; &nbsp; height: 4.2em;&nbsp; &nbsp; overflow: hidden;}&nbsp;p::after {&nbsp; &nbsp; content: "\02026";/*...*/&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; padding: 0 20px 1px 45px;&nbsp; &nbsp; background:-webkit-linear-gradient(left,transparent,#fff 55%);&nbsp; &nbsp; background:-o-linear-gradient(right,transparent,#fff 55%);&nbsp; &nbsp; background:-moz-linear-gradient(right,transparent,#fff 55%);&nbsp; &nbsp; background:linear-gradient(to right,transparent,#fff 55%);&nbsp;}二、js方法function substrLength(elementId,length){&nbsp; //elementId:元素id,length:需保留字符串长度&nbsp; &nbsp; &nbsp; &nbsp; var text=document.getElementById(elementId);&nbsp; &nbsp; &nbsp; &nbsp; var result = "";&nbsp; &nbsp; &nbsp; &nbsp; if(text.innerText.length > length){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result = text.innerText.substr(0,length)+"...";&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result = text.innerText;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; text.innerText=result;&nbsp; &nbsp; }&nbsp; &nbsp; substrLength(&#39;ID&#39;,&#39;length&#39;);

    css3中属性前缀(-moz、-ms、-webkit、-o-)

    1、-moz-代表firefox浏览器私有属性2、-ms-代表ie浏览器私有属性3、-webkit-代表safari、chrome私有属性4、-o-代表Opera这些是为了兼容老版本的写法,比较新版本的浏览器都支持直接写:border-radius。Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、Chrome 以及 Safari 支持所有新的边框属性。对于 border-image:Safari 5 以及更老的版本需要前缀 -webkit-。Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。

    CSS3的WebKit属性给图片添加蒙版

    会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。大家对-webkit-mask这一属性可能不太熟悉,或许有很多人都是第一次见到,没错,这一属性也是还未被众多浏览器所支持的CSS属性,目前支持这一属性的仅有-webkit-前缀的谷歌及safari浏览器,但是相信在不久的未来这一属性将被其他主流浏览器所支持,下面我们来一睹为快。首先介绍一下它的属性值,可以有两种写法(图片蒙版、渐变蒙版):一、图片蒙版.demo1&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background&nbsp;:&nbsp;url("images/logo.png")&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask&nbsp;:&nbsp;url("images/mask.png"); }它的属性值与background的语法基本一样,相关的属性有webkit-mask-clip、 webkit-mask-position 和webkit-mask-repeat等。下面就是其实现的效果图:这里需要注意的是第二张mask.png中黑色部分的透明度(alpha)值为1,将完全显示其下方的图片区域,而其余部分的透明度为0(alpha值),将完全覆盖其下方的图片区域。二、渐变蒙版.demo1&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background&nbsp;:&nbsp;url("images/logo.png")&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask&nbsp;:&nbsp;-webkit-gradient(linear,&nbsp;left&nbsp;top,&nbsp;right&nbsp;bottom,&nbsp;from(rgba(0,0,0,1)),&nbsp;to(rgba(0,0,0,0))); }其属性值为CSS渐变老式语法:-webkit-gradient(<type>,&nbsp;<point> [,&nbsp;<radius>]?,&nbsp;<point> [,&nbsp;<radius>]? [,&nbsp;<stop>]*)&nbsp;而新式语法:-webkit-linear-gradient( [效果图如下:&nbsp;三、logo遮罩动态效果利用-webkit-mask我们还可以制作炫酷的logo遮罩动画效果,用js控制让蒙版动起来。效果图如下:实现代码如下:$(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(".mask").mouseover(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;b=0,c=$(this), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d=setInterval(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(b>parseInt(c.width()+50)){clearInterval(d);} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.css({"-webkit-mask":"-webkit-gradient(radial,&nbsp;88&nbsp;53,"+b+",&nbsp;88&nbsp;53,&nbsp;"+(b+15)+",&nbsp;from(rgba(255,&nbsp;255,&nbsp;255,1)),&nbsp;color-stop(0.5,rgba(255,&nbsp;255,&nbsp;255,&nbsp;0.2)),&nbsp;to(rgba(255,&nbsp;255,&nbsp;255,1)))"}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); });通过setInterval来对遮罩层渐变位置进行动态变化。我们还可以改变渐变的起点和终点位置来实现不同的效果:-webkit-gradient(radial,&nbsp;0&nbsp;0,"+b+",&nbsp;0&nbsp;0,&nbsp;"+(b+15)+",&nbsp;from(rgba(255,&nbsp;255,&nbsp;255,1)),&nbsp;color-stop(0.5,rgba(255,&nbsp;255,&nbsp;255,&nbsp;0.2)),&nbsp;to(rgba(255,&nbsp;255,&nbsp;255,1)))好了,是不是很炫酷?但是除了webkit的浏览器外其他浏览器不支持哦,如果对浏览器兼容性要求很高的话慎用,但是本着渐进增强的意识,有总比没有好对吧,看不到也无所谓对吧。

    保护网站不被仿站复制盗用可以这样做

    1.利用仿站工具或类似仿站工具之类原理的爬取工具,批量的抓取页面到本地,适合页面类型多的网站要想杜绝仿站工具及类似工具的爬取就需要在服务器端做好设置,允许正常的用户(浏览器UA)以及正常的搜索引擎蜘蛛(搜索蜘蛛UA,例如百度Baiduspider)访问网站的页面,禁止非法的UA,比如仿站工具前来爬取页面内容,所以只要配置好禁止爬取的UA即可:#以下是nginx的配置细节,添加到server内location&nbsp;/{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($http_user_agent&nbsp;~*&nbsp;"MSIE&nbsp;5.0|msnbot-media|oBot|YandexBot|Mail.RU_Bot|Applebot|SEOkicks-Robot|DotBot|YunGuanCe|Exabot|spiderman|Scrapy|HttpClient|Teleport|TeleportPro|SiteExplorer|WBSearchBot|Elefent|psbot|TurnitinBot|wsAnalyzer|ichiro|ezooms|FeedDemon|Indy&nbsp;Library|Alexa&nbsp;Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|CoolpadWebkit|Java|Feedly|UniversalFeedParser|ApacheBench|Microsoft&nbsp;URL&nbsp;Control|Swiftbot|ZmEu|oBot|jaunty|Python-urllib|lightDeckReports&nbsp;Bot|YYSpider|DigExt|HttpClient|MJ12bot|heritrix|EasouSpider|Ezooms|^$")&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;403;&nbsp;&nbsp;&nbsp;&nbsp;}}上面的UA都是被禁止访问的,至于返回码至于是403还是404或者其他非正常的都可以自定义。上面只是判断来访的UA,如果仿站类工具可以非常的逼真的模拟用户浏览器,那么该方法无效了。目前teleport的Pro版本是被禁止抓取的,另外一款叫仿站小工具的也成功阻挡了。至于teleport其他版本是否可以需要实际测试,并将对应合适的UA添加上去。2.纯人工去复制页面,这样的方法适合于页面类型少,页面简单。所以只要在页面上做好相应的防护措施即可://JS代码贴到页面头部,需要jquery$(document).ready(function()&nbsp;{&nbsp;//屏蔽鼠标右键&nbsp;&nbsp;&nbsp;&nbsp;$(document).bind("contextmenu",&nbsp;function(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false;&nbsp;&nbsp;&nbsp;&nbsp;});});$(function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;keydown&#39;,&nbsp;function(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e&nbsp;=&nbsp;window.event&nbsp;||&nbsp;e;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;keycode&nbsp;=&nbsp;e.keyCode&nbsp;||&nbsp;e.which;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(e.ctrlKey&nbsp;&&&nbsp;keycode&nbsp;==&nbsp;83)&nbsp;{&nbsp;//屏蔽Ctrl+s&nbsp;保存页面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.event.returnValue&nbsp;=&nbsp;false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(e.ctrlKey&nbsp;&&&nbsp;keycode&nbsp;==&nbsp;85)&nbsp;{&nbsp;<code class="js comments" style="box-sizing: content-box !important; font-size: 1em !important; padding: 0px !important; font-family: Consolas, "Bitstream Vera S

    select框默认样式去除

    html代码&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;css代码&nbsp;/*清除ie的默认选择框样式清除,隐藏下拉箭头*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; select::-ms-expand { display: none; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.info-select{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 12%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: 64%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outline: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*将默认的select选择框样式清除*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; appearance:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-appearance:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-appearance:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-appearance:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/*在选择框的最右侧中间显示小箭头图片*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background: url(../img/arrow.png) no-repeat scroll right center transparent;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}

    手机移动端WEB详解

    meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式viewport模板标题这里开始内容viewport模板 – target-densitydpi=device-dpi,android 2.3.5以下版本不支持标题这里开始内容