-
Web移动端布局那些事
所属栏目：[系统] 日期：2020-03-17 热度：69
最近做了一个针对微信移动端的项目，在开发中遇到了不少的坑，学到了也不少，发现有许多地方值得写一下，以供做web移动端同学参考参考。 一、单位 说到移动端，不得不提适配问题，大大小小的移动设备不但让做android和ios的难过，因为设备大小和浏览器的差[详细]
-
使用CSS3代码绘制可爱的Hello Kitty猫
所属栏目：[系统] 日期：2020-03-17 热度：76
副标题#e# 感觉这个 Hello Kitty 画的还不错，心血来潮也用 CSS3 画了个 Hello Kitty，现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同学可以直接拉到最下面。我们先看下原图： 结构分解 从上图可以看出，Hello Kitty 由脸蛋、耳朵、红色[详细]
-
关于排版中经常见的问题及解决方法(分享)
所属栏目：[系统] 日期：2020-03-17 热度：162
关于排版中经常见的问题及解决方法(分享) CSS Code复制内容到剪贴板 /*去除默认样式*/ -webkit-appearance:none; /*去掉手机上a、input和button点击时的蓝色外边框和灰色半透明背景 解决方案1:*/ a,button,input,optgroup,select,textarea,div{ -webkit-ta[详细]
-
浅谈CSS 权值 层叠 重要性(!important)
所属栏目：[系统] 日期：2020-03-17 热度：177
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： XML/HTML Code复制内容到剪贴板 p{color:red;} .first{color:green;} pclass=first三年级时，我还是一个span胆小如鼠/span的小女孩。/p p和.firs[详细]
-
必须掌握10个非常不错的CSS技巧
所属栏目：[系统] 日期：2020-03-17 热度：90
在这里，巧妙的运用CSS的技巧，可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。 设计模版和博客主题时，我经常不断推敲和尝试CSS（Hit and Trial CSS ），我只看哪种配色方案和哪种CSS属性[详细]
-
20个非常实用的CSS技巧
所属栏目：[系统] 日期：2020-03-16 热度：161
副标题#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 热度：134
副标题#e# 前段时间做微信页面的时候，一行内容做了2个链接，点击一个标签的时候，整个颜色块会闪一下，影响美观。需求针对这种情况来问我，能否把这个一闪的颜色去掉。我当时就想，这个怎么去？那我也不好直接回绝她，好吧，我试试吧！经过研究，百度的很[详细]
-
CSS中的line-height行高属性学习教程
所属栏目：[系统] 日期：2020-03-16 热度：134
副标题#e# 基本概念 1.行高、行距 行高是指文本行基线间的垂直距离。那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。看张盗图（选自下面的参考文章），其实我也修改了一下啦~ 注意：倒数第二根是基线哦，最下面那根是底[详细]
-
CSS3轻松实现清新 Loading 效果的简单实例
所属栏目：[系统] 日期：2020-03-16 热度：137
至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。 第一种效果： HTML部分 XML/HTML Code复制内容到剪贴板 divclass=loading span/span span/span s[详细]
-
利用CSS实现立方体360度旋转效果实例代码
所属栏目：[系统] 日期：2020-03-16 热度：172
示例代码： 复制代码 代码如下: !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 热度：150
首先看看不同平台的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 热度：182
副标题#e# 制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。 1.css的transition。 语法： transition:[详细]
-
css解决display:inline-block;产生的缝隙（间隙）的方法
所属栏目：[系统] 日期：2020-03-16 热度：135
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙，这很显然不是我想要的效果，所以我就换成了左浮动，这样缝隙的问题是解决了，但是需要设置父元素的宽度才能实现水平左右滚动，这样又增加了代码量[详细]
-
详解CSS中的display:flex
所属栏目：[系统] 日期：2020-03-16 热度：88
Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 !DOCTYPE htmlhtml lang=enheadmeta chars[详细]
-
详解css常用选择器
所属栏目：[系统] 日期：2020-03-16 热度：105
导入外部css样式表的方法 使用link标签导入外部css样式表 link rel=stylesheet href=http://www.jb51.net/css/css/demo01.css 在样式表中import(导入)外部样式表 @import url(/crazy-html5/06css/css/demo01.css); 使用内部样式表 内部样式表只能作用于某[详细]
-
10个CSS简写/优化技巧整理
所属栏目：[系统] 日期：2020-03-16 热度：82
CSS简写就是指将多行的CSS属性简写成一行，又称为CSS代码优化或CSS缩写。CSS 简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅读。 下面介绍常见的CSS简写规则： 一、盒子大小 这里主要用于两个属性：margin和padding，我们以m[详细]
-
CSS实现鼠标滑过鼠标点击代码写法
所属栏目：[系统] 日期：2020-03-16 热度：135
鼠标滑过元素，使得元素的样式发生改变 我们定义一个按钮标签 复制代码 代码如下: buttonBUTTON/button 我们首先设置按钮的背景颜色为灰色： 复制代码 代码如下: .px-button{ background-color: grey; } 我们要使得鼠标滑过按钮的时候，让其变为蓝色，我们[详细]
-
CSS样式中大于号的使用及Css中处理继承方法
所属栏目：[系统] 日期：2020-03-16 热度：136
继承在一定程度上让程序在编写的过程中更加方便，但是有时候也会给我们的程序带来一定的困扰，所以认真的学习继承的原理，以及处理的方法很重要。下面是Css中处理继承的一个方法。 在一段CSS代码中见到一个大于号()，代码如下： BODY#css-zen-garden DIV#e[详细]
-
深入理解CSS系列之flex兼容
所属栏目：[系统] 日期：2020-03-16 热度：187
Flex 布局教程想了解的可以自己去看看这篇博文，或者自己百度，这里先部多做介绍，我们主要来说一说flex布局的兼容性问题。 why? 大家可能想问了，flex布局为什么会存在兼容性问题啊？ 之所以存在兼容性问题，是因为技术在不断的更新，有些旧的浏览器只支[详细]
-
深入理解CSS行高line-height与文本垂直居中的原理
所属栏目：[系统] 日期：2020-03-16 热度：173
前言 在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： 复制代码 代码如下: !DOCTYPE html html lang="en" head meta charset="UTF-8" tit[详细]
-
CSS3 三维变形实现立体方块特效源码
所属栏目：[系统] 日期：2020-03-16 热度：144
三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能类似。3D变形与2D变形的最大不同就在于其参考的坐标轴不同，2D变形的坐标轴是平面的，只存在X轴和Y轴，而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间，X[详细]
-
css3学习之2D转换功能详解
所属栏目：[系统] 日期：2020-03-16 热度：163
CSS3提供了2D转换功能，能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform，使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等。 这里，我将会介绍到[详细]
-
DIV+CSS实现带三角箭头的提示框
所属栏目：[系统] 日期：2020-03-16 热度：145
实现代码 CSS Code复制内容到剪贴板 !DOCTYPEhtml html head metacharset=UTF-8 linkrel=shortcuticonhref=resources/img/logo-color.pngtype=image/x-icon title测试/title style .out-div{ color:#FFFFFF; font-size:16px; line-height:40px; display:in[详细]
-
灵活运用CSS3特性绘制简易版围棋效果
所属栏目：[系统] 日期：2020-03-16 热度：98
副标题#e# 渐变的灵活运结合其他一些CSS3的特性的运用画出的简易版围棋 效果图 实现代码 XML/HTML Code复制内容到剪贴板 !DOCTYPEhtml htmllang=en head metacharset=UTF-8 metaname=viewportcontent=width=device-width,initial-scale=1.0 metahttp-equiv=[详细]
-
收益 or 挑战？Serverless 究竟给前端带来了什么
所属栏目：[系统] 日期：2020-03-16 热度：119
副标题#e# Serverless 是一种 无服务器架构，让用户无需关心程序运行环境、资源及数量，只要将精力 Focus 到业务逻辑上的技术。 现在公司已经实现 DevOps 化，正在向 Serverless 迈进，而为什么前端要关注 Serverless? 对业务前端同学： 会改变前后端接口定[详细]
