随笔分类 - html css
摘要：注意：本文转载自 https://blog.csdn.net/vivian_jay/article/details/68933161 一、canvas绘图API canvas绘图函数drawImage() 它能做什么：1. 绘制图像：将加载的图像绘制到canvas上；2. 绘制画布：将画好的一个ca
阅读全文
摘要：阅读目录 适配的要求 适配的方法，3个步骤 适配中背景图片的处理 适配的原理解析 摘要：在进行移动端界面的书写的时候，如果把宽度高度或者字体大小全部写死的话，那么在所有手机上看到的大小都一样，存在的问题就是同样大小的字体，或者一个盒子模型， 在大屏幕手机上看起来会有点偏小。比如iphone6PLUS
阅读全文
摘要：最近做移动端的，在一块区域内绑定事件之后，在安卓上面没有任何问题，然而在iphone上却会出现闪屏，参考一些知名移动端的框架，例如bootstrap，在html和body标签上会添加上下面的这个csss属性： -webkit-tap-highlight-color: rgba(0,0,0,0);1添
阅读全文
摘要：在做文字背景剪切的时候用到 -webkit-background-clip: text，属性 效果图如下：
阅读全文
摘要：字体设置 iOS 4.0+ （iOS 9以下系统已经非常少） 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi。 iOS 9+ Safari开始支持 -apple-system 参数， Chrome 使用 BlinkMa
阅读全文
摘要：当最外面的层想要设置一个 overflow: hidden，但子元素又想他们能滚动，像今日头条的滚动导航一样： html： css： 这样写里面的子元素 scroll的宽度就可以随着li的增加减少而改变，在这里引用iscroll可以向右滑动
阅读全文
摘要：利用@media screen实现网页布局的自适应,@media screen and 分享到：27 开始研究响应式web设计，CSS3 Media Queries是入门。Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变
阅读全文
摘要：个人版QQ在线客服设置指导 为了确保会员能够顺利的与在线客服进行沟通，请大家按照以下提示完成对个人版QQ的设置。 如何将上图中的QQ图标的未启用状态更改为正常的QQ图标： 1.访问http://shang.qq.com/v3/widget.html，选择左侧导航中的“设置”标签，如下图 2.正常开启
阅读全文
摘要：对于火狐浏览器，需要字体所在服务器设置允许跨域访问。以Apache为例，先开启 headers 模块，再在字体的文件夹里放置一个 .htaccess 文件，里面的内容如下
阅读全文
摘要：热点图片区域制作（在线制作）：http://imagemap-generator.dariodomi.de/ 1、插入图片，并设置好图像的有关参数，且在<img>标记中设置参数usemap="#Map"，以表示对图像地图（Map）的引用； 2、用<map>标记设定图像地图的作用区域，并取名为：Map
阅读全文
摘要：CSS3的大多新属性(比如：圆角、阴影、渐变、文字阴影等)在FF、Chrome、Opera都还支持，但是IE 6-8是一点也不支持的，今天提供PIE.htc解决IE浏览器对CSS3属性的支持问题，让IE也能实现一些常见的CSS3效果，如圆角(border-radius)，盒阴影(box-shadow)，文字阴影(text-shadow) 背景渐变(gradient)，多图片背景(multiple background images)。一.htc文件下载地址：http://github.com/lojjic/PIE/downloads二. CSS文件测试代码CSS3属性（圆角、阴影、渐变、文字阴
阅读全文
摘要：vertical-align:10px; /*数字可以是正数也可以是负数*/例：垂直对齐方式
阅读全文
摘要：text-transform:capitalize; /*单词首字母大写*/text-transform:uppercase; /*全部大写*/text-transform:lowercase; /*全部小写*/显示效果：
阅读全文
摘要：text-decoration:underline; /*下划线*/text-decoration:overline; /*顶划线*/text-decoration:line-through; /*删除线*/text-decoration:blink; /*闪烁 此功能目前只有firefox支持*/text-decoration:underline line-through; /*文字不仅有下划线还有删除线；当同时有多个值时，中间用空格分开*/
阅读全文
摘要：<style type="text/css"> *{ text-align:center;} img{ filter:alpha(opacity=100, finishopacity=0,style=2); } #gradient{ width:300px; height:224px; position:absolute; top:0; left:350px; background:-webkit-gradient(radial,150 112, 120, 150 112, 40, from(rgba(255,255,255,1)),to(rgba(255,25
阅读全文
摘要：用CSS3实现文字渐变效果2011-06-23首先要说明，你的浏览器支持CSS3的话，才能看到正确的演示效果。如果你现在用的浏览器是Chrome、Safari等，就是你的浏览器支持background-clip + text-fill-color等CSS3属性，那么你可以看到下面文字渐变的漂亮效果：CSS（CSS代码中关键有用的其实就是最后三行）：<style type="text/css">.text-gradient { display: inline-block; color: green; font-size: 8em; font-family: 微软.
阅读全文
