好文分享

效果图 CSS 代码： *{ margin: 0; padding: 0;}body{ height: 100vh; width: 100%; overflow: hidden; background-image: linear-gradient(125deg,#F44336,#E91E63,#9C…

一、单行文本溢出 如果要实现单行文本的溢出显示省略号可以用text-overflow:ellipsis属性，当然还需要加宽度width属性来兼容部分浏览。 实现方法： overflow: hidden;text-overflow:ellipsis;white-space: nowrap; 效果如图：…

首先我们来看一下实现效果，如下图所示： 重要属性： text-shadow 属性向文本设置阴影。 （视频教程推荐：css视频教程） 立即学习“前端免费学习笔记（深入）”； HTML代码： 屮艸芔茻 CSS代码： .loop(@counter) when (@counter > 0) { .lo…

1、横向进度条的实现代码 横向进度条 .loadbar { width:200px; height:25px; background-color:#fff; border:1px solid #ccc; } .bar { line-height:25px; height:100%; display:…

背景： 现在的网站基本上都是长页面，多的有四五屏，少的话也有两三屏，页面太长有的时候为了提升用户体验，会在页面右边出现一个回到顶部的按钮，这样能快速回到顶部，以免在滑动页面出现视觉屏幕，回到顶部一般有四种方式。 1、通过锚链接回到顶部,需要将body加入一个名为top的标记 回到顶部 2、通过Jav…

一、media query方式 /*iPhone X 适配*/@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .fixed-bo…

作为一个前端人员来说，总结几款相对来说不错的用于移动端开发的UI框架是非常必要的，以下几种移动端UI框架就能基本满足工作中开发需要，根据项目需求，选用合适的框架搭建项目，更能容易提高开发效率。 一、MUI         最接近原生APP体验的高性能前端框架，追求性能体验，是我们开始启动MUI项目的…

CSS命名规范(规则)常用的CSS命名规则 　　头：header 　　内容：content/container 　　尾：footer 立即学习“前端免费学习笔记（深入）”； 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体佈局宽度：wrapper 　　左右中：…

CSS中的单位 绝对单位 in-英寸； cm; 立即学习“前端免费学习笔记（深入）”； mm; pt-磅 相对单位 em-与元素字号挂钩； rem-与根元素字号挂钩； px-与css像素挂钩 %-另一属性值的百分比 CSS中可以取百分比的属性 定位：top, right, bottom, left …

id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。 例如： #para1{ text-align:center; color:red;} 注意： ID属性不要…