前端设计
-
2014年度优秀个人博客评选活动
2014年即将结束,相信很多来此站的朋友都有自己的独立博客,本站欲做个小调查,在此收集个人独立博客网站, 评选出本年度优秀博客网站。无论你是使用了本站模板或是其他网站模板还是自己设计,均可参与评选活动!
2014-12-18 -
使用CSS3制作文字、图片倒影
CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safari和Opera浏览器下支持,但这并不影响我们来学习这个属性的应用。
2014-12-09 -
【分享】css3侧边栏导航不同方向划出效果
设定一组侧边栏导航菜单,然后可以从任何一边滑出。有两种实现方式,一种固定菜单,一种从左右两侧推出
2014-11-18 -
【分享】css3标签切换卡样式
今天我们想和大家分享几个选项卡样式。该集合包含了一些风格和现代的标签效应;从一个简单的盒子到SVG的形状。根据你的设计,不同的选项卡的布局和外观可以丰富您的网站
2014-09-11 -
【分享】css3圆环倒计时效果
分享一个css3设计的圆环倒计时的效果。以及详细的实现步骤分解说明,例如clip:rect遮罩,"transform:rotate"连续改变扇形旋转角度,加入渐变、阴影等修饰,及倒计时数字
2014-07-27 -
有创意的鼠标悬停效果集锦
分享一些用css3技术,三维、伪元素实现一些有创意的悬停效果
2014-06-28 -
IE6到底哪里不好?你还继续用IE6吗?
初接触网页设计,IE6是检查代码严谨性的一个很好的工具,虽然,曾经无数的抱怨、甚至憎恨。但是只要100个用户群里面有一位用户在使用IE6,你就不得不做好兼容。因为我们就是设计师。
2014-05-26 -
网页常用的js实例汇总
简易选项卡、IE6使png图片背景透明的方法、文字或图片向上向左无缝滚动、javascript显示年月日时间代码
2014-05-22 -
简易选项卡
简易选项卡
2014-05-22 -
IE6使png图片背景透明的方法
IE6使png图片背景透明的方法
2014-05-22 -
js实现文字、图片向上向左无缝滚动
无缝滚动代码在网页中也经常用到,例举两个常用的参考
2014-05-22 -
javascript显示年月日时间代码
常用js显示时间代码格式:北京时间:2014年05月22日星期四
2014-05-22 -
css技巧以及经验总结
1、如何清除图片下方出现几像素的空白间隙?2、如何让文本垂直对齐文本输入框?3、如何让单行文本在容器内垂直居中?4、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?
2014-05-14 -
IE常见bugs以及解决方案列表
1、如何解决IE6及更早浏览器浮动时产生双倍边距的BUG?2、如何解决IE6及更早浏览器下的3像素BUG?3、如何在IE6及更早浏览器下模拟min-height效果?4、如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时,li之间产生的空白间隙的BUG?
2014-05-14 -
关于响应式Web设计技巧以及入门
html5和css3流行至今,我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习,浅显的理解就是根据屏幕分辨率的大小,网站布局、图片、文字大小等相应改变。以后使用平板、手机浏览网站的用户会越来越多,对于前端设计师,学号用html5、css3做响应式网站是势在必行。
2014-05-12 -
响应式纵向时间轴
这是一个简单的响应时间轴,交替的颜色标签,以及伸缩响应式的结构
2014-05-05 -
我的个人博客之——阿里云空间选择
之前服务器放在电信机房, 联通用户访问速度很不稳定,经常出现访问速度慢的问题,换到阿里云解决了之前的问题。很多人都问我的博客选得什么空间,一年的费用得多少钱,今天我列个表出来,供大家参考。
2014-01-18 -
鼠标悬停图片、文字css3效果
其实这样的效果也很常见,但是我平时用到很少,在其他网站看到这样的效果,第一反应就是查看源代码,看他怎么运用的,结果用了很多的div,最主要的是用js来实现。目前很多浏览器也都兼容css3新属性,这个例子就可以使用rgba(0,0,0,0.5)、opacity、当然关键也要看怎么定位,还是会用到position属性。
2014-01-14 -
从摄影作品中获取网页颜色搭配技巧
作为一个优秀、专业的网页设计师,首先要了解各种颜色的象征,以及不同类型网站常用的色彩搭配。色彩搭配看似复杂,但并不神秘。一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。
2014-01-09 -
css3简单的图标悬停效果
html5网站常用的css3属性有鼠标悬停在图标上的效果,可以实现一些旋转、伸缩、移动等视觉上的动画效果,以提高用户的体验效果,下面我们就分享一些简单的图标悬停效果给大家。对于图标,我们使用的是图标字体icofont。
2014-01-03 -
我们可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。
2013-11-04
-
101个实用性网站你知道多少?
资料整理来自网友君子健兮01. yangqq.com —— 一个站在web前端设计之路的女技术员个人博客网站,提供免费源码下载。02. bounceapp.com —— 能够将一
2013-09-30 -
HTML5技术将推动移动浏览器变革
TML5大潮已经袭来,这项技术对移动互联网的发展将起到非常大的驱动作用。在网络条件日渐成熟的今天,横跨智能手机、平板电脑以及PC终端的HTML5有其无可替代的优势。业内人士分析称,HTML5将为移动互联网带来技术革命,推动移动浏览器变革。
2013-09-17 -
css3制作的一个魔方
本应用由CSS3代码实现,无图片和flash,请使用Chrome等webkit内核浏览器或Firefox打开。破解攻略和大家分享下:首先,破解魔方,我们就要先了解它的结构,魔方共6色6面,每面又分为中央块(最中间的块6个)、角块(4角的块8个)和边块(4条边中间的块12个)...
2013-09-05 -
css3创建导航链接效果
分享一些常用和创意的导航链接效果。例子中鼠标悬停使用伪元素和动画来创建一个微妙和有现代节奏感的链接效果。注意,伪元素并不是在所有的浏览器都能兼容。使用Chrome和Firefox浏览器观看,效果最佳。
2013-08-22 -
css3制作3D图书翻页效果
景深设置,可以让3D效果更加逼真,perspective定义属性后,子元素会获得透视效果,而不是元素本身,transform-style:preserve-3d保留3D位置。关于CSS3 perspective 更多属性以及教程,请参考W3School网站教程
2013-08-21 -
使用css3伪元素制作时间轴并且实现鼠标选中高亮效果
利用css来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类1):before 在元素之前添加内容。2):after在元素之后添加内容。提示:亦可写成 :before :after CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符,但以前的写法仍然有效。
2013-08-19 -
li列表在网页中常见应用例举(二)
li列表加时间,li列表背景图片的应用,li标签里面的span应该放在前面,如果放在后面IE浏览器较低版本会出现错位
2013-08-10 -
li列表在网页中常见应用例举(一)
li在网页中的应用,list-style-type,设置或检索对象的列表项所使用的预设标记。list-style-image:属性使用图像来替换列表项的标记,li列表前面用图片来展示.注意:ol对象和ul对象的type特性为其后的所有列表项目(如li对象)指明列表属性。
2013-08-10 -
html css 十一条网页设计经典实用的代码片段
这十一条网页设计经典实用的代码片段,在网站的应用中都比较广泛。方便快速的查阅以及建设一个新的页面,非常适合刚接触的web前端设计。包括设置一些字体、站点链接、IE6bug的处理,导航菜单以及高亮显示菜单,还有表单的一些设计...
2013-08-03 -
CSS3文本(六)—word-wrap自动换行
word-wrap检索或设置对象中的单词之间间隔。在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分word-wrap:normal允许内容顶开或溢出指定的容器边界。word-wrap:break-word内容将在边界内换行.
2013-08-02 -
CSS3文本(五)—text-stroke文字描边
text-stroke设置或检索对象中的文字的描边。目前只有Chrome13.0、safari5.1能支持,text-stroke-width 设置或检索对象中的文字的描边厚度,text-stroke-color 设置或检索对象中的文字的描边颜色
2013-08-02 -
CSS3文本(四)—text-fill-color文字填充颜色
text-fill-color说明:检索或设置对象中的文字填充颜色。通过text-fill-color属性,可以做出一些例如渐变文字和镂空文字的效果兼容:目前只有Chrome13.0、safari5.1能支持
2013-08-02 -
CSS3文本(三)—text-shadow设置文本阴影
在 CSS3 中,text-shadow 可向文本应用阴影。您能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色
2013-08-02 -
CSS3文本(二)—text-transform文本大小写转换
text-transform文本大小写转换text-transform:none | capitalize | uppercase | lowercase,text-transform:capitalize将每个单词的第一个字母转换成大写;text-transform:capitalize 将每个单词的第一个字母转换成大写
2013-08-02
-
CSS3文本(一)—text-overflow文本溢出
text-overflow,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。语法:text-overflow: clip(默认值)| ellipsis ;clip:修剪文本 ellipsis:显示省略符号来代表被修剪的文本。
2013-08-02 -
css3背景(七)—background-size
background-size检索或设置对象的背景图像的尺寸大小。background-size在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
2013-08-02 -
css3背景(六)—background-clip
background-clip用来制作文字的遮罩效果还是不错的,目前只有Safari 和Chrome浏览器支持该属性。background-clip说明:background-clip 指定对象的背景图像向外裁剪的区域。1)padding-box:从padding区域(不含padding)开始向外裁剪背景。
2013-08-01 -
css3背景(五)—background-origin
background-origin说明:background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。1)padding-box:从padding区域(含padding)开始显示背景图像。
2013-08-01 -
css3背景(四)—background-position
background-position 属性说明:设置或检索对象的背景图像位置。必须先指定background-image属性。默认值:0% 0%,效果等同于left top该属性提供2个参数值。
2013-08-01 -
css3背景(三)—background-attachment
background-attachment fixed:背景图像相对于窗体固定。scroll:背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。local:背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)
2013-08-01 -
css3背景(二)—background-repeat
background-repeat设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性.允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。如果只提供1个参数,则用于横向和纵向。
2013-08-01 -
css3背景(一)背景图片、颜色渐变、多重背景图
background-image:设置或检索对象的背景图像background-repeat:设置或检索对象的背景图像如何铺排填充background-attachment:设置或检索对象的背景图像是随对象内容滚动
2013-08-01 -
css3边框(圆角、阴影、图片)的实现
现在大部分的浏览器都支持新的css3功能了,所以,以前用图片来实现css3边框圆角和css3边框阴影的实现的,都可以换成css3简单的代码了。IE不支持border-image边框图片属性的设置...
2013-07-31 -
Fieldset教你如何绘制带标题的表单框
一朋友问我像这样的表单样式是怎么实现的,我看到图,第一眼的印象应该是用图片来实现的,或者是用postion来定位实现的。本例演示如何在数据周围绘制一个带标题的框。
2013-07-31 -
如果要学习web前端开发,需要学习什么?
遇到很多新手,都会问,如果要学习web前端开发,需要学习什么?难不难?多久能入门?怎么能快速建一个网站?工资能拿到多少?还有些让我推荐一些培训机构什么的要去学习。我建议是自学,实在是觉得自己没有这个能力,确实是需要一个老师的话,那你还是自己做主找个老师吧!
2013-07-28 -
css3 transform 常用属性详解
css3 transform 常用属性详解,transform的意思是变换,改变,转化css3 transform的常用属性:rotate() 旋转、scale() 缩放、translate() 基于X和Y坐标重新定位元素、Skew() 倾斜、matrix() 支持矩阵变换,基于X、Y坐标重新定位元素.
2013-07-27 -
CSS简明教程(三)——css样式高级技巧
用div元素为网页在编写样式表时,我们经常要用div元素来包装内容:个div元素就是一个自然的容器,可以给它添加边框、边距和不同的背景颜色(或者背景图片)从而让它在页面中更加显眼。
2013-07-24 -
CSS简明教程(二)——样式表解析
一个样式表就是一个文本文件,在web服务器上通常与html页面放在一起。样式表中包含若干样式规则,规则的先后顺序不重要。每条样式规则会为一个或者多个html元素指定一个或者
2013-07-24 -
CSS简明教程(一)——如何在网页中添加样式
没有css也就是层叠样式表,就没有现代的Web设计。即便是格式极为丰富、构图极为复杂的网页,也可以通过css把格式化工作转移到一个外部文件——样式表里。这样一来,网页标记就可以非常清晰易读。
2013-07-24 -
悬浮右侧可展开搜索的客服代码
在线客服代码 悬浮右侧可展开搜索的客服代码
2013-07-19 -
使用css3新属性制作一个3d的丝带效果
3D CSS丝带使用的是css3的新属性就能实现这样的3D效果,IE浏览器还不兼容,推荐使用chrome浏览效果更好
2013-07-18 -
鼠标放上去按钮高亮显示css3
鼠标放上去按钮高亮显示并且有文字提示,其他按钮则变暗。这个例子设置了opacity透明度的一个过渡的变化。
2013-07-18 -
CSS3 Animation 实现对象从右到左渐变的css3动画效果
CSS3中的Animation与HTML5中的Canvas绘制动画不同。Animation只应用在页面上已存在的DOM元素上,而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样,因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码。
2013-07-16 -
CSS3 伪类选择器 nth-child() 的用法
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等,不过,目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。
2013-07-15
-
html5 css3 web标准基础教程入门
就目前而言,html5是html标准的最新最好的版本。学习html5+css3来制作网站,简单地说,div就是框架,是web网页的框架结构,你甚至可以把网页想象成多个框架的组合。css为页面提供布局和格式,作为web标准,css3已经像html一样,成为了制作网页或者开发web应用不可或缺的一部分。
2013-07-10 -
学习Html5建站教程(一)Html5简介
Html5中的数字5表示这个标准是html的后续版本(在xhtml之前,html的版本号是4.01)。当然这个解释也不完全正确,因为在htnl5支持自html4.01发布以来的十年间出现在网页中的所有新东西,包括严格的xhtml风格的与法和大量的JavaScript创新。但不管怎么说,这个名字仍然很清楚的表明:html5虽然支持xhtml的规定,但它要求的则是html的规则。
2013-07-07 -
学习Html5建站教程(二)Html5 语法与规则
Html5 语法与规则,Html5不区分大小写,Html5 省略关闭空元素的斜杠;空元素,就是不会嵌套内容的元素,属性的语法规则,属性值中只要不包含(> = 或者空格)等受限的字符,就可以不用加引号。
2013-07-07 -
学习Html5建站教程(三)Html5博客页面设计之理论
Html5博客页面设计在做页面之前,我们应该先理解下面几个元素:header、footerDiv是当今web设计的必备元素,但div的问题在于,它本身不反映与页面相关的任何信息。Html5改进了这种情况,可以把div替换成更具有描述性的语义元素。Article这个元素,表示一篇任何形式的文章,类似新闻报道、论坛帖子、博客文章(不包括评论或者作者简介)等能够独立的内容区块。artile应该包含所有相关内容、包括标题、作者署名、以及文章正文。
2013-07-07 -
学习Html5建站教程(四)用HTML5做个人的网站
首先看演示网页然后分析网页结构,每个人的风格和习惯都有所不同,所以在写div布局跟css会有很多不同的方法。尽量做到不要使用太多的div布局,css也要合理使用css缩写规则来书写。延伸阅读:《Div+CSS 规则整理 以及注意问题》
2013-07-07