css

我们先来看一段css源码： ul{ margin-bottom: 20px; & >li { margin-bottom: 0; } } （视频教程推荐：css视频教程） & 表示嵌套的上一级。 这是sass的语法，代表上一级选择器。 上面的源码等同于如下代码： 立即学习“前端…

Web安全色对于大多数写程序的人来说都是毫无概念，当然，web safe color本身是一个历史遗留问题，今天已经没有太多讨论的必要。在这里介绍web安全色只是帮助还在Google “is web safe color still important”（Google搜索到的干货确实比百度强很多）的…

在实现元素自适应屏幕大小之前，我们先来介绍一个css知识点。 元素的margin和padding属性的值（无论是上下边距还是左右边距）如果设置为百分比，都是以宽度为基准计算的。 也就是说，在已知宽高比的情况下，css虽然不能确定height的值，但是可以确定padding-top等属性的值。 实现思…

效果图 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…

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

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