前端设计

   :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

2011年7月19日

摘要: 像抽屉一样的菜单,多用在产品网站,比如IT产品网站的分类导航上,菜单结构清淅,样式新颖,设计美观,主要是运用JavaScript技术实现,用CSS配合实现菜单背景的构建,总体来说,是学习Js多级分类菜单的好范例。http://www.ij2ee.com/http://www.gbsou.com/<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><h 阅读全文
posted @ 2011-07-19 14:24 前端设计 阅读(332) 评论(0) 推荐(0) 编辑

摘要: 基于纯CSS实现的菜单,当鼠标划过的时候,子菜单会出现,没有过多修饰,简约不失美观,稍加修善就是一款好菜单。在兼容性方面,本菜单也做的不错。http://www.ij2ee.com/ http://www.gbsou.com/<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1 阅读全文
posted @ 2011-07-19 14:22 前端设计 阅读(818) 评论(0) 推荐(0) 编辑

摘要: 仿QQ面板风格的多级折叠、展开菜单,三级下拉导航,JavaScript+CSS共同结晶的结果,推荐给大家,点击“运行”可查看效果。http://www.ij2ee.com/ http://www.gbsou.com/<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉菜单</title><style type="text/css">*{ 阅读全文
posted @ 2011-07-19 14:20 前端设计 阅读(342) 评论(0) 推荐(0) 编辑

摘要: 几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写埃另外还加入了圆角,都是参考以前学习的知识写的。期间使用了jquery-1.4.2.min.js框架库。http://www.ij2ee.com/ http://www.gbsou.com/<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">< 阅读全文
posted @ 2011-07-19 14:19 前端设计 阅读(580) 评论(0) 推荐(0) 编辑

摘要: DIV CSS图形菜单之仿DreamWeaver,做了四个多小时才兼容好,火狐和IE都无Bug了,搞的自己快出Bug了。http://www.ij2ee.com/http://www.gbsou.com/<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&q 阅读全文
posted @ 2011-07-19 14:18 前端设计 阅读(357) 评论(0) 推荐(0) 编辑

摘要: DIV CSS布局实例:CSS标签切换代码,通俗说就是滑动门的制作教程,很不错的实例,希望对你学习CSS布局有帮助。http://www.ij2ee.com/<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>< 阅读全文
posted @ 2011-07-19 14:16 前端设计 阅读(915) 评论(0) 推荐(0) 编辑

摘要: css+JavaScript无限级菜单代码,作者对兼容性的考虑也是正确的,因此菜单在兼容性该页也表现不错,在IE、火狐、傲游等众多浏览器上都表现不错。多级菜单也是朋友们能用得上的,希望大家喜欢。http://www.ij2ee.com<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml 阅读全文
posted @ 2011-07-19 14:15 前端设计 阅读(264) 评论(0) 推荐(0) 编辑

摘要: jquery会翻滚的菜单导航条代码,鼠标放到某个菜单项上后,菜单会翻滚一下,增加一些动感的效果,看上去更可爱了,而且颜色搭配也挺不错的jQuery导航菜单。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>< 阅读全文
posted @ 2011-07-19 14:13 前端设计 阅读(455) 评论(0) 推荐(0) 编辑

摘要: 一款灰色风格的CSS弹出菜单,美化一般,重要是突出功能和实现方法,为CSS爱好者提供一份二级弹出菜单的样例,整体效果不错,兼容性也说得过去,高手可以继续完善。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>< 阅读全文
posted @ 2011-07-19 14:10 前端设计 阅读(521) 评论(0) 推荐(0) 编辑

摘要: CSS灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>灰色下拉导航菜单 by www.c 阅读全文
posted @ 2011-07-19 14:09 前端设计 阅读(386) 评论(0) 推荐(0) 编辑

摘要: 一个自动切换的Tab标签,选项卡自动切换与其一样,引用了jQuery来实现,是一个新颖的版本,希望大家喜欢我的拙作。适合新手参考,在ie6,ie7,ff上通过测试;在此说明,想增加标签只要加就行了,代码不用改。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtm 阅读全文
posted @ 2011-07-19 14:07 前端设计 阅读(476) 评论(0) 推荐(0) 编辑

