css
wandoumm
这个作者很懒,什么都没留下…
展开
-
50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上。它可以帮你很好地整理你的元素并让他们看起来蛮酷的。下面开始我们的内容,希望你会喜欢它。下面是我收集的CSS技巧,希望能帮助到你,感觉收藏吧。1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷?img.desaturate { filter: grayscale(100%); -webkit-filter: graysc...转载 2018-05-09 10:20:50 · 89 阅读 · 0 评论 -
CSS巧妙实现分隔线的几种方法
前几天一@同事看新浪微博里有个类似分隔线的提示,就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法。单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1p...转载 2018-05-09 10:09:26 · 967 阅读 · 0 评论 -
手机移动端WEB资源整合
meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略将页面中的数字识别为电话号码<meta name="format...转载 2018-05-09 10:17:44 · 203 阅读 · 0 评论 -
CSS居中的各种实现方式
CSS中如何完美做到居中,一直是令前端工程师头疼的问题。最近读到CSS-TRICKS中的一篇帖子,将居中问题的解决方案策略化。感觉收获很大,翻译过来供大家交流学习。当我们书写CSS时,让元素居中,是抱怨的爆发点之一:为什么会这么难?我认为问题的关键,不在于怎么做,而在于我们如何从诸多居中方法中选择出适应当前情景的。所以接下来,让我们一起创建一颗决策树,希望可以让居中变得简单。水平居中行内元素我们可...转载 2018-05-09 10:30:25 · 106 阅读 · 0 评论 -
基于REM的移动端自适应布局方案
背景现在工作中有超过一半的时间用于移动端项目的开发,包括app嵌入页,微信页面和移动wap页。开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布局的要求更高,不能像PC页面一样设计几个断点利用媒体查询,两边留空白就解决。移动端页面需要把屏幕空间都利用上,而移动设备的尺寸和分辨率多种多样,解决移动端页面的自适应布局问题是搭建新的移动端项目的重点和难点。经过研究,我在公司的多个移动端项目使用...转载 2018-05-16 09:22:11 · 510 阅读 · 0 评论 -
怎么画一条0.5px的边(更新)
理论上px的最小单位是1,但是会有几个特例,高清屏的显示就是一个特例。高清屏确实可以画0.5px,对比效果如下:如果我们直接设置0.5px,在不同的浏览器会有不同的表现,使用如下代码:<!DOCType html><html><head> <meta charset="utf-8"> <style> ....转载 2018-05-10 11:26:11 · 2830 阅读 · 0 评论 -
小技巧|CSS如何实现文字两端对齐
需求如下,红框所在的文字有四个字的、三个字的、两个字的,如果不两端对齐可以选择居中对齐,或者右对齐。但是如果要像下面这样两端对齐呢?我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度,三个字也可以,但是,像上图中“122账号”“122密码”这样的,就不好计算该用几个空格了。假如我们有如下HTML:1<div>这世间唯有梦想和好姑娘不可辜负!</div>给它加...转载 2018-05-10 10:00:20 · 9589 阅读 · 4 评论 -
移动端常见bug汇总
前言本文是摘录整理了移动端常见的一些bug以及解决方案,第一篇,后面还会有持续的文章更新整理。点击样式闪动Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color,这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。建议写在样式初始化...转载 2018-05-21 15:26:09 · 802 阅读 · 0 评论