12个你肯定会用到的前端技巧

时间：2023-04-04 23:04:25 HTML5

1.垂直居中html我从东到西居中

css.parent{border:3pxsolid#eee;背景：#f5f6f9；高度：100px；/*关键代码*/显示：flex；证明内容：居中；对齐项目：居中；}.child{字体大小：14px；font-weight:400;}效果图2.calchtml

//绘制进度条.parent{border:1pxsolid#eee;背景：#ebeef5；边界半径：4px；宽度：200px；高度：6px；overflow:hidden;}.child{/*键码*/width:calc(100%-50%);背景：#409eff；高度：100%；}3。文字超出显示...html如果上天能给我一次重来的机会，我不会用爱情来换取英雄梦。青春不再是遗憾半生匆匆别离，对她说三个字我爱你css.txt{border:1pxsolid#eee;背景：#ebeef5；边界半径：4px；宽度：400px；高度：30px；字体大小：14px；行高：30px；左填充：5px；颜色：#333；/*关键代码*/overflow:hidden;文本溢出：省略号；white-space:nowrap;}效果图4.设置输入占位符样式html.parent{width:px;}.placeholder{-webkit-外观：无；背景色：#fff；背景图像：无；边界半径：4px；边框：1px实心#dcdfe6；框大小：边框框；颜色：#606266；显示：内联块；字体大小：14px；高度：40px；行高：40px；大纲：无；填充：015px；过渡：边框颜色.2s立方贝塞尔(.645,.045,.355,1);width:100%;}/*关键代码*/.placeholder::-webkit-input-placeholder{color:#1E90FF;}效果图5.移去type="number"尾部的箭头htmlcss.parent{宽度：360px;}.spin,input{-webkit-appearance:none;背景色：#fff；背景图像：无；边界半径：4px；边框：1px实心#dcdfe6；框大小：边框框；：#606266；显示：内联块；字体大小：继承；高度：40px；行高：40px；大纲：无；填充：015px；过渡：边框颜色.2s立方贝塞尔曲线（.645，.045，.355，1）；宽度：100%；字体大小：14px；color:#1E90FF;}.spin{margin-top:16px;}/*keycode*/.spin::-webkit-inner-spin-button{-webkit-appearance:none;}.input::-webkit-inner-spin-button{-webkit-appearance:none;}效果图6.去掉输入状态行htmlcss.container{宽度：360px;}input{-webkit-appearance:none;背景色：#fff；背景图像：无；边界半径：4px；边框：1px实心#dcdfe6；框大小：边框框；颜色：#606266；显示：内联块；字体大小：14px；高度：40px；行高：40px；宽度：100%；填充：015px；过渡：边框颜色.2s立方贝塞尔(.645,.045,.355,1);width:100%;}/*关键代码*/.outline{outline:none;margin-top:16px;}效果图7选择器html

我是一条鱼，我曾经快乐地游来游去

css*{padding:0;}.container{宽度:360px;}.containerli{-webkit-外观：无；边界半径：4px；颜色：#606266；显示：内联块；字体大小：14px；高度：40px；行高：40px；宽度：100%；填充：015px；margin-bottom:8px;}/*keycode*/.containerli:first-child{border:1pxsolid#7CFC00;}.containerli:last-child{border:1pxsolid#00BFFF;}.containerli:nth-child(even){color:#FFC0CB;}.containerli:not(:last-child){background:#F5F5F5;}效果图8.自定义文本选择样式html万和一百万是一样的，因为我没有！一万和一百万是一样的，因为我没有！csstxt::selection{color:#ffd476;}效果图9.改变光标颜色htmlcss.container{width:360px;}input{-webkit-appearance:none;背景色：#fff；背景图像：无；边界半径：4px；边框：1px实心#dcdfe6；框大小：边框框；颜色：#606266；显示：内联块；字体大小：14px；高度：40px；行高：40px；宽度：100%；填充：015px；过渡：边框颜色.2s立方贝塞尔(.645,.045,.355,1);width:100%;}/*keycode*/.cursor{car??et-color:#ffd476;}效果图10.图片自适应htmlcss.container{宽度：360px；高度：120px；显示：弹性；证明内容：居中；align-items:center;}/*关键代码*/.img{max-width:100%;最大高度：100%；宽度：自动；height:auto;}Effectpicture.img{最大宽度:100%;最大高度：100%；宽度：自动；高度：自动；}

上一篇：智慧城市

下一篇：Java在线排查，纯干货推荐收藏

12个你肯定会用到的前端技巧相关文章