前端教程

首页>前端教程

网页设计中是如何计算网格系统的?

宽屏时代,1920px的画布,满足大屏幕显示器,可以通过背景的100%让屏幕填充完整。内容版心区域在960px-1350px之间,满足1024分辨率的显示器和1366分辨率的笔记本电脑用户。其实现在pc端都是宽屏时代了,所以pc端的网页几乎都是以1280或者1440分辨率为最低需求。可以通过百度的流...

学ps,你应该知道的《PS礼仪手册》!

好东西要分享!无意之间在美丫姐分享的文章中发现了《PS礼仪手册》,一眼就看出这是个好东西。很多人用了好几年ps,你看他的源文件的时候都要强忍一腔怒火,为什么呢,你看完这个手册再来回复:你中了几条?整个手册从文件管理、图层、图片、字体、特效、练习、测试、导出这些方面进行了统一的规范,规范可以让我们更高...

jquery插件推荐:Unslider超小的轮播,支持鼠标经过停止播放和响应式

图片轮播插件有很多,今天发现自己网站的幻灯片鼠标经过不能停止播放,还没有看清楚banner上的内容呢,就播放下一张图片了,很是郁闷。就想着能不能找一个鼠标经过停止播放的轮播插件呢,无意间发现站酷的轮播banner图就是可以停止的,然后翻了一下它的源码,发现了一个名字叫Unslider的js文件,百度...

导航栏页面跳转时,如何为当前页添加选中状态的样式?

当我们制作导航栏的时候,希望在当前页添加一个选中的状态,方便用户识别自己的当前位置。如图所示:完成这个效果有两种方法,一种是在a标签上添加current样式,一种是在li上面添加current样式,两种办法都可以。一、HTML结构<div class="divNavBar&...

jQuery插件推荐:fullpage强大的全屏滚轮效果,太强大!

全屏滚动结合css3动画,可以实现非常大气炫酷的效果,特别适合产品介绍、专题页等。推荐一个fullpage插件,功能强大,几乎可以包括所有全屏滚动的效果。动图效果如图:插件展示插件下载链接:http://pan.baidu.com/s/1mimNNZy 密码:1tf2主要功能有:支持鼠标滚动支持前进...

jQuery插件推荐:功能超全的图片灯箱效果,缩放、全屏、缩略图等都有!

用过很多lightbox和fancybox等图片灯箱效果,今天这款插件几乎包括你所有的想象,简直就是大而全的灯箱效果。特别适合用来做相册。效果图如下:插件演示插件下载链接:http://pan.baidu.com/s/1pLqf7cB 密码:484xlightGallery是一款轻量级、可定制、响应...

纯js实现单页面锚点之间页面滑动效果,可以设置偏移值哟!

网上很多页面滑动都是满屏滑动效果,但是有时候不需要满屏滑动,而是想滑动到哪里就滑动到哪里,可以自由设置滑动的位置,那么这个纯js脚本可以满足这个要求,关键是可以设置偏移值,太美好了。smooth-scroll.js是一款轻量级的纯JS页面锚链接平滑过渡插件。通过该锚链接插件,可以在点击页面的锚链接时...

从CSS Reset到Normalize.css

几年前为了重置样式,或者说为了让元素的浏览器默认样式不影响到页面的效果,我一般使用CSS Reset直接全部重置,当然,我是反对通配符*{margin:0;padding:0}这种写法的,但是CSS Reset全部归零了所有样式,后面有些样式又要自己贱兮兮的重新写回来,感觉也是做了无用功。直到发现了...

jQuery插件推荐:功能强大的水平垂直选项卡插件!

选项卡是非常实用的插件,同一个地方可以放好多不同的内容,通过切换选项实现对应容器的内容显示,其它内容隐藏,可谓是实现小空间大内容的神器。这里推荐一个拥有水平垂直两种方式的选项卡,功能强大,可以自己定制效果。默认的事件是鼠标点击,可以改成鼠标经过事件。动图效果:插件演示插件下载链接:http://pa...

jQuery插件推荐:简单实用的返回到顶部插件!

返回到顶部几乎是一个网站的标配,不过对于一个小型的网站来说,太过复杂花哨的插件反而不实用。这里推荐一个插件,随着滚动条滚动出现按钮,到了一定的页面深度后,透明度降低,页面滚动效果平滑,简单实用。动图效果:插件演示插件下载链接:http://pan.baidu.com/s/1bWnqwA 密码:0qf...

jQuery插件推荐:三种菜单导航显示和隐藏的插件,平滑好用!