摘要: 最简单的Js加密与解密,那个输入框可以换成文本框,这是个中文加密程序,输入英文可能看不到效果,所以说测试时候最好输入中文字符,然后点击“加密”就能看到效果了。<html><head><meta http-equiv="content-type" content="text/html; charset=GB2312" /><title>最简单的加密与解密</title><!-- 样式表 --><style> * { font-size:12px; font-family:宋 阅读全文
posted @ 2011-07-19 14:04 前端设计 阅读(649) 评论(0) 推荐(0) 编辑

摘要: JavaScript中Cookies的用法示例,cookies的用法也是想当广泛的,像网页上的拖动、购物车等等,都是基于Cookie的,希望通过本实例,你能掌握Js中Cookies的具体用法。<html><head><meta http-equiv="content-type" content="text/html; charset=GB2312" /><title>Cookies记事贴</title><!-- 样式表 --><style>* { font-size:12 阅读全文
posted @ 2011-07-19 14:02 前端设计 阅读(314) 评论(0) 推荐(0) 编辑

摘要: JavaScript计算器,可以直接输入公式,然后按“计算”按钮,即可算出结果,学习JS运算的一个例子。<html><head><meta http-equiv="content-type" content="text/html; charset=GB2312" /><title>JavaScript计算器</title><script>function calc(){ try{ document.getElementById("txt_formula").val 阅读全文
posted @ 2011-07-19 14:00 前端设计 阅读(305) 评论(0) 推荐(0) 编辑

摘要: 类似评论、点评的JS标签选择功能,淘宝网上面也有此功能,用户在选择点评的时候,点击一下文字,文字就会被选中,发表点评的时候,不少网站为了方便用户浏览,都预留了一些点评关键字,比如:好、很好、很差等,省去用户输入的麻烦。<title>类似评论、点评的JS标签选择功能</title><style>.c{ width:100px; height:25px; line-height:25px; text-align:center; border:1px solid #eee; margin:10px; float:left; font-size:12px; curs 阅读全文
posted @ 2011-07-19 13:57 前端设计 阅读(287) 评论(0) 推荐(1) 编辑

摘要: Js模拟的Dialog弹出浮动框,蓝色经典风格,可以创建一个新层,可设置弹出层的标题和内容,用它可实现一个登录框,或用在后台管理中。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-eq 阅读全文
posted @ 2011-07-19 13:56 前端设计 阅读(401) 评论(0) 推荐(0) 编辑

摘要: 不错的CSS树形菜单,树状列表,当然不全是CSS实现,部分功能还使用了JavaScript代码进行配合,删减了修饰用的菜单图片,大家用的时候自己图片加进去,IMG标签大部分都预留了出来,稍懂Html语法的朋友很容易就看懂的。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19 阅读全文
posted @ 2011-07-19 13:47 前端设计 阅读(832) 评论(0) 推荐(0) 编辑

摘要: 黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type 阅读全文
posted @ 2011-07-19 13:45 前端设计 阅读(262) 评论(0) 推荐(0) 编辑

摘要: 黑色导航菜单,CSS带阴影效果,有立体感,鼠标放到菜单上会看到菜单的背景在变化,纯CSS的代码应用,没有使用任何的JavaScript代码。如果你觉得菜单的背景颜色和文字颜色不是您想要的,你还可以自己修改CSS文件,只要你有创意,一个漂亮菜单就会诞生。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/ 阅读全文
posted @ 2011-07-19 13:42 前端设计 阅读(721) 评论(0) 推荐(0) 编辑

摘要: 鼠标经过后切换背景的导航菜单,简单明了,给新手学习。已测试,兼容IE6、7、8、9,Firefox3、4、5、6,Chrome5以上,Opera,Safare,搜狗,遨游,360,TT<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&l 阅读全文
posted @ 2011-07-19 13:41 前端设计 阅读(349) 评论(0) 推荐(0) 编辑