-
CSS margin全面了解
所属栏目：[系统] 日期：2020-03-16 热度：70
副标题#e# 一、margin可以为负值 在盒模型中，内容区的width/height、padding、border都不能为负值，但是margin例外，它可以为负值。 关于margin负值的使用技巧，了解不多，日后有机会再补充，此处先贴一个经典应用，margin-left负值结合浮动实现不改变DOM[详细]
-
使用CSS3代码绘制可爱的Hello Kitty猫
所属栏目：[系统] 日期：2020-03-16 热度：107
副标题#e# 感觉这个 Hello Kitty 画的还不错，心血来潮也用 CSS3 画了个 Hello Kitty，现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同学可以直接拉到最下面。我们先看下原图： 结构分解 从上图可以看出，Hello Kitty 由脸蛋、耳朵、红色[详细]
-
关于排版中经常见的问题及解决方法(分享)
所属栏目：[系统] 日期：2020-03-16 热度：177
关于排版中经常见的问题及解决方法(分享) CSS Code复制内容到剪贴板 /*去除默认样式*/ -webkit-appearance:none; /*去掉手机上a、input和button点击时的蓝色外边框和灰色半透明背景 解决方案1:*/ a,button,input,optgroup,select,textarea,div{ -webkit-ta[详细]
-
浅谈CSS 权值 层叠 重要性(!important)
所属栏目：[系统] 日期：2020-03-16 热度：125
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： XML/HTML Code复制内容到剪贴板 p{color:red;} .first{color:green;} pclass=first三年级时，我还是一个span胆小如鼠/span的小女孩。/p p和.firs[详细]
-
CSS兼容问题之HACK技术
所属栏目：[系统] 日期：2020-03-16 热度：142
CSS Hack原理是通过不同浏览器自身所带有的特别标识符以及CSS中优先级的机制来实现不同浏览器里CSS样式兼容性的问题。 针对不同的浏览器写不同的CSS的过程，这就叫CSS hack，也叫写CSS hack，相信您会对一些比较不易解决的兼容问题有一定的兴趣。 注意点：[详细]
-
浅谈css之属性及剩余的选择符
所属栏目：[系统] 日期：2020-03-16 热度：119
副标题#e# 今天的课程加速了，比平时快了些，但觉得很不错。nice~ 属性选择符 E[att] 选择具有att属性的E元素。 XML/HTML Code复制内容到剪贴板 input[type]{color:#red;}inputtype=radio E[att=val] 选择具有att属性且属性值等于val的E元素。 XML/HTML Cod[详细]
-
必须掌握10个非常不错的CSS技巧
所属栏目：[系统] 日期：2020-03-16 热度：173
在这里，巧妙的运用CSS的技巧，可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。 设计模版和博客主题时，我经常不断推敲和尝试CSS（Hit and Trial CSS ），我只看哪种配色方案和哪种CSS属性[详细]
-
10个非常实用的CSS hack技术
所属栏目：[系统] 日期：2020-03-16 热度：60
副标题#e# 好吧，既然你看了这篇文章，那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘，所以本文中，让我们看看10个肯定能提高你设计的CSS技术吧 1 跨浏览器的inline-block CSS Code复制内容到剪贴板 style[详细]
-
20个非常实用的CSS技巧
所属栏目：[系统] 日期：2020-03-16 热度：177
副标题#e# 这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ CSS Code复制内容到剪贴板 img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(1[详细]
-
CSS3解决移动页面上点击链接触发色块的问题
所属栏目：[系统] 日期：2020-03-16 热度：143
副标题#e# 前段时间做微信页面的时候，一行内容做了2个链接，点击一个标签的时候，整个颜色块会闪一下，影响美观。需求针对这种情况来问我，能否把这个一闪的颜色去掉。我当时就想，这个怎么去？那我也不好直接回绝她，好吧，我试试吧！经过研究，百度的很[详细]
-
深入解读CSS3中transform变换模型的渲染
所属栏目：[系统] 日期：2020-03-16 热度：157
副标题#e# transform是通过一系列矩阵变换完成的，scale等transform-function都是对matrix的封装。 w3里的解释是，transform基于可视化格式模型（visual formatting model，这样翻译对不对啊）并为其绘制出一个坐标系，而且所有在这个坐标系内进行的操作，[详细]
-
CSS中的line-height行高属性学习教程
所属栏目：[系统] 日期：2020-03-16 热度：66
副标题#e# 基本概念 1.行高、行距 行高是指文本行基线间的垂直距离。那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。看张盗图（选自下面的参考文章），其实我也修改了一下啦~ 注意：倒数第二根是基线哦，最下面那根是底[详细]
-
CSS3轻松实现清新 Loading 效果的简单实例
所属栏目：[系统] 日期：2020-03-16 热度：90
至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。 第一种效果： HTML部分 XML/HTML Code复制内容到剪贴板 divclass=loading span/span span/span s[详细]
-
CSS3 media queries + jQuery实现响应式导航
所属栏目：[系统] 日期：2020-03-16 热度：198
副标题#e# 实现一个响应式导航，当屏幕宽度大于700px时，效果如下： 当屏幕宽度小于700px时，导航变成一个小按钮，点击之后有一个菜单慢慢拉下来： 思路： 1.为了之后在菜单上绑定事件，并且不向DOM中添加多余的节点，在大屏幕中出现的导航和小屏幕中的下拉[详细]
-
纯CSS实现导航栏Tab切换效果
所属栏目：[系统] 日期：2020-03-16 热度：60
副标题#e# 不用 Javascript，使用纯 CSS 方案，实现类似下图的导航栏切换： CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。 实现 Tab 切换的难点在于如何使用 CSS 接收[详细]
-
关于清除浮动塌陷的几种方法总结
所属栏目：[系统] 日期：2020-03-16 热度：187
副标题#e# 什么是浮动呢？ 定义这样说：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。 浮动的的元素有4点特性： 1.浮动元素会脱离标准文档流，已经不区分快和行了。[详细]
-
css让容器水平垂直居中的7种方式
所属栏目：[系统] 日期：2020-03-16 热度：139
副标题#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-16 热度：199
示例代码： 复制代码 代码如下: !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[详细]
-
利用纯CSS自定义Checkbox和Radio的样式示例代码
所属栏目：[系统] 日期：2020-03-16 热度：167
首先看看不同平台的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，js）
所属栏目：[系统] 日期：2020-03-16 热度：145
副标题#e# 制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。 1.css的transition。 语法： transition:[详细]
-
css解决display:inline-block;产生的缝隙（间隙）的方法
所属栏目：[系统] 日期：2020-03-16 热度：107
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙，这很显然不是我想要的效果，所以我就换成了左浮动，这样缝隙的问题是解决了，但是需要设置父元素的宽度才能实现水平左右滚动，这样又增加了代码量[详细]
-
CSS3 三维变形实现立体方块特效源码
所属栏目：[系统] 日期：2020-03-16 热度：151
三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能类似。3D变形与2D变形的最大不同就在于其参考的坐标轴不同，2D变形的坐标轴是平面的，只存在X轴和Y轴，而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间，X[详细]
-
灵活运用CSS3特性绘制简易版围棋效果
所属栏目：[系统] 日期：2020-03-15 热度：189
副标题#e# 渐变的灵活运结合其他一些CSS3的特性的运用画出的简易版围棋 效果图 实现代码 XML/HTML Code复制内容到剪贴板 !DOCTYPEhtml htmllang=en head metacharset=UTF-8 metaname=viewportcontent=width=device-width,initial-scale=1.0 metahttp-equiv=[详细]
-
CSS控制DIV层显示和隐藏的实现方法
所属栏目：[系统] 日期：2020-03-15 热度：58
副标题#e# CSS中的display和visibility属性 css中display和visibility可以隐藏和显示html元素包括DIV层。看起来两者非常类似，很多人会搞混。下面分别介绍两者的属性： display:none|block; display:none; 隐藏该html元素，确切的说，是在浏览器中消除该元[详细]
-
利用CSS3实现毛玻璃效果示例源码
所属栏目：[系统] 日期：2020-03-15 热度：62
复制代码 代码如下: body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 serif; background: url("iphone.jpg") fixed 0 center; background-size: cover; } main { margin: 0 auto; padding:[详细]
