效果图：一、使用css实现梯形html：<divclass="div">这是一个梯形</div>做法：通过tansform属性的perspective和rotateX，实现梯形（声明的顺序不能错）。rotateX是将物体以X轴为旋转轴，进行旋转。css代码如下.div{width:100px;height:100px;background:green;transform:perspective(.5em)rotateX(5deg);transform-origin:bottom;}
http://www.animate.net.cn/ Animate中文网http://ianlunn.github.io/Hover/ Hover.csshttps://two.js.org/examples/ Two.jshttps://www.swiper.com.cn/demo/index.html Swiper中文网http://www.100sucai.com/tag/75/ 100素材网
1、单行文本省略：overflow:hidden;//溢出隐藏white-space:nowrap;//禁止换行text-overflow:ellipsis;//...2、多行文本省略：display:-webkit-box;//谷歌-webkit-box-orient:vertical;-webkit-line-clamp:3;//显示几行overflow:hidden;注：英文自动换行：word-wrap:break-word;word-break:break-all;3、Vue中实现鼠标移入，省略号的内容全部显示：（1）Vue的ElementUI组件<p>{{item.title}}</p>改为：//法1<el-tooltip:content="item.title"placement="top-start"><p>{{item.title}}</p></el-tooltip>//悬浮层显示全部内容//法2<p:title="item.title">{{item.title}}</p>（2）Table表格<el-table-columnprop="name"label="姓名":show-overflow-tooltip="true">//:show-overflow-tooltip="true"//悬浮层显示全部内容4、html实现省略号全部显示：<divtitle="11111">11111</div>//title属性（title的内容与该内容相同）悬浮层显示全部内容5、css实现省略号全部显示：设置:hoverh4{overflow:hidden;//溢出隐藏white-space:nowrap;//禁止换行text-overflow:ellipsis;//...}h4:hover{width:200px;overflow:visible;white-space:pre-line;cursor:pointer;}
一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。因此，今天我们将与你分享3种CSS实现背景图图片全屏铺满自适应的方式，希望对你有所帮助。01margin:0px;background:url(images/bg.png)no-repeat;background-size:100%100%;background-attachment:fixed;url(images/beijing.png)——图片路径的位置；no-repeat——图片不重复；center0px——center是距离页面左边的定位，0px是距离页面上面的定位；background-position:center0——就是图片的定位，同上；background-size:cover;——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；min-height:100vh;——视窗的高度，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小。02background:url("bg.png")no-repeat;height:100%;width:100%;overflow:hidden;background-size:cover;//或者background-size:100%;03给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。cssbody标签的样式如下：body{/*加载背景图*/background-image:url(images/bg.jpg);/*背景图垂直、水平均居中*/background-position:centercenter;/*背景图不平铺*/background-repeat:no-repeat;/*当内容高度大于图片高度时，背景图像的位置相对于viewport固定*/background-attachment:fixed;/*让背景图基于容器大小伸缩*/background-size:cover;/*设置背景颜色，背景图加载过程中会显示背景色*/background-color:#464646;}总结以上就是我今天与你分享的内容，如果你觉得有帮助，请记得分享给你的朋友，也许能够帮助到他。最后，感谢你的阅读，记得常来站三界导航哦！
html+css可以很方便的进行网页的排版布局，还能减少很多不必要的代码。一.文本设置1、font-size:字号参数 2、font-style:字体格式3、font-weight:字体粗细4、颜色属性color:参数注意使用网页安全色二、超链接设置text-decoration:参数主要用途是改变浏览器显示文字链接时的下划线。 参数取值范围： underline：为文字加下划线 overline：为文字加上划线 line-through：为文字加删除线 blink：使文字闪烁 none：不显示上述任何效果三、背景1、背景颜色background-color:参数2、背景图片background-image:url(URL)URL就是背景图片的存放路径，none表示无。3、背景图片重复background-repeat:参数参数取值范围：no-repeat：不重复平铺背景图片repeat-x：使图片只在水平方向上平铺repeat-y：使图片只在垂直方向上平铺如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。4、背景图片固定背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力，一般都设为固定background-attachment:参数 参数取值范围：fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动四、区块1、单词间距 word-spacing:间隔距离 2、字母间距 letter-spacing:字母间距3、文本对齐text-align:参数参数的取值：left：左对齐right：右对齐center：居中对齐justify：相对左右对齐4、垂直对齐vertical-align:参数top：顶对齐bottom：底对齐text-top：相对文本顶对齐text-bottom：相对文本底对齐baseline：基准线对齐middle：中心对齐sub：以下标的形式显示super：以上标的形式显示5、文本缩进text-indent:缩进距离12px相当于一个文字距离6、空格white-space:参数normal正常pre保留nowrap不换行7、显示样式 display:参数 参数取值范围： block：块级元素，在对象前后都换行 inline：在对象前后都不换行 list-item：在对象前后都换行，增加了项目符号 none：无显示五、方框1、height高度2、width宽度3、padding内边距4、margin外边距5、float（浮动）：可以让块级元素在一行中排列，例如横向菜单。 6、clear清除浮动六、边框1、样式borderstyle参数边框样式的参数：none：无边框 dotted：边框为点线dashed：边框为长短线solid：边框为实线double：边框为双线2、宽度borderwidth参数3、颜色bordercolor参数七、列表list-style-type列表样式不同浏览器的列表符可能不相同，可能会影响到网页，所以网页中的列表大多都是由背景图片显示。控制用户界面的样式八、鼠标cursor：鼠标形状参数 CSS鼠标形状参数表： 鼠标形状：CSS代码style="cursor:hand" 手形style="cursor:crosshair" 十字形style="cursor:text" 文本形style="cursor:wait" 沙漏形style="cursor:move" 十字箭头形：style="cursor:help" 问号形style="cursor:e-resize" 右箭头形style="cursor:n-resize" 上箭头形style="cursor:nw-resize" 左上箭头形style="cursor:w-resize" 左箭头形style="cursor:s-resize" 下箭头形 style="cursor:se-resize" 右下箭头形 style="cursor:sw-resize" 左下箭头形
核心的方式是通过一张背景图中position从左到右移动，然后transition中steps控制帧率来实现效果。steps：阶跃函数，参数一是把这次过渡分成几段。在这里相隔固定动画时间，采用一段图像，调整图片长宽，保持每张小图相同的间距，调整合适的steps值就可以实现动画的效果。点赞的图完全可以自己用PS制作。html<divclass="box"></div>css.box{width:50px;height:50px;background:url(./dianzan.png)no-repeat;background-position:left;background-size:cover;}.boxactive{background-position:right;transition:background.6ssteps(28);//根据图片有多少帧，比如我这张图片有29张小图，那就是填28}boxactive这个属性可以点击之后动态增删，就可以达到效果，图片：
html<!--框--><divclass="win"><!--四个角的边框效果--><divclass="border_cornerborder_corner_left_top"></div><divclass="border_cornerborder_corner_right_top"></div><divclass="border_cornerborder_corner_left_bottom"></div><divclass="border_cornerborder_corner_right_bottom"></div><divclass="main"><!--这里写内容--></div></div>css.win{margin:20px;position:relative;display:inline-block;}.main{width:200px;height:200px;border:1pxsolidrgb(153,204,255);border-radius:4px;}.border_corner{z-index:2500;position:absolute;width:8px;height:8px;background:rgba(0,0,0,0);border:2pxsolid#2f7f9d;}.border_corner_left_top{top:0;left:0;border-right:none;border-bottom:none;border-top-left-radius:4px;}.border_corner_right_top{top:0;right:0;border-left:none;border-bottom:none;border-top-right-radius:4px;}.border_corner_left_bottom{bottom:0;left:0;border-right:none;border-top:none;border-bottom-left-radius:4px;}.border_corner_right_bottom{bottom:0;right:0;border-left:none;border-top:none;border-bottom-right-radius:4px;}注意：1、外层的class="win"必须设置position:relative/absolute，因为4个角position是absolute；2、class="main"设置边框，外层的class="win"不能设置，否则4个角会在里面；
1.强制不换行div{white-space:nowrap;}2.自动换行div{word-wrap:break-word;word-break:normal;}3.强制英文单词断行div{word-break:break-all;}
关于JavaScript的JSON的一些小技巧1、格式化默认的字符串化器还会缩小JSON，看起来很难看constuser={name:'John',age:30,isAdmin:true,friends:['Bob','Jane'],address:{city:'NewYork',country:'USA'}};console.log(JSON.stringify(user));//=>{"name":"John","age":30,"isAdmin":true,"friends":["Bob","Jane"],"address":{"city":"NewYork","country":"USA"}}JSON.stringify也有一个内置的格式化程序！console.log(JSON.stringify(user,null,2));//{//"name":"John",//"age":30,//"isAdmin":true,//"friends":[//"Bob",//"Jane"//],//"address":{//"city":"NewYork",//"country":"USA"//}//}（如果你想知道那个null是什么，我们稍后会谈到）在此示例中，JSON格式为2个缩进空格。我们还可以指定用于缩进的自定义字符。console.log(JSON.stringify(user,null,'lol'));//{//lol"name":"John",//lol"age":30,//lol"isAdmin":true,//lol"friends":[//lollol"Bob",//lollol"Jane"//lol],//lol"address":{//lollol"city":"NewYork",//lollol"country":"USA"//lol}//}2、隐藏字符串化数据中的某些属性JSON.stringify第二个参数，这在很大程度上是未知的。它被称为replacer，它是一个函数或数组，用于决定哪些数据保留在输出中，哪些不保留。这是一个简单的示例，我们可以在其中隐藏password用户。constuser={name:'John',password:'12345',age:30};console.log(JSON.stringify(user,(key,value)=>{if(key==='password'){return;}returnvalue;}));这是输出：{"name":"John","age":30}我们可以进一步重构：functionstripKeys(...keys){return(key,value)=>{if(keys.includes(key)){return;}returnvalue;};}constuser={name:'John',password:'12345',age:30,gender:'male'};console.log(JSON.stringify(user,stripKeys('password','gender')))输出：{"name":"John","age":30}还可以传递一个数组来仅获取某些键：constuser={name:'John',password:'12345',age:30}console.log(JSON.stringify(user,['name','age']))输出相同的东西。这也适用于数组。如果你有一大堆蛋糕：constcakes=[{name:'ChocolateCake',recipe:['Mixflour,sugar,cocoapowder,bakingpowder,eggs,vanilla,andbutter','Mixinmilk','Bakeat350degreesfor1hour',//...],ingredients:['flour','sugar','cocoapowder','bakingpowder','eggs','vanilla','butter']},//tonsofthese];我们可以轻松地做同样的事情，并且替换器将应用于每个蛋糕：constcakes=[{name:'ChocolateCake',recipe:['Mixflour,sugar,cocoapowder,bakingpowder,eggs,vanilla,andbutter','Mixinmilk','Bakeat350degreesfor1hour',//...],ingredients:['flour','sugar','cocoapowder','bakingpowder','eggs','vanilla','butter']},//tonsofthese];console.log(JSON.stringify(cakes,['name']))我们得到这个：[{"name":"ChocolateCake"},{"name":"VanillaCake"},...]3、使用toJSON创建自定义输出格式如果一个对象实现了该toJSON函数，JSON.stringify将使用它来对数据进行字符串化。考虑一下：classFraction{constructor(n,d){this.numerator=n;this.denominator=d;}}console.log(JSON.stringify(newFraction(1,2)))这将输出{"numerator":1,"denominator":2}.但是如果我们想用一个字符串替换它1/2呢？进入toJSONclassFraction{constructor(n,d){this.numerator=n;this.denominator=d;}toJSON(){return`${this.numerator}/${this.denominator}`}}console.log(JSON.stringify(newFraction(1,2)))JSON.stringify尊重toJSON财产和产出"1/2"。4、恢复数据我们上面的分数示例效果很好。但是如果我们想恢复数据呢？当我们再次解析JSON时，如果分数能神奇地返回，那不是很酷吗？我们可以！进入复活者！classFraction{constructor(n,d){this.numerator=n;this.denominator=d;}toJSON(){return`${this.numerator}/${this.denominator}`}staticfromJSON(key,value){if(typeofvalue==='string'){constparts=value.split('/').map(Number);if(parts.length===2)returnnewFraction(parts);}returnvalue;}}constfraction=newFraction(1,2);conststringified=JSON.stringify(fraction);console.log(stringified);//"1/2"constrevived=JSON.parse(stringified,Fraction.fromJSON);console.log(revived);//Fraction{numerator:1,denominator:2}我们可以传递第二个参数JSON.parse来指定reviver函数。恢复器的工作是将字符串化数据“恢复”回其原始形式。在这里，我们传递了一个reviver，它是类的静态fromJSON属性Fraction。在这种情况下，reviver检查该值是否是一个有效的分数，如果是，它会创建一个新Fraction对象并返回它。有趣的事实：此功能用于内置的Date对象。尝试查找Date.prototype.toJSON这就是为什么它有效：console.log(JSON.stringify(newDate()))//=>'"2022-03-01T06:28:41.308Z"'要恢复日期，我们可以使用JSON.parse：functionreviveDate(key,value){constregex=/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,}|)Z$/;if(typeofvalue==="string"&®ex.test(value)){returnnewDate(value);}returnvalue;}console.log(JSON.parse('"2022-03-01T06:28:41.308Z"',reviveDate))//=>TueMar01202206:28:41GMT-0700(PacificDaylightTime)5、使用revivers隐藏数据与解析器一样，恢复器也可用于隐藏数据。它以相同的方式工作。这是一个例子：constuser=JSON.stringify({name:'John',password:'12345',age:30});console.log(JSON.parse(user,(key,value)=>{if(key==='password'){return;}returnvalue;}));这是输出：{name:'John',age:30}
for循环在平时开发中使用频率最高的，前后端数据交互时，常见的数据类型就是数组和对象，处理对象和数组时经常使用到for遍历，因此下班前花费几分钟彻底搞懂这5种for循环。它们分别为：forfor...infor...offorawait..offorEachmap一、各个for介绍1、forfor循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历。可以遍历数组、对象、字符串，示例：//遍历数组vararr=[1,2,3]for(vari=0;i<arr.length;i++){console.log(arr[i]);}//遍历对象varobj={job:'webworker',name:'前端代码女神'}for(vari=0,keys=Object.keys(obj);i<keys.length;i++){console.log(obj[keys[i]])}//遍历字符串letstr='abc'for(vari=0;i<str.length;i++){console.log(str[i])}2、for...infor...in是在ES5中新增的，以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。//遍历数组vararr=[1,2,3]for(variinarr){console.log(i);//012console.log(arr[i]);//123}//遍历对象varobj={job:'webworker',name:'前端代码女神'}for(varkeyinobj){console.log(key)//jobnameconsole.log(obj[key])//webworker前端代码女神}//遍历字符串letstr='abc'for(variinstr){console.log(i)//012console.log(str[i])//abc}3、for...offor...of语句在可迭代对象(包括Array、Map、Set、String、TypedArray、arguments对象等等)上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。//迭代Arrayvararr=[1,2,3]for(varvalofarr){console.log(val);//123}//迭代Stringletstr='abc'for(varvalofstr){console.log(val)//abc}//迭代TypedArray-一个类型化数组，描述了一个底层的二进制数据缓冲区！letiterable=newUint8Array([0x00,0xff]);for(letvalueofiterable){console.log(value);//0255}//迭代Map-对象保存键值对，能够记住键的原始插入顺序letmap=newMap([['a',1],['b',2]])for(letkeyofmap){console.log('key',key)//['a',1]['b',2]}for(let[key,value]ofmap){console.log(key)//abconsole.log(value)//12}//迭代Setletset=newSet([1,2,3,2,1])for(letvalofset){console.log(val)//123}4、forawait...of创建一个循环，该循环遍历异步可迭代对象以及同步可迭代对象，包括内置的String、Array，类数组对象(arguments或nodeList)，TypedArray,Map,Set和用户定义的异步/同步迭代器。它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代钩子。类似于await运算符一样，该语句只能在一个asyncfunction内部使用。asyncfunction*asyncGenerator(){vari=0;while(i<3){yieldi++;}}(asyncfunction(){forawait(numofasyncGenerator()){console.log(num);//012}})();5、forEachforEach是ES5版本发布的，按升序为数组中含有效值的每一项执行一次回调函数，那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)，一般认为是普通for循环的加强版。//遍历数组vararr=[1,2,3]arr.forEach((item,index)=>{console.log(index);//012console.log(item);//123})//遍历对象varobj={job:'webworker',name:'前端代码女神'}varkeys=Object.keys(obj)keys.forEach((key)=>{console.log(key)//jobnameconsole.log(obj[key])//webworker前端代码女神})6、map遍历时可以返回一个新数组，新数组的结果是原数组中每个元素都调用一次提供的函数后返回的值。//遍历数组vararr=[1,2,3]letnewArr=arr.map((item)=>item*2)console.log(newArr);//[2,4,6]二、多个for之间区别1、使用场景差异for循环是最早最原始的循环遍历语句，for内部定义一个变量，按照条件进行循环遍历，通常是数组的长度，当超过长度时就停止循环，一般遍历的都是数组或类数组。遍历对象时，由于对象没有长度，所以使用Object.keys()获取对象的所有属性，以数组形式返回。for/in主要是用来遍历对象上的可枚举属性，包括原型对象上的属性，按任意顺序进行遍历，遍历对象时获取到的是属性的键值，遍历的是数组，数组的下标当做键值。for/of用于遍历可迭代对象的数据，包括Array、Map、Set、String、TypedArray、arguments对象等等。forawait...of用于遍历异步可迭代对象，该语句只能在一个asyncfunction内部使用。forEach是for的加升级版，使用更简单，携带参数更多，但本质还是数组的循环，每个元素都执行一次回调，不会改变原数组。map是给原数组每个元素都执行一次回调，返回一个新数组，不会改变原数组。2、功能差异forEach、map不支持跳出循环，其他不支持。forawait...of能够支持异步操作，其他的不支持。对于纯对象的遍历，for...in枚举更方便。对于数组遍历，如果不需要索引，可以直接使用for...of获取值，还可支持break或return;如果还需要索引，使用forEach更适合，但不支持return。如果是一个数组映射成另一个数组，使用map最合适。3、性能差异在测试环境、测试数据条件一致的情况下，性能排序为：for>forof>forEach>map>forin。for因为没有额外的函数调用和上下文，所以性能是最快的。for...of具有iterator接口的数据结构，可以使用它来迭代成员，直接读取键值。forEach是for的语法糖，还有许多的参数和上下文，因此会慢一些。map因为它返回的是一个等长的全新数组，数组创建和赋值产生的性能开销较大。for...in性能最差，因为需要列举对象的所有属性，有转化过程，开销比较大。三、for的使用在项目开发中，我们应该根据实际需求，去选择一个合适的for遍历。以下是一些使用建议：如果需要把数据映射成另外一个数组，如变成对应布尔值，推荐使用map，不会修改原数组，使用语法简单。数组遍历时，可以使用for、forEach或for...of。遍历的是纯对象时，推荐使用for...in。如果是需要对迭代器遍历，推荐使用for...of。如果是在数组中筛选符合条件的数组，使用fillter。
中国互联网举报中心