-
利用CSS的Sass预处理器（框架）来制作居中效果
所属栏目：[系统] 日期：2020-03-19 热度：126
副标题#e# 虽然使用 CSS 创建居中效果需要耍一些花招，特别是垂直居中效果，但我认为由此生出的诋毁，对于 CSS 则是不公平的。实际上我们有太多的方式使用 CSS 创建居中效果了，而且作为一名前端开发者，你真的有必要对其中的原理了解一二。 写这篇文章的目[详细]
-
CSS中使用border来创建三角形的基本方法讲解
所属栏目：[系统] 日期：2020-03-19 热度：200
副标题#e# 比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现 将边框分别设置为红/黄/蓝/绿 CSS Code复制内容到剪贴板 .triangle{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#ff0000#ffff00#0000ff#[详细]
-
仅针对IE8有效的CSS Hack猎奇写法
所属栏目：[系统] 日期：2020-03-19 热度：50
最近做项目的时候，引用了 Google Font 的在线字体，估计是因为浏览器对字体的渲染方式不同或者是字体格式不一样，结果导致 IE8 中导航是错位的，而 IE9 和 IE10 中是正常的。 那么就需要单独为 IE8 进行一些调整，于是就需要 IE8 的 CSS hack。一看到这里[详细]
-
CSS 实现元素较宽不能被完全展示时将其隐藏的方法
所属栏目：[系统] 日期：2020-03-19 热度：137
遇到一个需求，需要实现的样式是固定宽度的容器里一排显示若干个标签，数量不定，每个标签的长度也不定。当到了某个标签不能被完全展示下时则不显示。大致效果如下，标签只显示一排，多了放不下了就不显示了。 标签部分 DOM 结构如下 div class=labelsspan[详细]
-
使用CSS3 font-feature-settings特性减除字体动画震颤效果
所属栏目：[系统] 日期：2020-03-19 热度：139
在做 GithubProfile 项目的时候，使用了数字动画展示的效果，如My GithubProfile页面中的commits,stars以及followers数字。实际使用中，由于数字字体不等宽，造成在数字增长动画时很明显的震颤，体验非常不好。 这里我最终使用了CSS的 font-feature-settin[详细]
-
CSS 的加载及加载顺序简介
所属栏目：[系统] 日期：2020-03-19 热度：55
副标题#e# 关于前端css性能优化，网上很多类似文章，我之前也写过，《 网站前端性能优化之javascript和css 》，感兴趣的可以去看下。今天我们旧事重提，再来谈谈css的加载，及加载顺序。 通常的css加载顺序 一般情况下，我们css样式表是放在头部，同时为了[详细]
-
CSS学习笔记之常用Mixin封装实例代码
所属栏目：[系统] 日期：2020-03-19 热度：70
为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。个人在做项目的过程中总结归纳的一些常用Mixin，现在分享出来供大[详细]
-
CSS居中实例之大小不固定的图片居中方法
所属栏目：[系统] 日期：2020-03-19 热度：79
1.利用table-cell实现垂直居中 div class=box1[站外图片上传中(5)]/div div{ width: 500px; height: 500px; background: #ccc;}.box1{ text-align:center; display: table-cell; vertical-align: middle; /* font-size: 118px; */}img{ vertical-align: mi[详细]
-
CSS Flexbox的具体用法详解
所属栏目：[系统] 日期：2020-03-19 热度：96
副标题#e# Flexbox是一个强大而灵活的布局，本篇文章主要对其进行学习了解。 一、Flexbox简介 Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。简单的理解，就是可以自[详细]
-
如何理解 CSS 布局和块级格式上下文
所属栏目：[系统] 日期：2020-03-19 热度：171
副标题#e# BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文Understanding CSS Layout And The Block Formatting Context ，内容足够简洁明了。 本文的目的是介绍一些[详细]
-
iOS13.4beta5体验分享，7P流畅性有所提升
所属栏目：[系统] 日期：2020-03-19 热度：141
【金融特辑】光大****科技部DBA女神带你从0到1揭秘MGR iOS13.4beta5体验分享 今天凌晨苹果发布了iOS13.4第五个测试版，但是依旧没有更新太多的东西。版本号：13.4(17E5255a)。 本次体验设备为：iPhone11Pro Max、iPhoneX、iPhone7Plus 本次体验分享由于我的[详细]
-
如何清洁你的 iPhone 和 AirPods ？苹果的官方教程来了
所属栏目：[系统] 日期：2020-03-19 热度：66
【金融特辑】光大****科技部DBA女神带你从0到1揭秘MGR 数码产品的清洁一直是个很大的难题。很多设备都有金属部分，需要连接电源，一些清洁剂可能不适合使用。同时数码设备又是和人们「亲密接触」最多的产品之一，不管是为了卫生还是美观，定期清洁数码设备[详细]
-
企业微信的掣肘与野望
所属栏目：[系统] 日期：2020-03-19 热度：74
【金融特辑】光大****科技部DBA女神带你从0到1揭秘MGR 企业微信的名头足够响亮，能为市场部一年能省下几千万的推广费用，可使用过且能够用的好的企业却凤毛麟角!对于企业微信，除了产品本身的交互逻辑不够清晰、应用学习成本高、生态匮乏之外，还有更大的问[详细]
-
欧美移动支付APP崛起：当“另类支付”不再另类
所属栏目：[系统] 日期：2020-03-19 热度：117
【金融特辑】光大****科技部DBA女神带你从0到1揭秘MGR 说起另类支付(alternative payments)/替代支付，在2019年之前，PayPal可能是第一个真正的另类支付选择。 这里的另类 是指，除了主要的支付方案(如Visa和MasterCard)或占主导地位的国内信用卡选项外，你[详细]
-
详解css3自定义滚动条样式写法
所属栏目：[系统] 日期：2020-03-19 热度：176
先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 ::-webkit-scr[详细]
-
关于清除浮动塌陷的几种方法总结
所属栏目：[系统] 日期：2020-03-18 热度：180
副标题#e# 什么是浮动呢？ 定义这样说：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。 浮动的的元素有4点特性： 1.浮动元素会脱离标准文档流，已经不区分快和行了。[详细]
-
css让容器水平垂直居中的7种方式
所属栏目：[系统] 日期：2020-03-18 热度：60
副标题#e# 方法一：position加margin XML/HTML Code复制内容到剪贴板 divclass=wrap divclass=center/div /div CSS Code复制内容到剪贴板 /**css**/.wrap{width:200px;height:200px;background:yellow;position:relative; }.wrap.center{width:100px;height[详细]
-
利用CSS实现立方体360度旋转效果实例代码
所属栏目：[系统] 日期：2020-03-18 热度：144
示例代码： 复制代码 代码如下: !DOCTYPE html html head lang="en" meta charset="UTF-8" title/title style * { margin: 0; padding: 0} ul {list-style: none;} ul { width: 200px; height: 200px; margin: 200px auto; position: relative; transition[详细]
-
CSS3 media queries + jQuery实现响应式导航
所属栏目：[系统] 日期：2020-03-18 热度：59
副标题#e# 实现一个响应式导航，当屏幕宽度大于700px时，效果如下： 当屏幕宽度小于700px时，导航变成一个小按钮，点击之后有一个菜单慢慢拉下来： 思路： 1.为了之后在菜单上绑定事件，并且不向DOM中添加多余的节点，在大屏幕中出现的导航和小屏幕中的下拉[详细]
-
纯CSS实现导航栏Tab切换效果
所属栏目：[系统] 日期：2020-03-18 热度：181
副标题#e# 不用 Javascript，使用纯 CSS 方案，实现类似下图的导航栏切换： CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。 实现 Tab 切换的难点在于如何使用 CSS 接收[详细]
-
CSS中的line-height行高属性学习教程
所属栏目：[系统] 日期：2020-03-18 热度：126
副标题#e# 基本概念 1.行高、行距 行高是指文本行基线间的垂直距离。那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。看张盗图（选自下面的参考文章），其实我也修改了一下啦~ 注意：倒数第二根是基线哦，最下面那根是底[详细]
-
CSS3解决移动页面上点击链接触发色块的问题
所属栏目：[系统] 日期：2020-03-18 热度：146
副标题#e# 前段时间做微信页面的时候，一行内容做了2个链接，点击一个标签的时候，整个颜色块会闪一下，影响美观。需求针对这种情况来问我，能否把这个一闪的颜色去掉。我当时就想，这个怎么去？那我也不好直接回绝她，好吧，我试试吧！经过研究，百度的很[详细]
-
利用纯CSS自定义Checkbox和Radio的样式示例代码
所属栏目：[系统] 日期：2020-03-18 热度：80
首先看看不同平台的checkbox radio 我们可以利用CSS3的一些属性来实现自定义checkbox radio样式。 HTML 代码 // radio inputdiv class=radioinput id=male type=radio name=gender value=malelabel for=maleMale/labelinput id=female type=radio name=gen[详细]
-
CSS3轻松实现清新 Loading 效果的简单实例
所属栏目：[系统] 日期：2020-03-18 热度：140
至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。 第一种效果： HTML部分 XML/HTML Code复制内容到剪贴板 divclass=loading span/span span/span s[详细]
-
前端制作动画的几种方式（css3，js）
所属栏目：[系统] 日期：2020-03-18 热度：173
副标题#e# 制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。 1.css的transition。 语法： transition:[详细]
