前端技能 Google Fonts API @font-css

开篇之前,先来几个链接http://www.font-face.com/#google_announcement对于前端,强大不是一般般般的。先来看几个例子<html><head><linkrel="stylesheet"type="text/css"href="http://fonts.googleapis.com/css?family=Tangerine"><style>body{font-family:'Tangerine',serif;font-size:48px;}</style></head><body><div>Makingthe&n...

关于UI设计的几点意识

最近写前端,于是思考如何将前端写的更好,而且还能学到东西,于是可是了疯狂的搜索,结果发现了好多好玩的,新奇的东西1,走着走着就发现了一个奇迹起因是这样引起的,由于最近一直在用bootstrap,于是又去找他了,就找到了这个http://www.bootcss.com/,结果奇迹就一个一个的被我发现了,在这里我找到了”Bootstrap相关开源项目推荐“,你才怎么着,我跑到了这里http://www.w3cplus.com/,结果我好奇的看了里面一篇文章,结果奇迹有一个一个的出现了。2,一切的代码实现都可以这样的简单http://www.bootcss.com/p/bootstrap-form-builder/Bootstrap表单构造器http://www.bootcss.com/customize.htmlBootst...

学习下CSS选择器 奇偶匹配nth-child(even)

CSS3伪类选择器:nth-child()简单的归纳下nth-child()的几种用法。第一:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。(EG)li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/第二:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。(EG)li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/第三:nth-child(an+b)与:nth-child(an-b)先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。...

结合bootstrap自定义table列表

使用bootstrap这个方便的webUI框架,方便了自己,少些了很多的代码,至少兼容性方面,我觉的我就不用操心了,呵呵。看看我自定义的table列表css代码:table.smoth{width:100%}table.smoththeadtr.captiontd.item{background-color:#E4E4E4;border:1pxsolid#ccc}table.smothtbodytr.listtd{border:1pxsolid#ccc}table.smothtbodytr.list:nth-child(odd)td{background-color:#fff}table.smothtbodytr.list:nth-child(even)td{background-color:#F2F2F2}html代码:<divclass="table"><tableclass='smoth'><thead><trclass='caption'><tdclass='item'>电视剧名称</td><tdclass='item'>上线日期</td><tdclass='item'&...

CSS中最合理ID/CLASS的命名规范

先看一个例子:.l-123f{color:red;}如果你第一次看到这个类名,你能在css文件立刻找到这个class吗?估计很难,因为这个类的名称只是某一个人能理解的符号再没有其他意义,所以这里没有一个准确的方法能够让你立即说出来。让我们来看下这个类名定义:.right-red{color:red;}你可能很明确的知道这个class选择符的所起的作用。但是这里还有个问题,当你在一星期的时间需要重新设计。在重新设计的时候,这个模块被放置到了左边,而且还是绿色。这个类就不再有存在的价值。所以现在不得不选择,要么改变所有的属性值,要么放着它不动,这可能导致混乱。最好不要在你的...

CSS3 Gradient 学习

CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3:Gradient─CSS3渐变。CSS3Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主...

CSS opacity 透明度 继承问题

元素透明的做法,大概如下#div.opacity{filter:alpha(opacity:80);opacity:0.8;}但是结果导致的问题是,里面所有的元素都开始透明了通过搜索,搜集资料,我发现了一个解决问题的方法HTML文件代码如下:<divclass='wellactivity-outer'><divclass='activity-opacity'></div><divclass='activity-inner'><h4>活动细则:</h4><divclass='detail'><pstyle='margin:0px;padding:0px;text-indent:1em'>1.手机拍摄黑龙江卫视乱世佳人照片并上传,选择上传到“天心恋”和“重心恋”其中一组</p><pstyle='margin:0px;padding:0px;text-indent:1em'>2.普通观众点击支持,看哪些照片(带黑龙江卫视台...