随笔分类 -  css

CSS3多列Multi-column布局
摘要：columns 设置或检索对象的列数和每列的宽度。复合属性· columns：[ column-width ] || [ column-count ] .test{ width:628px; border:10px solid #000; -moz-columns:200px 3; -webkit- 阅读全文
posted @ 2017-03-30 09:14 Horan 阅读(864) 评论(0) 推荐(0)
CSS实现背景透明，文字不透明（兼容各浏览器）
摘要：在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外 阅读全文
posted @ 2017-02-15 10:00 Horan 阅读(2208) 评论(0) 推荐(0)
flexbox布局神器
摘要：前言 2009年，W3C提出了一种新的方案 Flexbox布局(弹性布局)，可以简便、完整、响应式地实现各种页面布局。Flex布局模型不同于块和内联模型布局，块和内联模型的布局计算依赖于块和内联的流方向。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 注：“Bootst 阅读全文
posted @ 2017-01-06 15:43 Horan 阅读(307) 评论(0) 推荐(0)
构建自适应的手机页面（转）
摘要：首先需要你对viewport有一个了解，建议看Apple官方文档，虽然啰嗦，但是啃一遍，基本该明白的就全明白了。 第一种方案 简便易行，适用情况： 网页设计仅针对手机屏幕，并且没有需要根据手机屏幕尺寸进行UI调整的内容，既没有媒体查询的CSS 产品层面可以不考虑非主流设备或浏览器的兼容性，例如黑莓的 阅读全文
posted @ 2016-12-22 14:38 Horan 阅读(464) 评论(0) 推荐(0)
移动web开发—页面头部 META 总结
摘要：meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 手机端特有的有哪些？ 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的 阅读全文
posted @ 2016-12-21 16:49 Horan 阅读(1591) 评论(0) 推荐(0)
css实现了hover显示title的效果
摘要：<div data-title="hello, world">hello...</div> <style> div { position: relative; } div:hover::after { content: attr(data-title); //取到data-title属性的值 dis 阅读全文
posted @ 2016-11-25 13:40 Horan 阅读(13889) 评论(0) 推荐(1)
纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
摘要： 阅读全文
posted @ 2016-11-25 13:32 Horan 阅读(537) 评论(0) 推荐(0)
Chrome 自动填充的表单是淡黄色的背景
摘要：Chrome 自动填充的表单是淡黄色的背景解决方案; input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; -webkit-text-fill-color: #333; } -webkit-box-shadow:是填充的背景颜色 -webkit-text-fill-color ：是文字颜色 ... 阅读全文
posted @ 2016-11-25 13:30 Horan 阅读(253) 评论(0) 推荐(0)
跨浏览器图像灰度(grayscale)解决方案
摘要：--> 阅读全文
posted @ 2016-11-25 13:18 Horan 阅读(1547) 评论(0) 推荐(0)