-
CSS中使用border来创建三角形的基本方法讲解
所属栏目：[系统] 日期：2020-03-18 热度：116
副标题#e# 比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现 将边框分别设置为红/黄/蓝/绿 CSS Code复制内容到剪贴板 .triangle{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#ff0000#ffff00#0000ff#[详细]
-
如何理解 CSS 布局和块级格式上下文
所属栏目：[系统] 日期：2020-03-18 热度：169
副标题#e# BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文Understanding CSS Layout And The Block Formatting Context ，内容足够简洁明了。 本文的目的是介绍一些[详细]
-
CSS学习笔记之常用Mixin封装实例代码
所属栏目：[系统] 日期：2020-03-18 热度：140
为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。个人在做项目的过程中总结归纳的一些常用Mixin，现在分享出来供大[详细]
-
CSS居中实例之大小不固定的图片居中方法
所属栏目：[系统] 日期：2020-03-18 热度：75
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; *[详细]
-
CSS Flexbox的具体用法详解
所属栏目：[系统] 日期：2020-03-18 热度：121
副标题#e# Flexbox是一个强大而灵活的布局，本篇文章主要对其进行学习了解。 一、Flexbox简介 Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。简单的理解，就是可以自[详细]
-
仅针对IE8有效的CSS Hack猎奇写法
所属栏目：[系统] 日期：2020-03-18 热度：75
最近做项目的时候，引用了 Google Font 的在线字体，估计是因为浏览器对字体的渲染方式不同或者是字体格式不一样，结果导致 IE8 中导航是错位的，而 IE9 和 IE10 中是正常的。 那么就需要单独为 IE8 进行一些调整，于是就需要 IE8 的 CSS hack。一看到这里[详细]
-
CSS 实现元素较宽不能被完全展示时将其隐藏的方法
所属栏目：[系统] 日期：2020-03-18 热度：122
遇到一个需求，需要实现的样式是固定宽度的容器里一排显示若干个标签，数量不定，每个标签的长度也不定。当到了某个标签不能被完全展示下时则不显示。大致效果如下，标签只显示一排，多了放不下了就不显示了。 标签部分 DOM 结构如下 div class=labelsspan[详细]
-
使用CSS3 font-feature-settings特性减除字体动画震颤效果
所属栏目：[系统] 日期：2020-03-18 热度：63
在做 GithubProfile 项目的时候，使用了数字动画展示的效果，如My GithubProfile页面中的commits,stars以及followers数字。实际使用中，由于数字字体不等宽，造成在数字增长动画时很明显的震颤，体验非常不好。 这里我最终使用了CSS的 font-feature-settin[详细]
-
详解css3自定义滚动条样式写法
所属栏目：[系统] 日期：2020-03-18 热度：82
先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 ::-webkit-scr[详细]
-
CSS 的加载及加载顺序简介
所属栏目：[系统] 日期：2020-03-18 热度：69
副标题#e# 关于前端css性能优化，网上很多类似文章，我之前也写过，《 网站前端性能优化之javascript和css 》，感兴趣的可以去看下。今天我们旧事重提，再来谈谈css的加载，及加载顺序。 通常的css加载顺序 一般情况下，我们css样式表是放在头部，同时为了[详细]
-
CSS3解决移动页面上点击链接触发色块的问题
所属栏目：[系统] 日期：2020-03-17 热度：176
副标题#e# 前段时间做微信页面的时候，一行内容做了2个链接，点击一个标签的时候，整个颜色块会闪一下，影响美观。需求针对这种情况来问我，能否把这个一闪的颜色去掉。我当时就想，这个怎么去？那我也不好直接回绝她，好吧，我试试吧！经过研究，百度的很[详细]
-
浅谈CSS 权值 层叠 重要性(!important)
所属栏目：[系统] 日期：2020-03-17 热度：81
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： XML/HTML Code复制内容到剪贴板 p{color:red;} .first{color:green;} pclass=first三年级时，我还是一个span胆小如鼠/span的小女孩。/p p和.firs[详细]
-
必须掌握10个非常不错的CSS技巧
所属栏目：[系统] 日期：2020-03-17 热度：64
在这里，巧妙的运用CSS的技巧，可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。 设计模版和博客主题时，我经常不断推敲和尝试CSS（Hit and Trial CSS ），我只看哪种配色方案和哪种CSS属性[详细]
-
css让容器水平垂直居中的7种方式
所属栏目：[系统] 日期：2020-03-17 热度：74
副标题#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[详细]
-
深入解读CSS3中transform变换模型的渲染
所属栏目：[系统] 日期：2020-03-17 热度：138
副标题#e# transform是通过一系列矩阵变换完成的，scale等transform-function都是对matrix的封装。 w3里的解释是，transform基于可视化格式模型（visual formatting model，这样翻译对不对啊）并为其绘制出一个坐标系，而且所有在这个坐标系内进行的操作，[详细]
-
CSS中的line-height行高属性学习教程
所属栏目：[系统] 日期：2020-03-17 热度：179
副标题#e# 基本概念 1.行高、行距 行高是指文本行基线间的垂直距离。那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。看张盗图（选自下面的参考文章），其实我也修改了一下啦~ 注意：倒数第二根是基线哦，最下面那根是底[详细]
-
CSS3轻松实现清新 Loading 效果的简单实例
所属栏目：[系统] 日期：2020-03-17 热度：75
至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。 第一种效果： HTML部分 XML/HTML Code复制内容到剪贴板 divclass=loading span/span span/span s[详细]
-
CSS3 media queries + jQuery实现响应式导航
所属栏目：[系统] 日期：2020-03-17 热度：171
副标题#e# 实现一个响应式导航，当屏幕宽度大于700px时，效果如下： 当屏幕宽度小于700px时，导航变成一个小按钮，点击之后有一个菜单慢慢拉下来： 思路： 1.为了之后在菜单上绑定事件，并且不向DOM中添加多余的节点，在大屏幕中出现的导航和小屏幕中的下拉[详细]
-
纯CSS实现导航栏Tab切换效果
所属栏目：[系统] 日期：2020-03-17 热度：164
副标题#e# 不用 Javascript，使用纯 CSS 方案，实现类似下图的导航栏切换： CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。 实现 Tab 切换的难点在于如何使用 CSS 接收[详细]
-
关于清除浮动塌陷的几种方法总结
所属栏目：[系统] 日期：2020-03-17 热度：109
副标题#e# 什么是浮动呢？ 定义这样说：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。 浮动的的元素有4点特性： 1.浮动元素会脱离标准文档流，已经不区分快和行了。[详细]
-
css3学习之2D转换功能详解
所属栏目：[系统] 日期：2020-03-17 热度：177
CSS3提供了2D转换功能，能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform，使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等。 这里，我将会介绍到[详细]
-
CSS样式中大于号的使用及Css中处理继承方法
所属栏目：[系统] 日期：2020-03-17 热度：84
继承在一定程度上让程序在编写的过程中更加方便，但是有时候也会给我们的程序带来一定的困扰，所以认真的学习继承的原理，以及处理的方法很重要。下面是Css中处理继承的一个方法。 在一段CSS代码中见到一个大于号()，代码如下： BODY#css-zen-garden DIV#e[详细]
-
深入理解CSS系列之flex兼容
所属栏目：[系统] 日期：2020-03-17 热度：144
Flex 布局教程想了解的可以自己去看看这篇博文，或者自己百度，这里先部多做介绍，我们主要来说一说flex布局的兼容性问题。 why? 大家可能想问了，flex布局为什么会存在兼容性问题啊？ 之所以存在兼容性问题，是因为技术在不断的更新，有些旧的浏览器只支[详细]
-
深入理解CSS行高line-height与文本垂直居中的原理
所属栏目：[系统] 日期：2020-03-17 热度：181
前言 在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： 复制代码 代码如下: !DOCTYPE html html lang="en" head meta charset="UTF-8" tit[详细]
-
CSS实现鼠标滑过鼠标点击代码写法
所属栏目：[系统] 日期：2020-03-17 热度：129
鼠标滑过元素，使得元素的样式发生改变 我们定义一个按钮标签 复制代码 代码如下: buttonBUTTON/button 我们首先设置按钮的背景颜色为灰色： 复制代码 代码如下: .px-button{ background-color: grey; } 我们要使得鼠标滑过按钮的时候，让其变为蓝色，我们[详细]
