随笔分类 -  HTML5+CSS3

1 2 下一页
CSS3 filter(滤镜) 属性 图片变黑色
摘要：img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);} Filter 函数 注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。 F 阅读全文
posted @ 2020-04-21 14:03 KSnow 阅读(3315) 评论(0) 推荐(0)
『html5、css3』将视频做为网页背景 超炫！
摘要：github项目地址：https://github.com/Ethan997/Video-background-page 想要实现这种效果很容易，只需要懂得H5的video， 按照我的步骤一步一步来就可以了~ 首先要制作我们的页面，用到的是html5的新标签video html : css样式也没有 阅读全文
posted @ 2020-01-08 13:48 KSnow 阅读(6133) 评论(0) 推荐(0)
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
摘要：在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。 一.旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作 阅读全文
posted @ 2018-06-05 14:29 KSnow 阅读(43670) 评论(0) 推荐(3)
html5/css3响应式布局介绍及设计流程
摘要：html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程，利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页，当你用不同的终端来查看这个 阅读全文
posted @ 2017-11-18 14:15 KSnow 阅读(5123) 评论(0) 推荐(0)
css3-rem
摘要：http://www.w3cplus.com/css3/define-font-size-with-css3-rem https://mp.weixin.qq.com/s/DpLXJhfCHsgrbgbuk25Ekw https://github.com/flashlizi/cssrem http: 阅读全文
posted @ 2017-08-31 15:37 KSnow 阅读(159) 评论(0) 推荐(0)
chrome二维码插件 – w3cways QR Code Generator
摘要：最近研究了下Chrome插件的制作方法，制作了一个二维码插件。 安装方法 方法一：在Chrome应用商店中安装（推荐）点击安装(需FQ) 方法二：本地安装：下载安装包，解压得到w3cways_qrCode.crx，打开Chrome扩展程序，把w3cways_qrCode.crx拖拽进去就可以了本地安 阅读全文
posted @ 2017-08-31 15:10 KSnow 阅读(306) 评论(0) 推荐(0)
CSS3 :target伪类实现Tab切换效果
摘要：CSS样式 HTML代码 阅读全文
posted @ 2017-05-22 15:18 KSnow 阅读(407) 评论(0) 推荐(0)
纯CSS制作的TAB选项卡
摘要：代码 这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。 关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。 HTML代码 CSS代码 阅读全文
posted @ 2017-05-22 14:56 KSnow 阅读(6813) 评论(1) 推荐(0)
边框阴影
摘要：1 2 3 4 5 drop-shadows 6 111 112 113 114 115 CSS drop-shadows without images 116 No extra markup, fluid, all modern browsers 117 118 ... 阅读全文
posted @ 2017-05-09 15:53 KSnow 阅读(204) 评论(0) 推荐(0)
css 边框
摘要：1 2 3 4 5 CSS3 边框 6 411 412 413 414 415 CSS3 边框圆角 416 417 418 419 420 421 ... 阅读全文
posted @ 2017-05-08 18:59 KSnow 阅读(242) 评论(0) 推荐(0)
html5移动端Meta设置
摘要：1. 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-sc 阅读全文
posted @ 2016-12-05 15:27 KSnow 阅读(20506) 评论(0) 推荐(1)
[转载]利用@media screen实现网页布局的自适应,@media screen and
摘要：开始研究响应式web设计，CSS3 Media Queries是入门。Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。那么，Media Queries是如何工作的？两种方 阅读全文
posted @ 2016-11-07 17:52 KSnow 阅读(289) 评论(0) 推荐(0)
纯CSS3制作学生入学档案表单样式代码
摘要：1 2 3 4 5 6 学生档案 7 59 60 61 62 63 学生档案 64 65 姓名: 66 67 68 ... 阅读全文
posted @ 2016-09-22 14:56 KSnow 阅读(1125) 评论(0) 推荐(0)
移动HTML 5前端性能优化指南
摘要：概述 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成首屏指标 基于第二点，首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB Mobile侧因手机配置原因，除加载外渲染速度也是优化重点 基于第五 阅读全文
posted @ 2016-07-14 16:11 KSnow 阅读(277) 评论(0) 推荐(0)
移动端meta 解释
摘要：移动端meta 解释 代表设备（电脑，平板，手机，tv，打印设备）name属性值： content属性值 : width: 把页面宽度设置为设备宽度，值可为数字或关键词 device-width； intial-scale: 页面首次被显示，是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任 阅读全文
posted @ 2016-07-14 15:18 KSnow 阅读(185) 评论(0) 推荐(0)
移动端网页开发经验总结 （不断更新ing）
摘要：http://www.w3cfuns.com/notes/17647/a372c4e4f363fcdde3722ea8d7e7fb79.html 阅读全文
posted @ 2016-07-14 11:54 KSnow 阅读(191) 评论(0) 推荐(0)
移动端开发注意事项（转载）
摘要：详细请看我的博客：http://www.haorooms.com/post/phone_web Xhtml和html5的区别：http://www.zhihu.com/question/20258628 一、关于meta （一）、常用的公共meta属性 1、viewport <metaname="v 阅读全文
posted @ 2016-07-14 11:40 KSnow 阅读(485) 评论(0) 推荐(0)
电脑上调试手机网站的几种方法
摘要：手机网站开发，最让人头疼的是网站的兼容问题，不同的手机可能会出现一些莫名的问题。手机网站常见问题及解决方案，我会在后面的文章陆续发表，大家可以看一下。 本文主要讲解电脑上如何调试手机网站： 一、安卓手机的调试： 1、最常见的安卓手机的调试方法是用chrome浏览器调节，既方便有简单。（chrome的 阅读全文
posted @ 2016-07-14 11:29 KSnow 阅读(3039) 评论(0) 推荐(0)
手机网站的几点注意
摘要：对于手机网站建设，总结了如下几点注意： 1、 安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的 阅读全文
posted @ 2016-07-14 11:03 KSnow 阅读(236) 评论(0) 推荐(0)
移动端资源集锦
摘要：99移动端知识集合：https://github.com/jtyjty99999/mobileTech 司徒正美移动端知识集合：https://github.com/RubyLouvre/mobileTech 优化移动体验的HTML5技巧：http://www.oschina.net/transla 阅读全文
posted @ 2016-06-21 16:55 KSnow 阅读(156) 评论(0) 推荐(0)

1 2 下一页