摘要：
注：本文转自大神阮一峰，自己加了少许改动~ 上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solv 阅读全文
摘要：
这是我去年6月份写的，今天搬到博客里面，所以标题名字就不改了。哈哈~ 1、如果一个DIV中有多张图片连续排版出现的情况及解决办法 一个DIV中连续放多张图片，不管我们如何清除margin和padding都会出现间隙，那如何才能去掉间隙呢？解决办法如下： 2、div中的内容都不是紧紧贴着的，布局方法： 阅读全文
摘要：
本文转自阮一峰大师的教程，此处做记录，方面后面自己学习使用~ 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案 Flex布局，可以简便、完整、响应式 阅读全文
摘要：
css如何实现这样的样式： 解决方案： 这里需要用到的技术是border-image的灵活运用，首先需要一张图片，这里我选中的是这样子的，此后 的图片可以拿这个更改圆形的颜色以更改锯齿颜色： 底部透明，正方形，ps截图如下： 好了，下面咱们就开始真正的代码： html: <section class 阅读全文
摘要：
一次偶然的项目中，遇到一个奇怪的问题，为什么我都写了换行的css怎么还是没有换行？请教宋老师之后才知道“英文字母和数字是不会换行的”，那如何处理呢？ 处理办法，在所在类上增加下面css： word-wrap:break-word;word-break:break-all; 阅读全文
摘要：
svg就相当于字体，如何将生成的svg导入到自己的项目中去呢？ 1、将类似下面的文件放入自己的项目中： 2、生成的svg中有一个style.css文件，将里面的内容拷贝到你的css中，然后更改上图的路径即可： 在你的css文件将上图中的style.css文件拷贝进去即可，如下图： 注意路径哦~ 1、 阅读全文
摘要：
如上图所示的图片，如何通过css实现呢？ 下面咱们慢慢尝试： html: <div class="togglePosition"> <label class="toggle"> <input type="checkbox"> <div class="track"> <div class="handl 阅读全文
摘要：
将相应的字体放入新建的文件夹，然后在Css文件里面如下图引入 @font-face { font-family: FZLTCXHJW; src: url(../font/FZYouHJW_Xian_a85e94b5d6.eot); src: url(../font/FZYouHJW_Xian_a85 阅读全文
摘要：
使用rem布局，首先要知道自己是根据UI给的视效图的多少基准的，这里是以750px为基准，代码如下： //rem布局,此处根据750px来设置,放大100倍 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'ori 阅读全文
摘要：
1、我们先来直接上代码，使用css写三角形： #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } 阅读全文
摘要：
#identify textarea::-webkit-input-placeholder{color:#8993BC;} #identify textarea:focus::-webkit-input-placeholder{color:#8993BC;} 阅读全文
摘要：
如何实现下图的效果-—这里就用到了滤镜 如何实现下图的效果-—这里就用到了滤镜 给灰色弹框这个标签元素加“伪类”如下： #nearStoreContent .popChoose li:before { 1. z-index: 1; 2. position: absolute; 3. content: 阅读全文
摘要：
引用动画的方式： 1、轻量动画： cubic-bezier(0.165, 0.840, 0.440, 1.000);//加上贝塞尔曲线使动画运动起来更加平滑 2、.scrollNews,.m-treeview{transition:all 0.3s cubic-bezier(0.165, 0.840 阅读全文
摘要：
此处也是用来做记录，防止有用到是时候无法找到，代码是压缩的哦~ 阅读全文
摘要：
移动端头部声明有哪些？ 此处只做记忆，防止以后用到又要苦苦寻找~ 阅读全文
摘要：
<a href="tel:400-888-6633">拨打电话<a> <a href="sms:19956321564">发送短信<a> <a href="mailto:mail@mail.com">发送邮件<a> 阅读全文
摘要：
1、使用float必须要清除float：即在使用float元素的父级元素上清除float。 清除float的方法有三种，在父元素上加：1、width: 100% 或者固定宽度 +overflow:hidden;或者 overflow: auto; 2、clear:both 3、（推荐）在父级元素上增 阅读全文
摘要：
先看看如下所示的视效图应该如何显示背景阴影？ 说明：关于background-size可以为 background-size:80px 60px;，也可以为：background-size:50% 50%； background-size: cover;的意思是将背景的图像扩展至刚好何以铺满屏幕。图 阅读全文
摘要：
1、worde-space是增加或减少单词之间的空白，即字间距。例如： this is a bag 2、letter-space是增加或减少字符间的空白，即字符间距。例如： t h i s 阅读全文
摘要：
对伪类的理解一直不是很透彻，这里不想写定义之类的，直接写写自己的经验和感受： 2. 伪类我常用的举例： 如果在项目中要求需要很细很细的border怎么处理？ 这就需要用到伪类，因为border的最细的像素也是1px，它如果还不能满足你，就要这样实现： ：before{ content:''; dis 阅读全文