css
文章平均质量分 60
kaikai4
这个作者很懒,什么都没留下…
展开
-
35个让人惊讶的 CSS3 动画效果演示
本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力。CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择。如今,用纯 CSS 就可以实现各种各样很酷的效果,甚至是动画。转载 2015-03-28 09:39:24 · 560 阅读 · 0 评论 -
一些前端网站
主要是一些特效插件:http://www.dowebok.com/最新技术视频网站:http://www.hubwiz.com/coursecenter开源项目网站:http://www.bootcdn.cn/17素材网:http://www.bootcdn.cn/前端优化网站:http://isux.tencent.com/jquery插件特效网站:http://www.jq转载 2016-01-11 15:12:35 · 617 阅读 · 0 评论 -
CSS样式随笔总结
1.设置文字垂直居中:设line-height与height相同。2.显示table边框,设table的td为:border:1px solid 颜色。3.设置table的边框间的距离为0,设table的样式为:border-collapse:collapse。4.设置网页版权信息:用符号© 要用字体:font-family:arial;5.用中文字体时,转载 2016-01-11 16:34:24 · 371 阅读 · 0 评论 -
移动工作中需要注意的东西
1. 添加到主屏后的标题(IOS)[/b] 2. 启用 WebApp 全屏模式(IOS) 3. 百度禁止转码通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:4. 设置状态栏的背景颜色(IOS)设置状态栏的背景颜色,只有在 "apple-mobile-web-app-c转载 2016-01-11 16:37:09 · 455 阅读 · 0 评论 -
css笔记重点
1、去除button点击出现蓝框:outline:none;2、chrome表单自动填充去掉input黄色背景解决方案:input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}3,图片满屏居中:外层样式:width:1920px;left:50%;margin-left:-960px;text转载 2016-01-11 16:46:22 · 257 阅读 · 0 评论 -
如何去除移动端链接a标签产生带色边框
还记得刚到公司第一次写移动端WEB页的时候,测试时发现点连接的a标签点击时会有一个很丑的边框出现,很是影响页面美观;小狂我用尽各种办法,最后终于解决了这个问题。样式代码如下a{border:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;outli转载 2016-01-11 16:48:21 · 3608 阅读 · 0 评论 -
meta标签详解
备注:以下教程部分资料来自w3c以及网络.meta为标签head中的子标签,包括content(必选,存储值)、name(键名)、http-equiv(键名)、scheme(content格式)四个属性。其中content属性为标记的具体值,必填值;name为把值关联到某个名称,http-equiv是把值关联到http头部;scheme是规定了content 的文本格式。一转载 2016-01-11 16:49:36 · 323 阅读 · 0 评论 -
兼容各浏览器的强制换行,不论中英文。。。。单词,长串等
最近用到列表展现,一长串一长串的json日志在界面,在ff等浏览器下,总是不换行,在word-break和word-wrap属性间怎么弄,都不行不行,后来加上white-space: pre-wrap;就哦了。white-space: pre-wrap;word-break: break-all;word-wrap: break-word;转载 2016-01-11 16:52:02 · 423 阅读 · 0 评论 -
rem Chrome bug:rem单位的字号在Chrome浏览器中过大
http://www.w3cfuns.com/notes/14585/c8028cdf6726f49a8cacc87f533e97f6转载 2016-01-11 16:57:31 · 2060 阅读 · 0 评论 -
IE7以下绝对定位的DIV被相对定位的DIV挡住问题
原因:在ie6下,不论绝对定位的z-index有多大,比如图中的div2,如果父层的div的z-index小于或者等于其它层的z-index,则div2会被其它的div覆盖住。解决办法:给父层(切记是与div2同级的父级)的div指定z-index原链接:http://www.w3cfuns.com/notes/18692/94a48912ac28f5322d554939ff589879转载 2016-01-11 17:16:47 · 357 阅读 · 0 评论 -
HTML5基本页面样式
;DOCTYPE标签没有结束标签。DOCTYPE 对大小写不敏感。-->--> <!-- 说明:强制让文档与设备的宽度保持 1:1 ; 文档最大的宽度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值); user-scalable 定义用户是否可以手动缩放( no 为不转载 2016-01-11 15:56:20 · 821 阅读 · 0 评论 -
详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性。Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小。总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自转载 2016-04-21 08:12:13 · 611 阅读 · 0 评论 -
CSS box-flex属性,然后弹性盒子模型简介
一、淡淡的开头语昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马,于是习惯性谷歌之,真是不谷不知道,一谷吓一跳。倒不是该属性本身,而是此属性作为导火索,让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样转载 2016-05-17 15:32:50 · 494 阅读 · 0 评论 -
纯干货!大前端必备网站-超全(上
01.前端这个圈子社区/组织W3C TPAC w3ctech WebReBuild HTML5研究小组 阿里技术嘉年华 京/沪JS 前端圈HTML5梦工场 无障碍联盟国内综合前端观察 阮一峰 W3CPLUS W3CFUNS 大前端 W3HELP W3SCHOOL HTML5中国 前端乱炖F2E社区 MDNNEW国内个人CSS森林 twinsen 艾文王 余果 张鑫旭 大猫 飘飘 米转载 2016-05-06 17:58:52 · 2743 阅读 · 0 评论 -
CSS 元素垂直居中的 6种方法
转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/2012年03月30日 ⁄ Web设计 ⁄ 评论数 1 ⁄ 被围观 306+利用CSS进行元素转载 2016-07-15 16:51:45 · 333 阅读 · 0 评论 -
微信端的alert
新出来个,尝试下https://github.com/t4t5/sweetalertqinxiaotong2015-06-25 22:17:40给你一个TAOBAO的,我用的是zepto,应该和jQuery兼容 msg.js:function compareVersion(v1, v2) { v1 = v1.toString()转载 2016-07-28 13:58:31 · 7794 阅读 · 0 评论 -
使用&#x3000;等空格实现最小成本中文对齐
摘要: 一、重见天日第二春 11年的时候,写了篇文章“web页面相关的一些常见可用字符介绍”,这篇文章里面藏了个好东西,就是使用一些空格实现个数不等的中文对齐或等宽。见下表: 字符以及HTML实体 描述以及说明 这是我们使用最多的空格,也就是按下space键产生的空格。一、重见天日第二春11年的时候,写了篇文章“web页面相关的一些常见可用字符转载 2017-06-27 11:14:07 · 810 阅读 · 0 评论 -
前端移动端页面开发
winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉1、关闭iOS键盘首字母自动大写2、禁止文本缩放html { -webkit-text-size-adjust: 100%;}3、移动端如何清除输入框内阴影在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:input,t转载 2016-01-07 15:36:31 · 704 阅读 · 0 评论 -
子元素浮动,父元素高度为0解决方法
在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:。例如: Some Content 此时预览此代码,我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动,而脱离了文档流,导致父元素的height为零。若将代码修改为:转载 2015-12-21 19:18:27 · 465 阅读 · 0 评论 -
meta 标签属性和自动跳转
name属性值的说明如下:name属性用于在网页中加入一些关于网页的描述信息name属性值如下:Keywords:告诉搜索引擎,这儿设置的是关键字,多个关键字用逗号隔开Descriptiong:对本页面的简单描述,搜索引擎会吧这些描述放在搜索引擎的结果下面。Robots:根据对应的content的值得到不同的结果。当content的值为index时告转载 2015-10-14 16:01:30 · 488 阅读 · 0 评论 -
网页动画的十二原则
CSS的Animation是一个很有意思,也是CSS中较为复杂也难设计的一部分。熟不知在Web的动画设计中有12个关键原则。在Animation 101将这十二原则剖析出来。今天特意转载@刘英滕翻译《Animation Principles for the Web》的中文。作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面转载 2015-03-31 10:17:15 · 469 阅读 · 0 评论 -
彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点1. IE无法调整那些使用px作为单位的字体大小;2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。 px像素(Pix转载 2015-05-20 09:11:37 · 405 阅读 · 0 评论 -
css3属性 -webkit-filter
-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有:grayscale 灰度 值为0-1之间的小数 sepia 褐色 值为0-1之间的小数saturate 饱和度 值为numhue-rotate 色相旋转 值为angle转载 2015-05-20 09:06:36 · 401 阅读 · 0 评论 -
CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://ajhcc.blogbus.com/logs/41836252.html 建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义。 在CSS中如何以图代字,找了一下CSS转载 2015-06-17 18:17:49 · 500 阅读 · 0 评论 -
-webkit-animation的使用
-webkit-animation:仍旧是一个复合属性,-webkit-animation: name duration timing-function delay iteration_count direction;包括以下几个属性(1) -webkit-animation-name 这个属性的使用必须结合@-webkit-keyframes一起使用eg:转载 2015-07-10 17:39:30 · 717 阅读 · 0 评论 -
经验分享:多屏复杂动画CSS技巧三则
当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画。并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动:感谢shirley帮忙录制上面的视频,虽然视频内容是手机上的显示效果,但是,这个“企业新年祝福活动”原本只针对桌面端,移动端是后来辅助增强(增加了相当于活动页面UV 5.7%的点击)。而目前大多转载 2015-07-27 09:32:38 · 417 阅读 · 0 评论 -
给你的网页添加动画效果
当我们使用CSS3动画时,我们经常讨论如何使用过渡,动画等实战方法。然而动画的强大之处不是集中在单个动画是如何工作的,而是多个动画结合起来,创造出令人震撼的效果。良好的动画设计可以使我们的作品脱颖而出。Disney的 动画的12个基本原则 定义“感染力”为“一个演员的迷人之处。” 它是描述如何使用虚实,风格,和动画的物质叠加起来创建生动的角色,使得观众觉得真实而有趣。《动画的12个转载 2015-07-21 10:49:24 · 2271 阅读 · 0 评论 -
CSS3创建加载动画效果
加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站。创建加载效果所需的CSS3知识在我们开始创建加载动画之前,我们得先了解一些CSS3的属性来帮助我们创建这些效果。伪元素 :before :after伪元素对于制作CSS3加载动画是非常有用转载 2015-07-21 11:06:10 · 1504 阅读 · 0 评论 -
响应式布局
/* xs up */@media only screen {}/* small up */@media only screen and (min-width: 40.063em){}/* medium up */@media only screen and (min-width: 64.063em){}/* large up */@media转载 2015-07-21 10:41:26 · 285 阅读 · 0 评论 -
详解CSS3特性@Media如何实现响应式设计
2013年响应式设计已经成为国外网站的一项标配功能,国内越来越多的开发人员开始关注响应式设计,2014年相信国内更多的网站也将使用响应式设计,因为利用CSS3特性@media将很简单就能实现响应式设计,一次开发同时能在手机,平板,PC桌面等不同分辨率的设备下拥有较好的浏览体验。在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的特性@medi转载 2015-09-09 15:04:42 · 524 阅读 · 0 评论 -
css与javascript跨浏览器兼容性总结
本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题。分享给大家供大家参考。具体总结如下:一、CSS样式兼容性1. FLOAT闭合(clearing float)网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住转载 2015-09-10 16:27:14 · 352 阅读 · 0 评论 -
30款高质量的HTML5和CSS3响应式模板
编者按:想建站的同学注意咯,今天分享一组高质量的网站模板,全都是响应式的,风格多样,从个人网站到作品展示网站,应有尽有,现在还是免费的呦,心动的童鞋就不要犹豫了,赶紧存下来!教你另辟蹊径将扁平化网站玩得出彩! 《不走寻常路!如何利用基础形状玩出新花样?》1. Notify2. Squadfree3. Sublime转载 2015-09-10 17:03:21 · 731 阅读 · 0 评论 -
CSS3变形属性:CSS33DTransform
三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数:3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数;3D旋转:CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数转载 2015-09-06 10:05:34 · 826 阅读 · 0 评论 -
7个免费的Linux FTP客户端工具
在Dropbox、YouSendIt、idrive以及许多这样云存储和共享工具的帮助下,我们在互联网上发送和共享大型文件变得容易起来。所有这些网站都可以帮助你在互联网上传送文件,但如果你要分享庞大的数据,这依然是很复杂的事情。所以,你需要装配FTP服务器,它能让你轻松地共享这些文件。FTP服务器支持文件传输协议,这是互联网交换程序和数据文件的标准。基本上讲FTP站点是提供文件下载的转载 2015-09-10 17:47:38 · 6661 阅读 · 0 评论 -
HTML各个标签的默认样式
HTML各个标签的默认样式HTML5学堂:网页的结构是由许许多多的标签组成,标签可以分为块、行、第三类,它们在浏览器的默认样式是什么呢?本文给大家讲解的是HTML的各个标签默认样式有哪些。标签存在着一些默认样式,以下主要给大家列出了他们默认的样式,供大家学习参考。标签:html, body, article, aside, footer, header, hgroup, main, n转载 2015-09-30 15:34:01 · 2967 阅读 · 0 评论 -
你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。Creative Button Styles转载 2015-09-23 14:48:00 · 400 阅读 · 0 评论 -
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:[css] view plain copy.Absolute-Center { margin: auto;转载 2017-09-27 14:25:08 · 323 阅读 · 0 评论