-
通过CSS将Input按钮变成普通文字效果
所属栏目:[专访] 日期:2018-09-07 热度:173
利用自己所学的CSS知识,今天我们来做一个看上去像文本的按钮吧。其实本身它还是一个Input,只是我们用CSS把它变为了文本,去掉了按钮原有的边框、颜色什么的,一切恢复如初了,通过本教程只是让CSS初学者学会CSS的使用,并不是让您去用这个按钮。 演示:[详细]
-
使用fieldset标签结合CSS Lable实现表单的布局
所属栏目:[专访] 日期:2018-09-07 热度:82
使用fieldset标签结合CSS的Lable标签实现表单的布局,以前听一些新手说,用CSS而布局表单真的有点难啊,其实是没找到方法,使用fieldset标签,再配合Lable可达到事半功倍的效果,而且布局出来的表单代码简洁、结构清淅,也便于修改,何不尝试一下呢? 演示[详细]
-
纯 CSS border 用法实例之四:三角形对角线
所属栏目:[专访] 日期:2018-09-07 热度:97
纯 CSS border 用法实例之四:三角形对角线,斜边都是依靠原来盒子的边,还有另外一种形式就是斜边在盒子的对角线上,保留其中一种颜色,就可以得到斜边在对角线上的三角形了,多个这样的三角形通过设置边框大孝颜色、拼凑起来可以形成任意形状的三角形。[详细]
-
纯 CSS border 用法举例之三:实现三角形图形
所属栏目:[专访] 日期:2018-09-07 热度:62
这是CSS Border 应用举例之三,实战一个三角形图形,其原理请参阅之前的两个小例子,再次变通一下就实现了这个三角形,思路是将其余三个的颜色设置为透明或设置成与背景色一样的颜色,只保留最上边一个三角形,当然了,如果想实现其它开口方向的三角形,其[详细]
-
纯 CSS border 用法举例之二:立体矩形
所属栏目:[专访] 日期:2018-09-07 热度:65
纯 CSS border 用法举例之二,生成立体的菱形效果,代码编写过程中要注意,依次设置设置overflow, font-size, line-height,因为, 虽然宽高度为0, 但在IE6下会具有默认的字体大小和行高, 导致盒子呈现被撑开的长矩形,因此要把字体和行高重新定义为0,避开[详细]
-
纯 CSS border 用法举例之一:空心菱形
所属栏目:[专访] 日期:2018-09-07 热度:168
CSS border 用法举例之一:空心菱形,这一个是最好理解的,只要设置div的边框颜色,然后设置宽度和高度就行了,不要被这复杂的图形吓怕啊,其实代码很简单。在以后还将有其它更神奇的效果。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transition[详细]
-
Css背景颜色渐变,纯CSS指定Div背景渐变显示
所属栏目:[专访] 日期:2018-09-07 热度:75
纯CSS指定Div背景渐变,烈火学院提示,仔细看清哦,这里绝非图片,但与图片背景的效果一模一样,而且用CSS直接生成,会提高浏览性能。原理是使用CSS中的Filter,具体用法请看代码,运用了CSS3中部分样式,目前兼容IE6,IE7, IE8 ,friefox,chreom浏览器[详细]
-
仿QQ面板分组展开收缩,JS+CSS实现的代码
所属栏目:[专访] 日期:2018-08-27 热度:177
CSS3、HTML5、 jQuery 等优秀WEB开发语言的到来,给我们带来的并非一般的体验,在体验新鲜的时候,烈火再给大家送上一个CSS+JS实现的特效,一款看上去类似QQ面板分组的效果,当我们的鼠标经过分组时,不用点击,分组自动展开,效果挺不错的,界面风格设计[详细]
-
纯Css绘制出逼真的扑克牌,附花色切换代码
所属栏目:[专访] 日期:2018-08-27 热度:124
文中使用纯CSS实现了扑克牌效果,这是来自国外大牛的作品?当您查看到该效果时肯定会以为是一张图片,可以当您右击的时候,却什么图片也没有,再查看源代码,也没有调用任何图片,顿时有点诧异,CSS果然很牛,或是作者水平比较牛?这也能用CSS来实现啊![详细]
-
js+css实现鼠标滑过触发行、列同时变色
所属栏目:[专访] 日期:2018-08-27 热度:115
以前,烈火介绍过表格隔行换色及鼠标经过变色的效果,本文的特效代码有所不同,在下面的例子中,并没有实现隔行换色,仅实现了鼠标响应表格行、列同时变色的效果,也就是说鼠标在表格上的变色区域是【十】字,至少是【Г】字,不多说了,大家自己看效果吧[详细]
-
XML+Css实现简单的网页走势图效果
所属栏目:[专访] 日期:2018-08-26 热度:70
关于网页中的动态走势图,我们一般看到的都是使用flash实现的,与本文中介绍的例子不太相同,本文中的效果是基于XML+Html技术实现的,在网页上显示简易的走势图(静态)。另外,边线对齐还有点小问题,本例仅供参考。 效果演示: !DOCTYPE HTML PUBLIC -//[详细]
-
兼容火狐浏览器的offsetX效果 js+css实现
所属栏目:[专访] 日期:2018-08-26 热度:107
兼容firefox的offsetX,计算鼠标位置(触发元素与窗口的距离,计算从触发到root间所有元素的offsetLeft值之和。 此类特效,我们用的不多,不过可以学习一下js与css的完美结合,在以后的网页制作过程中有很大帮助。 效果如下: htmlheadtitle兼容firefox的off[详细]
-
js+css实现点小图动态遮罩弹出大图特效
所属栏目:[专访] 日期:2018-08-26 热度:111
js+css实现点小图动态遮罩弹出大图特效 这是使用 Java Script与CSS共同实现的点小图弹大图效果代码,采用了比较流行的遮罩层效果,当点击小图后,动态弹出大图,同时实现了点击关闭功能,兼容IE6/7/8,火狐下表现也不错,代码中有注释,使用前请注意注释部[详细]
-
CSS+JS实现的滑动TAB,滑动门的特效代码
所属栏目:[专访] 日期:2018-08-26 热度:107
滑动TAB,滑动门,CSS+Js代码,貌似很不错的样子,风格经典,鼠标感应很不错,代码量少,用到网页上挺不错的。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://[详细]
-
CSS文章列表代码 DIV LI UL 的基本运用
所属栏目:[专访] 日期:2018-08-26 热度:116
本文介绍的不算是网页特效,而一款标准新闻文章列表的代码,代码使用了div ul li等标记,总体来说比较简洁,没有过多的修饰,如果你想使用的话,可以进行相关的修改。 重点学习如何使用UL/LI来布局列表,这也是CSS前端编程最常见常用的基本技巧,本列表符[详细]
-
js 滑动门,CSS 实现小箭头指向区域内容
所属栏目:[专访] 日期:2018-08-26 热度:175
CSS滑动门代码推荐:带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理。 点[详细]
-
js+css实现星号评分投票的实例代码
所属栏目:[专访] 日期:2018-08-26 热度:97
本文介绍的是使用CSS+JS制作的用于文章评论投票的星形示例,不要以为是用到了图片哦,其实这些星形完全是由CSS修饰出来的,无图片版,这样不影响网页加载的速度,而且修改也方便,只需调整颜色和大小就行了。 下面是实例演示: htmlheadtitle星形投票示例([详细]
-
纯CSS实现网页图标,RSS订阅图标的CSS3代码
所属栏目:[专访] 日期:2018-08-14 热度:134
网页图标对于站长们来说,是再熟悉不过的东西了,大家都知道那是图像,那么您有没有见过使用纯CSS生成的网页图标呢?今天烈火网就给大家发一款由CSS3技术实现的 RSS订阅 图标代码,注意哦在 IE9 以下浏览器兼容性不好。请使用IE9+、 Chrome 、火狐和 Opera[详细]
-
CSS色阶特效代码,注释丰富并兼容各大浏览器
所属栏目:[专访] 日期:2018-08-14 热度:114
在网上看到的CSS色阶特效代码,烈火小编看了一下,感觉有以下特点: 1、代码注释丰富,不管您是新手还是老鸟,都可以很快理解作者的代码。 2、兼容性强,从第一条就可以看出来了,释义中关于火狐、IE、 Chrome 、 Opera 等浏览器描写有很多。 3、纯CSS,无[详细]
-
文字倒影代码,倒映的文字,兼容IE9浏览器
所属栏目:[专访] 日期:2018-08-14 热度:141
又一款文字倒影代码,刚才介绍的倒影利用JS技术给倒影一个渐变的效果,与刚才介绍的不同,本文使用的是纯CSS,只是将文字反了一下,并没有渐变效果,兼容性做的非常好,思路新颖,并且在代码中使用了判断 IE9 浏览器的语句。 演示: !DOCTYPE htmlhtmlhead[详细]
-
CSS代码二例:边框阴影效果与DIV层垂直居中
所属栏目:[专访] 日期:2018-08-14 热度:131
CSS代码二例:边框阴影效果与DIV层垂直居中,在本代码中,实现的是CSS边框阴影(很多时候被勇于顶部banner框),及让框架内内容垂直居中。阴影效果做的不错,供新手参考学习,也欢迎提出整改方案。 示例: !DOCTYPE htmlhtmlheadmeta http-equiv=Content-Typ[详细]
-
CSS网页背景渐变代码,仅兼容chrome/Safari浏览器
所属栏目:[专访] 日期:2018-08-14 热度:61
明天就是大年三十了,年货一定都买齐了吧,首先祝您2012新年快乐!还记得6天前给大家分享的几款网页背景渐变特效吗?有只兼容IE浏览器的、只兼容火狐浏览器的、还有同时兼容IE和FireFox的,有的朋友肯定会说怎么没有谷歌chrome浏览器下的呢?您别着急,现[详细]
-
CSS3网页背景渐变代码,支持火狐和IE浏览器
所属栏目:[专访] 日期:2018-08-14 热度:117
前两篇分别介绍了IE下CSS3的网页背景渐变、火狐下CSS3的网页背景渐变代码,两款代码都不是完美的,因为他们分别支持IE和火狐,现在就来介绍既支持 Firefox 又支持IE的网页背景渐变代码,欢迎阅读。 示例: htmlheadstyle type=text/css rel=stylesheet.Ver[详细]
-
CSS3属性gradient实现FireFox网页背景渐变
所属栏目:[专访] 日期:2018-08-14 热度:184
刚刚给大家介绍了IE下CSS3属性gradient实现的网页背景渐变代码,很可惜的是它不支持firefox浏览器,本文再补上支持 火狐浏览器 的CSS3网页背景渐变,有的童鞋会说:烈火网,你就不能来一款既支持火狐,又支持IE的css3网页背景渐变吗?哈哈,您别着急,一篇[详细]
-
Css精美的滑动门布局:圆角、选项卡和Tips等
所属栏目:[专访] 日期:2018-08-14 热度:145
一组精美的CSS滑动门布局代码,在这个实例合集中,有多个效果,包括:圆角自适应按钮、导航/tab选项卡、tips小提示等,当然这些布局是不完整的,也就是说没有JS脚本来驱动它们,如果您打算使用,只能借用CSS部分,JS脚本需要自己添加哦。 示例: !DOCTYPE[详细]