CSS创建三角形(小三角)的几种方法
admin 2013-10-24 130浏览 评论
你可以在很多地方看到三角形(小三角):tooltips提示框、下拉菜单、甚至在loading载入动画里。不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的。 有一些不同的方法来设计并制作一个三角形,在本文中,我将介绍: 点此查看实例展示 编...
admin 2013-10-24 130浏览 评论
你可以在很多地方看到三角形(小三角):tooltips提示框、下拉菜单、甚至在loading载入动画里。不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的。 有一些不同的方法来设计并制作一个三角形,在本文中,我将介绍: 点此查看实例展示 编...
admin 2013-10-24 103浏览 评论
上上篇文章我们知道了Google的Chrome浏览器更换新的LOGO,个人感觉很不错,简洁大方,又能表达Chrome快速的含义,所以打算用CSS3写一个Chrome LOGO Tips: 喜欢研究的同学可以用浏览器的开发工具看下源码!!! 点此查看实例展示 如果你用的是Chrome,恭喜你...
admin 2013-10-24 99浏览 评论
随着HTML5的深入人心,其越来越多的新功能为更多Coder所用,HTML5新增了不少人性化标签和属性,马上介绍的就是新的表单属性。 实例图片: 代码如下: input type = "text" placeholder = "输入 回车搜索" autofocus x-webkit-speech 很赞?Yes! 简短的几个...
admin 2013-10-24 195浏览 评论
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“ :nth-child ”。 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips: 还用低版本的IE浏览器的哥们请绕过! :nth-child(2...
admin 2013-10-24 115浏览 评论
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。 1、多个背景图片 在css3里面,你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法,但引用图片之间需用“,...
admin 2013-10-24 196浏览 评论
前几天一 @同事 看新浪微博里有个类似分隔线的提示,就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法。 单个标签实现分隔线: 点此查看实...
admin 2013-10-24 120浏览 评论
关于css的重置代码有很多,也有不少人写过适合不同站点的重置代码,这里发个浩子平时使用的额方法。 代码如下: /* haozi / hao.chen@qq.com / 2011.06.15 */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,text...
admin 2013-10-24 191浏览 评论
虽然HTML5还是很新,没有被所有主要浏览器支持,但现在还是有许多设计师和开发人员使用。毫无疑问,几年下来,HTML5将对web开发起着很重要的作用。我注意到很多人都在使用它,但也有许多人还没有接触过HTML5。为了帮助学习这个任务,我们收集了7个有用的HTML...
admin 2013-10-24 182浏览 评论
很老的问题了,如今再次碰到,记录下来,给后来者方便! 众所周知,在Firefox下input type=button的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写了padding:0 2px所致); 按...
admin 2013-10-24 158浏览 评论
首先,请看右侧搜索位置,试试先!!(如果你用的是IE,悲剧了) 小小的动画,是css3实现的,很有爱,有木有!! 代码如下: .searchdemo {display:inline-block;position:relative;height:27px;margin:60px;}.searchdemo:hover {-webkit-box-shadow:0 0 3px...