-
纯 CSS border 用法举例之三:实现三角形图形
所属栏目:[专访] 日期:2018-10-17 热度:75
这是CSS Border 应用举例之三,实战一个三角形图形,其原理请参阅之前的两个小例子,再次变通一下就实现了这个三角形,思路是将其余三个的颜色设置为透明或设置成与背景色一样的颜色,只保留最上边一个三角形,当然了,如果想实现其它开口方向的三角形,其[详细]
-
纯 CSS border 用法举例之二:立体矩形
所属栏目:[专访] 日期:2018-10-17 热度:140
纯 CSS border 用法举例之二,生成立体的菱形效果,代码编写过程中要注意,依次设置设置overflow, font-size, line-height,因为, 虽然宽高度为0, 但在IE6下会具有默认的字体大小和行高, 导致盒子呈现被撑开的长矩形,因此要把字体和行高重新定义为0,避开[详细]
-
纯 CSS border 用法举例之一:空心菱形
所属栏目:[专访] 日期:2018-10-17 热度:125
CSS border 用法举例之一:空心菱形,这一个是最好理解的,只要设置div的边框颜色,然后设置宽度和高度就行了,不要被这复杂的图形吓怕啊,其实代码很简单。在以后还将有其它更神奇的效果。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transition[详细]
-
Css背景颜色渐变,纯CSS指定Div背景渐变显示
所属栏目:[专访] 日期:2018-10-07 热度:72
纯CSS指定Div背景渐变,烈火学院提示,仔细看清哦,这里绝非图片,但与图片背景的效果一模一样,而且用CSS直接生成,会提高浏览性能。原理是使用CSS中的Filter,具体用法请看代码,运用了CSS3中部分样式,目前兼容IE6,IE7, IE8 ,friefox,chreom浏览器[详细]
-
CSS清除浮动代码:万能的float闭合
所属栏目:[专访] 日期:2018-09-13 热度:110
清除浮动,这在CSS3中有着重要的意义,在很多时候,如果不清除浮动,那么您的网页很可能在FF中会出错,在IE中也不会有好的表现,造成页面变形扭曲,绝非你想要的效果。今天向大家介绍一种简洁易用的方法,有浮动的时候,给需要闭合的DIV(class为clearfix[详细]
-
非常有趣! 纯 Css 完成一些小三角形代码
所属栏目:[专访] 日期:2018-09-13 热度:78
非常有趣! 纯 Css 完成一些小三角形代码,通过标题大家就可以看出来了,这是一个很简单但具有趣味性的代码,高手就不要看了,正在学习Css的朋友可以开拓一下视野。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org[详细]
-
Css 实现边框阴影及垂直居中效果代码
所属栏目:[专访] 日期:2018-09-13 热度:110
Css 实现边框阴影及垂直居中效果,让一个DIV框变成阴影的,没用任何的修饰图片哦,地地道道的CSS特效代码,另外那个居中代码也很实用,从事前端布局的朋友就会明白,居中我们经常会用到的。 演示代码: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transi[详细]
-
CSS背景图片居中代码,半透明显示文字
所属栏目:[专访] 日期:2018-09-13 热度:176
CSS控制图片实现始终居中显示,半透明显示文字,不管你如何拉大或缩小浏览器,它始终处于浏览器的中间位置,这是个十分实用的代码,很多时候我们都要用到此种情形的居中。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www[详细]
-
CSS 嵌套的DIV层的代码,关于定位的例子
所属栏目:[专访] 日期:2018-09-13 热度:117
CSS 嵌套的DIV层的代码,关于定位的例子,一个嵌套的DIV,用CSS定位知识实现,你可以此为例好好理解一下 absolute定位的用法。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d[详细]
-
左浮动、右浮动的对齐方法,CSS 代码
所属栏目:[专访] 日期:2018-09-13 热度:148
左浮动、右浮动的CSS对齐方法,两个CSS固定浮动的方框,一个左上对齐,一个右下对齐,随浏览器的大小始终不会变化,这里面用到了两个重要的CSS属性:一个是position,另一个是Left和Right属性。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transi[详细]
-
Css 结合图片修饰的圆角边框代码
所属栏目:[专访] 日期:2018-09-13 热度:154
CSS使用图片实现边框圆角,用两张图片作为背景,两张作为修饰,形成大圆角的效果,圆角的大小请根据自己的需要修改,修改过程中要对应修改CSS的代码,仅供参考。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/T[详细]
-
CSS 圆角边框,无图、纯 CSS 实现的代码
所属栏目:[专访] 日期:2018-09-13 热度:146
CSS 圆角边框,无图、纯 CSS 实现的代码。方法简单,不过有点繁琐,建立了很多的Div,CSS圆角还有些更为简便的方法,本款只作为您的参考,希望为您学习CSS开拓一些思路。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.[详细]
-
CSS美化Calendar日历的雏形,并无日历功能
所属栏目:[专访] 日期:2018-09-13 热度:185
CSS美化Calendar日历的雏形,并无日历功能,因为这个例子重点是介绍CSS,用CSS修饰一个日历的外表,没有加入真正的 Java Script日历代码。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-tr[详细]
-
Css中inline的用法:按钮和文本框Input水平
所属栏目:[专访] 日期:2018-09-13 热度:133
本例是Css中inline的用法,我们在日常的网页制作中,可能遇到这样的问题,按钮和文本框不在同一水平线上,这个要怎么解决呢?本文就是解决案例,用到了,CSS的语法:display:inline,如果你对CSS了解还是不足,建议阅读烈火学院提供的CSS中文手册。 演示:[详细]
-
三种用CSS滤镜实现的图片透明度及渐变效果
所属栏目:[专访] 日期:2018-09-08 热度:85
三种用CSS滤镜实现的图片透明度及渐变效果,单击鼠标左键,观察ALPHA滤镜效果。每单击一次就会有一种不同的效果出现。一个比较老的特效代码,但是具有收藏和学习价值。 演示代码: HTMLHEADTITLE新的一页/TITLESTYLE!--样式单 --.15pt{font-size:15pt;color[详细]
-
一款简洁、实用、带箭头的CSS流程图代码
所属栏目:[专访] 日期:2018-09-08 热度:131
烈27火51网(LieHuo15.Net)教22程 一款设计简洁、实用的CSS箭头流程图特效,用在帮助中合适,或者用在安装程序及用户索引上,指导用户第一步、第二步干什么,也就是流程图,可以说是很适合埃那个小缺口不是CSS实现的,用了小图片,相对简单些,不过功能挺实[详细]
-
CSS滤镜修饰网页图片显示出的不同效果
所属栏目:[专访] 日期:2018-08-30 热度:89
CSS滤镜修饰网页图片显示出的不同效果,图在不同的CSS滤镜作用下,呈现出不同的效果。。。其实CSS的此项功能非常实用,用它可以生成出灰度图、底片效果、X光效果等,实例仅列出了一小部分,还有不少的图片效果可以用CSS滤镜来完成。 演示: htmlheadtitle[详细]
-
CSS 定义上划线、下线线、删除线代码
所属栏目:[专访] 日期:2018-08-30 热度:184
烈12火98网(LieHuo21.Net)教95程 CSS 定义上划线、下线线、删除线代码,这三种线是最常用的,删除线一般用在商城或产品类网页中,下划线则使用较广泛,上划线这个见的比较少,多掌握一些CSS的基础知识,对你绝对没有害处。 代码演示: !DOCTYPE html PUBLI[详细]
-
Css 自定义滚动条属性二例
所属栏目:[专访] 日期:2018-08-29 热度:66
一。用CSS自定义滚动条属性。 实际上从代码里你并没有发现有滚动条,但是最终的效果却出现了滚动条,它可以根据框内内容的多少自动适应,细心的朋友会发现,这其实是在CSS里定义了一个 overflow:scroll属性。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHT[详细]
-
CSS特效:关于CSS缩放属性的代码演示
所属栏目:[专访] 日期:2018-08-29 热度:100
烈15火04网(LieHuo87.Net)教04程 CSS特效:关于CSS缩放属性的代码演示。一个关于CSS控制元素缩放的实例,在例子中,图片被按比例缩小,这个挺有用处吧。 演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1[详细]
-
用Css定义不同的鼠标光标指针样式代码
所属栏目:[专访] 日期:2018-08-29 热度:123
鼠标的指针大家再熟悉不过了,熟悉的甚至忘了它们的存在。用CSS我们可以将这些光标指针一一展现出来,本例将展现给大家用CSS实现拖动符的光标、链接小手、移动光标、带问号的光标、不可操作的光标、小手光标、带运行符的光标、上下拖动的光标、普通打字光[详细]
-
CSS自适应窗口大小的容器效果
所属栏目:[专访] 日期:2018-08-29 热度:81
CSS自适应窗口大小的容器居中,在内层的容器中,你可以输入一些文字,内层窗口会随着窗口的大小而自动适应,而且它始终是水平和垂直居中的,实用性大大增强,对此感兴趣的朋友好好参考一下哦。 代码演示: htmlheadstyle type=text/css*{margin:0; padding[详细]
-
仿QQ面板分组展开收缩,JS+CSS实现的代码
所属栏目:[专访] 日期:2018-08-25 热度:73
CSS3、HTML5、 jQuery 等优秀WEB开发语言的到来,给我们带来的并非一般的体验,在体验新鲜的时候,烈火再给大家送上一个CSS+JS实现的特效,一款看上去类似QQ面板分组的效果,当我们的鼠标经过分组时,不用点击,分组自动展开,效果挺不错的,界面风格设计[详细]
-
纯Css绘制出逼真的扑克牌,附花色切换代码
所属栏目:[专访] 日期:2018-08-25 热度:169
文中使用纯CSS实现了扑克牌效果,这是来自国外大牛的作品?当您查看到该效果时肯定会以为是一张图片,可以当您右击的时候,却什么图片也没有,再查看源代码,也没有调用任何图片,顿时有点诧异,CSS果然很牛,或是作者水平比较牛?这也能用CSS来实现啊![详细]
-
js+css实现鼠标滑过触发行、列同时变色
所属栏目:[专访] 日期:2018-08-25 热度:94
以前,烈火介绍过表格隔行换色及鼠标经过变色的效果,本文的特效代码有所不同,在下面的例子中,并没有实现隔行换色,仅实现了鼠标响应表格行、列同时变色的效果,也就是说鼠标在表格上的变色区域是【十】字,至少是【Г】字,不多说了,大家自己看效果吧[详细]