随笔分类 - CSS
css技巧及常用块
摘要：参考来源：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling https://www.w3cways.com/1988.html -webkit-overflow-scrolling 用来控制元素在移
阅读全文
摘要：在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型，这样子写，在chrome浏览器上浏览，很好，显示出来。然后用iOS测试就无法显示。 遇到这个问题，我的解决思路是：既然在chrome浏览器可以显示，在iOS系统上有问题，那应该是不同
阅读全文
摘要：百度字体编辑器地址：http://fontstore.baidu.com/static/editor/index.html 使用手册：http://fontstore.baidu.com/static/editor/doc/index.html#introduce 为什么要编辑字体文件？ 只所以想要
阅读全文
摘要：一、什么是字体图标 icon font 及使用场景 从百度百科一下什么事icon font，没有解析。那就用在使用过程的对字体图标的理解，解释一下。 字体图标就是利用字体来显示网页中的的纯色图标，或者是特殊字体。举个栗子，如下图 这张图的三个小icon，都是使用字体图标的，如果不是使用字体图标，可能
阅读全文
摘要：起因： 有这么一个需求，标题栏内容多，你懂的，移动端显示有限，所以就使用滑动的方式展现内容咯，不愿意使用iscoll等插件，那好吧，就使用我们浏览器自带的滚动咯。 开始咯，设置父元素固定的width，设置overflow-y:hidden，然后子元素flex弹性盒模型布局，这样就就一排撑开了，优雅的
阅读全文
摘要：背景： 事情的起因是这般的，平时工作是在线上办公，样式是使用less来写，于是乎，这样我从线上download下来的less文件无法直接在自己的本地环境运行。有一个问题就是我要把less文件先编译成css文件，这样我才能在文件引入使用。对了，那我为什么不从线上拿通过前端构建工具打包编译好的css文件
阅读全文
摘要：网站上经常会使用一些三角形，除了图片的方式，实际上利用border我们可以做出纯CSS的三角形。我们知道border是个边都可以单独设置，当四个边相交的时候他们是什么时候改变的？ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charse
阅读全文
摘要：<ul> <li> <img src="../../saasdist_v2/images/staff-img.png" alt=""> <span>cindywu</span> <i class="js-staff-d icon-staff-d"></i> </li> <li> <img src="
阅读全文
摘要：一、语法 transition: property duration timing-function delay; 值描述 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transitio
阅读全文
摘要：参考blog来自http://segmentfault.com/q/1010000000671971chrome浏览器当表单自动填充时，怎么去除浏览器自动添加的默认样式。一、发现该问题的原因-是在写账号登录页面时，input表单添加了背景图片，当自动填充，搓搓的一坨淡黄色背景出来。这个原因是我草率的...
阅读全文
摘要：文件正在上传的转圈圈gif图片一、文件上传时，未上传返回成功状态之前给个gif动态图片显示在页面，改善用户体验。1 2 3 4 5 文件正在上传，请稍后...6 7 我习惯这样写，把遮罩层和内容层放在两个div中。遮罩层有两个用途，...
阅读全文
摘要：首先，“回到顶部”、“用户反馈”这两个按钮是通过定位放在左下角上。（1）“回到顶部”的按钮只有当滚动条有出现下滑时才出现（2）“用户反馈”按钮，用户刚打开时会抖动一下，引起用户的注意，然后才定住。我的实现做法首先，这两个按钮我都使用定位的方式定位在右下角适合的位置上。然后，一、"回到顶部"1、因为如...
阅读全文
摘要：一、mask-div在原来页面弹出一个弹窗后，鼠标还是可以点击页面其他地方，所以我要给页面弹出一个遮罩层，把页面所有东西都遮住，不给用户点击除了弹窗之外的东西。实现后的效果：当我点击“添加”按钮时，会弹出两个层，一个是下面的遮罩层（一个我们看到的黑色半透明的遮住全屏幕的div），另一个就是我们要填写...
阅读全文
摘要：一、问题当有时不浮动的父元素装载着浮动的子元素时，这个时候父元素的高度不会跟着的子元素的内容高度而自适应高度变大。比如截图的第一行图，上面一条黑色的粗线，就是父div的边框（为了看效果，我设置了父div的border：5px。左右两边是各浮动一个div）。于是乎，我想解决这个父元素高度不会跟随着子元...
阅读全文
摘要：一、问题这里部分的组成是一个input框和一个a按钮，然后a标签为了设置它的width和height我让他display:inline-block（行内元素以块级元素显示内容）。神奇的一幕出现了，两者之间出现了间隙。上图是已经处理完间隙问题的。 添加收件人 二、原因元素间留白间距出...
阅读全文
摘要：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习前端基础更是大有裨益。 而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，...
阅读全文
摘要：/*样式表文件来自 懒人css http://lrcss.lrjz100.com *//*---------重置---------*/html{font-size: 100%;-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; *ove...
阅读全文
摘要：1、p~ulp和ul有相同的父元素，选择出p元素之后的所有ul元素，其中，p和ul不一定是紧随，但是必须有相同的父元素E+F 相邻兄弟选择器。选择匹配F的元素，且该元素位于所匹配元素E的后面相邻的位置E>F子包含选择器。F为子元素，E为F的父元素之前很少用到这三种选择器，不过适当使用，真的方便不少。...
阅读全文
摘要：http://blog.csdn.net/chen_zw/article/details/8713205块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;...
阅读全文
摘要：一、把小图放在一张大图中，先排版好。上几张图看看，就比如这个：谷歌：淘宝：土豆右下角悬浮框：1、把用到的小图都放到了一张大图里，其中的小图之间的排版是有点规律的，比如说淘宝那张，类似的小图放置成同一列，这样就计算小图显示位置的时候，只要知道第一个小图的位置，同一列的小图，left（X坐标）一样，只需...
阅读全文
浙公网安备 33010602011771号