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

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

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

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

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

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

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以下版本不支持标题这里开始内容

0.029291s