摘要:
注:本文转自大神阮一峰,自己加了少许改动~ 上一篇文章介绍了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 阅读全文