css
-
css中&表示什么意思
我们先来看一段css源码: ul{ margin-bottom: 20px; & >li { margin-bottom: 0; } } (视频教程推荐:css视频教程) & 表示嵌套的上一级。 这是sass的语法,代表上一级选择器。 上面的源码等同于如下代码: 立即学习“前端…
-
什么是Web安全色?



Web安全色对于大多数写程序的人来说都是毫无概念,当然,web safe color本身是一个历史遗留问题,今天已经没有太多讨论的必要。在这里介绍web安全色只是帮助还在Google “is web safe color still important”(Google搜索到的干货确实比百度强很多)的…
-
css实现元素自适应屏幕大小的思路是什么
在实现元素自适应屏幕大小之前,我们先来介绍一个css知识点。 元素的margin和padding属性的值(无论是上下边距还是左右边距)如果设置为百分比,都是以宽度为基准计算的。 也就是说,在已知宽高比的情况下,css虽然不能确定height的值,但是可以确定padding-top等属性的值。 实现思…
-
CSS 实现背景动态渐变效果
效果图 CSS 代码: *{ margin: 0; padding: 0;}body{ height: 100vh; width: 100%; overflow: hidden; background-image: linear-gradient(125deg,#F44336,#E91E63,#9C…
-
css实现文本溢出时显示省略号



一、单行文本溢出 如果要实现单行文本的溢出显示省略号可以用text-overflow:ellipsis属性,当然还需要加宽度width属性来兼容部分浏览。 实现方法: overflow: hidden;text-overflow:ellipsis;white-space: nowrap; 效果如图:…
-
css如何实现字体长阴影效果
首先我们来看一下实现效果,如下图所示: 重要属性: text-shadow 属性向文本设置阴影。 (视频教程推荐:css视频教程) 立即学习“前端免费学习笔记(深入)”; HTML代码: 屮艸芔茻 CSS代码: .loop(@counter) when (@counter > 0) { .lo…
-
css实现横向与竖向进度条效果的方法
1、横向进度条的实现代码 横向进度条 .loadbar { width:200px; height:25px; background-color:#fff; border:1px solid #ccc; } .bar { line-height:25px; height:100%; display:…
-
css实现快速回到顶部效果
背景: 现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四种方式。 1、通过锚链接回到顶部,需要将body加入一个名为top的标记 回到顶部 2、通过Jav…
-
推荐六款移动端 UI 框架
作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率。 一、MUI 最接近原生APP体验的高性能前端框架,追求性能体验,是我们开始启动MUI项目的…
-
CSS开发常用命名
CSS命名规范(规则)常用的CSS命名规则 头:header 内容:content/container 尾:footer 立即学习“前端免费学习笔记(深入)”; 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:…