浅谈CSS中的尺寸单位
浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。概览绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡...
2020-11-01
CSS中有些属性的前面会加上“*”或“_”所代表的意思
CSS中有些属性的前面会加上“*”或“_”所代表的意思给不同的浏览器识别例如：color{ background-color: #CC00FF; /*所有浏览器都会显示为...
2020-11-01
CSS 设置滚动条样式的实例代码
CSS 设置滚动条样式的实现代码如下所示：•::-webkit-scrollbar 滚动条整体部分
•::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决...
2020-11-01
深入浅析CSS 选择器分组
选择器分组假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：h2, p {color:gray;}将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则...
2020-11-01
css 评分效果的星星示例
纳尼？什么星星外衣？好，直接上图比较能说清楚：仔细看会发现规律：可以根据百分比/分值动态改变高亮星星的个数。分步骤图： 这种效果，如果遇到一分一个星，没有半星（或者有也可以，直接加一...
2020-11-01
CSS3实现文本垂直排列的方法
最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的...
2020-11-01
利用CSS3实现文字折纸效果实例代码
前言本文主要跟大家分享了一个利用CSS3实现文字折纸效果的实例，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧效果图：示例代码：代码如下，复制即可使用：<!DOCTYPE...
2020-11-01
通过css使用background-color为背景图添加遮罩效果的两种方法
一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法：...
2020-11-01
css遮罩全屏居中对齐的实现方式
具体代码如下所示：<style>#toastLoaderFullScreen { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999;...
2020-11-01
HTML+CSS实现下拉菜单的实现
1.下拉列表实例代码如下：<!doctype html><html><head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0; text-decoration:none; list-style:...
2020-11-01
CSS中的导航栏和下拉菜单的实现
一、CSS导航栏（1）导航栏的作用熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。（2）垂直导航栏<1>代码如下<!doctyre html><html>...
2020-11-01
CSS清除浮动方法大全(小结)
1、父级div定义伪类：after和zoom<style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:1...
2020-11-01
css 借助autoflow 属性 实现 选座位效果
1.autoflow属性，如果元素内容的长宽超出元素本身的长宽则会出现滚动条<HTML> <HEAD> <TITLE>测试表格内的滚动条</TITLE> </HEAD> <BODY> <div id="wins" style="pos...
2020-11-01
对常见的css属性进行浏览器兼容性总结(推荐)
为什么要对css属性进行浏览器兼容性总结呢？用的时候，直接去 Can I Use 里面检索浏览器对该属性的兼容性情况不就好了吗？css3.jpeg其实，在实际的开发过程中，我们对常见的css属性兼...
2020-11-01
详解css图像拼合技术（精灵图）
CSS图像拼合技术1.图像拼合 图像拼合技术就是单个图像的集合。 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的...
2020-11-01
详解css栅格系统在项目中的灵活运用
前言css栅格通常捆绑在各种框架中，但有时你需要自己去定制一个css栅格来满足实际的业务需要，本文聊聊css栅格系统在项目中的灵活运用。需求UI设计了如下布局，其中左上角橙色部...
2020-11-01
CSS设置列表样式和创建导航菜单实现代码
一、设置列表的符号 list-style-type: 属性；//设置列表样式list-style-type: none; //清楚样式属性有很多可以自己去试：circle，disc,decimal。。。。二、设置列表图片符号为ul,...
2020-11-01
CSS实现响应式布局的方法
用CSS实现响应式布局响应式布局感觉很高大上，很难，但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询，下面就介绍一下怎么运用：使用@media 的三种方法1.直接在CSS文...
2020-11-01
详解CSS pointer-events属性的使用
在前端的开发中，我们都是直接与用户接触，应该尽量让用户感到操作畅快愉悦，获得类似native的感觉。其中动画是最常用的方法。这里的需求是，弹层的设计，这个弹层希望可以像 native...
2020-11-01
css把容器级别（div...）标签固定在一个位置（在页面最右边）
代码如下所示：.process{ border:1px solid #B7B7B8; background:#F8F8F8; width:80px; height:250px; <!--固定定位--> position: fixed; right:0...
2020-11-01
CSS BEM 命名规范简介(推荐)
1 什么是 BEM 命名规范Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。BEM 是一个简单又非常有用的命名约定。让你的前端...
2020-11-01
CSS 字体新玩法之彩色字体的实现
如果你们设计师想在某些特别的专题活动中使用下图的字体作为标题字体进行展现，怎么办呢？做成图片咯。然后你可能会遇到这几个问题：不同屏幕下的适配，要是只做一种尺寸的图，放大或...
2020-11-01
CSS transform-origin属性的理解
前言最近做的一个烟花动画，就是烟花散开的动画，在动画的实现过程中，主要在烟花旋转过程中卡住了，后来发现主要对transform-origin属性理解不深，特地找了个例子来练习，加深了对属性...
2020-11-01
详解CSS定义字体、颜色、背景等属性
•字体属性•字体font-family:"字体1","字体2",... 例：font-family：“宋体”;
•字号font-size:大小的取值 例：font-size:16px; 注意：xx-small:...
2020-11-01
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow：hidden是overflow属性的一个神奇用法，它可以帮助我们隐藏溢出的元素，清除浮动和解除坍塌。当某一个属性拥有这么多的功能时，难免使人难以把握，不过不要怕，只要信：看完这篇...
2020-11-01
CSS代码实现三角形和饼图
.triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green yellow;}.triangle_top{width:0;height: 0;border-width:50px;border-...
2020-11-01
详解关于使用媒体查询@meda失效原因的总结
最近在写自己的个人博客时遇到了一个小问题，为了解决响应式设计，便加入了媒体查询@meida来自适应各种大小的终端设备。但是在其中还发现了不少坑，在这里希望通过这篇文章分享给...
2020-11-01
css实现导航切换的实例代码
css导航切换效果图如下： 代码如下，复制即可使用：<!DOCTYPE html><html><head> <title>css实现导航切换</title> <style type="text/css"> .clothes{width:1170px;...
2020-11-01
浅谈最全面的水平垂直居中方案与flexbox布局
最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各...
2020-11-01
23种CSS垂直居中技巧
网页CSS的垂直居中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈的研究后，据说CSS的垂直居中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将CSS的...
2020-11-01
css实现带箭头和圆点的轮播
功能：图片轮播，当鼠标移入图片、圆点和方向键时，停止轮播，移除恢复。1.首先建立div，并放入图片#wai{ width:300px; height: 300px; border: 1px solid red;} img{...
2020-11-01
CSS实现图片等比例缩小不变形的实例代码
下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ，具体代码如下所示：
<img src="../images/bg1.jpg" alt="" /> img { /*等宽缩小不变形*/...
2020-11-01
详解CSS3原生支持div铺满浏览器的方法
一般我们需要设置一个div与浏览器等高并等宽充满全屏，然后设置背景图片来达到一个高大上的排版效果。具体的例子看下面的图片演示：随着鼠标的滚动，整个图片也滚上去了。以前为...
2020-11-01
使用css使div占满整个屏幕的实现方法
使用定位方法<style>*{ padding: 0; margin: 0;}#myDiv { width: 100%; height: 100%; border: 1px solid red; position: absolute}</style><body> <...
2020-11-01
详解纯css实现瀑布流（multi-column多列及flex布局）
瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了1.multi-column...
2020-11-01
纯css实现漂亮又健壮的tooltip的方法
前言
tooltip的实现有多种方式，下面是一个tooltip成长史。效果
原始版最简单的莫过于就用原始title属性，像这样：<button title="tips">button</button>缺点是体验是差了点，并且...
2020-11-01
实现CSS圆环的5种方法(小结)
想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。
1. 两个标签的嵌套：<div class="element1"> <div class="child1"></div>...
2020-11-01
css float left布局换行不正常问题的解决
最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的结果出现了这样的情况页面的html是这样的 <div class="block">...
2020-11-01
css将两个元素水平对齐的方法(兼容IE8)
css实现水平对齐，如图有人会说css实现这种水平对齐要兼容ie8还不简单吗？使用float: left，或者display: inline-block，不就可以了吗？是的，最常用的最简单方式就是上面这两种，但还有...
2020-11-01
详解css使既有浮动又有左右margin的多个元素两端对其
两端对齐效果如上图中红色的9个div它们中间有间距，而最左边和最右边是没有间距的，这种布局如果使用css3的flex来实现是非常简单的，而如果要使用float布局就需要一些特殊的技巧...
2020-11-01
纯CSS实现微信小程序仿QQ顶部提示弹框动画效果
效果思路 用css的animation属性做动画代码wxml：<view class="container"> <view class='anit {{show == 1?"show":(show == 2?"hide":"")}}'>请选择商品</view> <view bind...
2020-11-01
使用CSS实现无滚动条滚动的两种方法
我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条...
2020-11-01
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
前言本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画（animation）、2D 转换（transform: scale）css3中新增了一个animation的...
2020-11-01
CSS绘制三角形的实现代码(border法)
1. 实现一个简单的三角形使用CSS盒模型中的border（边框）即可实现如下所示的三角形：CSS实现简单三角形实现原理：首先来看在为元素添加border时，border的样子；假设有如下代码：<div></...
2020-11-01
css实现二维码扫码框的示例代码
我们一般在打开相机的时候有个扫描框，然后静态二维码有时候为了聚焦和利于扫描也会加一个框框，下面介绍一下如何通过css 来实现一个框框实现效果:代码如下:html:<div class="i...
2020-11-01
纯css实现立体摆放图片效果的实例代码
1. 元素的 width/height/padding/margin 的百分比基准设置 一个元素 width/height/padding/margin 的百分比的时候，大家可知道基准是什么？举个栗子：.parent { width: 200px;...
2020-11-01
CSS中overflow-y: visible;不起作用的原因分析及解决方法
场景最近要做的一个需求是移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片左上角要有一个删除按钮。如下图：心想：so easy, 在父容器上加一个max...
2020-11-01
margin-top塌陷问题的现象与解决的具体方法
什么是margin-top塌陷margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框...
2020-11-01
CSS 同级元素position:fixed和margin-top共同使用的问题
问题描述想用CSS实现顶部固定的效果：尝试margin-top加position:fixed实现，代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="w...
2020-11-01
