最近更新

CSS3第五课:rem、em、vh、vw等新增单位的用法

很早以前,大家都习惯用像素(px)这个单位来控制大小,但是随着响应式布局和跨平台跨设备的web应用的兴起,很多具有百分比性质的单位其实更灵活。浏览器都允许用户重新设置文字的大小,如图:但是很多网页在body的样式上直接写死了文字大小,比如为14px或者16px,这样用户修改浏览器的字号是没法改变网页...

CSS3第四课:伪元素选择器,::before和::after就是左膀右臂!

讲完了伪类选择器,还有一个兄弟叫伪元素的选择器也把它搞定吧。它们都有一个伪字,说明都是不存在的,但是它们也有区别:伪类是一种状态,伪对象是不真正存在于HTML文档中的标签对象,但是它是以html对象的方式虚拟出现,并且可以通过css控制的对象。在最新的CSS3标准中,把伪对象的格式改成了双冒号,即:...

CSS3第三课:伪类选择器,为什么有一个伪字?

拖了好久的教程终于等到授课结束了,便开始马不停蹄的准备更新~~~今年自学了很多关于UI类的内容,在审美上又有了一些提高,以后做的案例更美美哒!一、CSS3新增伪类选择器在CSS1版本的时候,几乎都是:hover的天下,在CSS2版本的时候,增加了:focus这个常用的,CSS3版本就增加了:nth-...

如何把codepen上面的代码嵌入个人网站中?

在大漠的网站中看到了codepen实时编辑代码和直接显示效果的方便,心动不已,这种方法可以解决我截gif动图展示案例效果的劳累历史。下定决心学起来。于是打算注册一个codepen账号,结果用QQ邮箱账号居然不行,百度一搜,原来是QQ邮箱太中国化了,接收不到某些国外网站的邮件。但是还有另一个方法,那就...

带缩略图的产品放大镜jquery插件

有学生要仿电商网站,需要一个带缩略图的产品放大镜的插件,我觉得这个还不错,推荐给大家。这个插件有好几种效果,但是在初始化插件的时候,把几种效果的初始化放在一个js文件里面了,所以我专门做了一个案例,提取了一个效果,可供大家参考。效果演示案例下载链接:https://pan.baidu.com/s/1...

仿腾讯专题页,实现3D旋转效果

仿腾讯专题页,实现3D旋转效果
这个专题页我挺喜欢的,就在上课的时候简单的仿制了一下,不过没有设置video和图片的切换,直接用了图片,算是阉割版了。下面的3D旋转使用了不同的方式,把图片也包括进去了,原始版本是只有边框旋转,图片不...

CSS3案例集12:响应式布局初体验!(更新移动端导航菜单)

CSS3案例集12:响应式布局初体验!(更新移动端导航菜单)
一个月的ps基础课程教学终于结束,网站也好久没有更新了,今天学生们准备项目汇报的作品,我忙里偷闲赶紧来更新一下。响应式布局几乎是现在网页设计的标配,能在不同的屏幕宽度下显示不同的效果,而不用准备不同的...

css3渐变文字动画和齿轮旋转动画

css3渐变文字动画和齿轮旋转动画
以前没发现background-clip还有一个-webkit-的私有属性:text,可以实现文字背景,结合渐变,可以实现很棒的文字背景无缝滚动。这里案例是很早以前就做的齿轮旋转动画案例,今天才放上来...

成都华信智原2018开年大促专题页

成都华信智原2018开年大促专题页
到了年终,忙的一塌糊涂,市场部做设计的被调去做画册了,于是领导让我帮帮忙,做一个活动的专题页,想着自己以前主要是码代码的,设计稿都是设计师直接给,要么就是仿站,自己还真没有啥特别的设计水平,可是领导交...

成都华信智原学生作品展模板

成都华信智原学生作品展模板
公司年终要弄学生的作品展架,门型展架,摆放在走廊的两方,让学生和老师都各自设计一套展架出来,我这个前端老师也没有幸免,谁让我在UI组呢。我从来没有设计过平面类的东西,但是想想,和网页设计应该差别不大吧...

华信智原UI1705班html+css结课作业展示!

华信智原UI1705班html+css结课作业展示!
一个半月的html+css的课程结束,上个星期进行了结课作品展示,我也为各位同学做一个总结吧。因为是UI班级,所以代码主要学习html语义化结构和css2、css3样式,jquery讲了插件的应用,大...

为什么看了无数教程,还是抠不好长头发丝,关键步骤没告诉你!

通道一直是ps初级课程里面一个相对较难的知识点,今天暂且不谈通道的具体原理,就讲一个抠长头发丝的小技巧。网上很多教程讲解抠长头发丝,都是利用通道来完成,但是为什么都是一样的步骤,你扣出来就是一团糟呢,关键的核心步骤好多教程都没有讲清楚。今天我举一个栗子。一、找一张长发飘舞的照片,质量要高,这是抠图的...
Top