有时候希望随着滚动条的滚动,实现导航菜单平滑的显示或者隐藏,这里推荐一个插件,可以实现三种菜单导航的显示和隐藏效果,实践用下来发现很棒,关键是运动非常平滑,可以实现三种不同的方式,几乎可以满足不同网站的需求。效果如图:插件演示   插件下载:链接:http://pan.baidu...

CSS3第二课:与家庭伦理有关的组合选择器

在CSS2时代,组合选择器中用的最多的是后代选择器,比如#nav li a等。因为这是CSS1版本就有的,IE6都毫无压力地支持。可是,在CSS2中新增的子元素选择器等,IE6就支持不友好了。不过,现在新版本的浏览器几乎都支持这些选择器了。一、组合选择器选择器举例含义版本element e...

CSS3第一课:被IE耽搁了的属性选择器

CSS2系列的教程已经更新完毕很久了,今天终于开始了CSS3系列教程的更新,貌似又是一个漫长的过程!还没有看完CSS2系列教程的童鞋麻烦先学习一遍哦,知识都是有体系的,基础没有打好,后面的内容会更吃力。既然是系列教程,那还是要按照体系来,先把最基础的选择器讲完。CSS3新增了很多很棒的选择器,其中属...

jquery插件推荐:有多种过渡效果的幻灯片vmc slider插件

网站设计中有一个常用的效果就是幻灯片图片展示,各种各样的插件中我推荐一个兼容性好的效果也棒呆的幻灯片。Vmc Slider 是一款带多种过渡特效的jQuery幻灯片插件,该幻灯片内置了20种场景转换特效,可以帮助你轻松实现漂亮的图片切换效果。并且它支持包括IE6在内的多种浏览器,非常的实用。效果演示...

设计时不知道用什么字体?那是因为你不懂字体的情感!

记得小时候,每天放学做完作业都要写几篇字帖,每次写完后拿给父亲检查。父亲写得一手好的钢笔和毛笔字,很多人看了,都说可以算半个书法家,可惜我自己在练字的道路上没有坚持下去。偶尔翻出父亲留下的一本很古老的字帖,仍然感叹怎么有人能写出那么漂亮的字体。不同的字体有不同的风骨,也体现出该字体独特的情感。如果我...

网页文字字体大小,在固定像素px和相对倍数em之间如何自由切换?附一个神器!

以前固定宽度布局的时候,几乎都是固定像素,宽度固定,间距固定,文字大小更是固定像素。可在流布局和响应式布局的催化下,固定宽度,固定大小的布局已经不能满足我们多元化的显示设备,pc端,平板端,手机端,各种尺寸的设备,如果都要重新做一个网页的话,我觉得那不是我们前端人的工作态度,毕竟学会如何偷懒是人的共...

UI学习第十课:蒙版,不破坏原始素材合成图像的武器!

很多新手感觉蒙版有点难于理解,其实,蒙版也是一种选区,可以让你选择性的看被蒙版挡住的对象。一、蒙版上面只有黑白灰非彩色被黑色挡住的对象完全看不见,被白色挡住的对象完全可见,被灰色挡住的对象,根据灰色的深浅呈现不同的般透明度。1、创建蒙版选择某个图层,点击蒙版按钮,默认产生一个白色的蒙版遮挡在图像上面...

UI学习第九课:图层样式,绝对的利器!

如果学习了矢量形状工具,绘制出线性图标也很漂亮的话,或者扁平风格的图标也很潮流,但是如果想获得真实拟物的图标,绝对离不开图层样式。图层样式用好了,可以打造出超级真实的图标。虽然拟物化的潮流已经过去好久,扁平风格正是铁板烧上的鱿鱼,热得发烫,不过轻拟物化的风格还是很受欢迎的。这是典型的拟物图标↓是不是...

UI学习第八课:矢量形状工具(附漂亮的线性图标源文件下载)

对于UI来说,在很大一部分时间被人认为是画图标的,虽然这种说话太局限性,但是也可以看出绘制图标对于UI的重要性。图标的绘制主要使用的工具就是矢量形状工具,当然包括钢笔工具以及基础形状工具。除了万能的钢笔工具之外,矢量形状工具主要指的是:矩形工具圆角矩形工具椭圆工具多边形工具直线工具自定形状工具这些工...

UI学习第七课:钢笔(附很棒的练习游戏网站)

钢笔工具比起其他选区工具和矢量绘图工具来说,具有一定的难度。钢笔可以绘制直线和曲线,尤其是绘制流畅的曲线。首先明白什么是贝塞尔曲线。在使用钢笔工具之前一定要打开“橡皮带”,可以预览曲线。1、曲线是由节点、方向线、方向点构成的。节点控制线段的位置和长短,方向线控制曲线的形状,方向点控制方向线的位置。2...
Top