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

2009年8月9日

http://www.865171.cn/css-menu/detail-20.aspx

摘要： 演示效果截图 用到的图片CSS代码 .menulist a{color: black;display: block;width: 170px;height: 20px;padding-left: 5px;padding-top: 1px;margin-bottom: 5px;background-image: url(menu.jpg);background-repeat: no-repeat;b... 阅读全文

posted @ 2009-08-09 01:55 linFen 阅读(662) 评论(0) 推荐(0)

CSS青灰色二级下拉水平菜单

摘要： 演示效果截图CSS代码<style type="text/css">.menu {font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left; posit... 阅读全文

posted @ 2009-08-09 01:54 linFen 阅读(1004) 评论(0) 推荐(0)

两款CSS按钮式水平菜单，蓝色和绿色

摘要： 演示效果截图用到的图片CSS代码.hbuttons a{display: block;text-decoration: none;font: bold 13px Arial;color: black;width: 78px;height: 23px;float: left;display: inline;margin-right: 8px;background-image:url(tabsquar... 阅读全文

posted @ 2009-08-09 01:53 linFen 阅读(1251) 评论(0) 推荐(0)

纯CSS仿淘宝导航菜单

摘要： 演示效果截图用到的图片CSS代码<style>body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;}div,img{margin:0; padding:0; border:0;}ul,li{list-style-type: none; margin:0; padding:0; fl... 阅读全文

posted @ 2009-08-09 01:52 linFen 阅读(5122) 评论(0) 推荐(0)

橙色、黑色、栗色形成的水平CSS菜单

摘要： 演示效果截图 CSS代码<style>*{ margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8;}body{ background: #333}#info{padding:50px;}#infobox{padding:0px 20px;background-color: #640000;}#cent... 阅读全文

posted @ 2009-08-09 01:50 linFen 阅读(909) 评论(0) 推荐(0)

CSS绿色水平多级下拉菜单

摘要： 演示效果截图 CSS代码<style>.menu {text-align:left;color:#FFF;font-family:幼圆; /*菜单字体*/height:26px;width:100%}.menu ul.menuBar{list-style:none;margin:0px;font-size:12pt; /*一级菜单字体大小*/}.menu ul.menuBar li{f... 阅读全文

posted @ 2009-08-09 01:48 linFen 阅读(3628) 评论(0) 推荐(0)

CSS+XHTML制作的一款简单菜单

摘要： 演示效果截图 CSS代码<style type="text/css"><!--* { margin:0; padding:0;}body { font:12px Verdana, Geneva, sans-serif #444; line-height:1.5;}ul li { list-style:none;}.menu { width:660px; margin:20px a... 阅读全文

posted @ 2009-08-09 01:47 linFen 阅读(372) 评论(0) 推荐(0)

珊瑚色水平CSS菜单

摘要： 演示效果截图 用到的图片 CSS代码<style type="text/css">body {margin:0;padding:0;font: bold 11px/1.5em Arial;}img {border: none;}#roScripts_m1 {float:left;width:100%;background:#F7DBD2;font-size:96%;line-heigh... 阅读全文

posted @ 2009-08-09 01:46 linFen 阅读(362) 评论(0) 推荐(0)

紫罗兰水平CSS菜单

摘要： 演示效果截图 用到的图片 CSS代码<style type="text/css">body {margin:0;padding:0;font: bold 11px/1.5em Arial;}img {border: none;}#roScripts_m1 {float:left;width:100%;background:#F6ECFD;font-size:96%;line-heigh... 阅读全文

posted @ 2009-08-09 01:45 linFen 阅读(361) 评论(0) 推荐(0)

虚线效果水平CSS菜单

摘要： 演示效果截图 用到的图片 CSS代码<style type="text/css"><!--body {margin:0;padding:0;font-family: verdana, sans-serif;font-size: 11px;background: #f7f7f7;}.container {width: 650px;height:200px;padding:20px;... 阅读全文

posted @ 2009-08-09 01:44 linFen 阅读(403) 评论(0) 推荐(0)

海豚色水平CSS导航菜单，挺实用

摘要： 演示效果截图 用到的图片 CSS代码#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}#dolphinnav{position:relative;height:33px;... 阅读全文

posted @ 2009-08-09 01:43 linFen 阅读(432) 评论(0) 推荐(0)

橙色玻璃效果水平CSS菜单

摘要： 演示效果截图 用到的图片 CSS代码/* CSS Document */.rhm1{ width:450px; height:64px; margin:0 auto; background:url(rhm1_bg.gif) repeat-x; }.rhm1-left{ background:url(rhm1_l.gif) no-repeat; width:15px; height:64px; f... 阅读全文

posted @ 2009-08-09 01:42 linFen 阅读(417) 评论(0) 推荐(0)

灰色玻璃效果水平CSS菜单

摘要： 演示效果截图 用到的图片 CSS代码/* CSS Document */.rhm1{ width:450px; height:64px; margin:0 auto; background:url(rhm1_bg.gif) repeat-x; }.rhm1-left{ background:url(rhm1_l.gif) no-repeat; width:15px; height:64px; f... 阅读全文

posted @ 2009-08-09 01:41 linFen 阅读(548) 评论(0) 推荐(0)

红色玻璃效果水平CSS菜单

摘要： 演示效果截图 用到的图片 CSS代码/* CSS Document */.rhm1{ width:450px; height:64px; margin:0 auto; background:url(rhm1_bg.gif) repeat-x; }.rhm1-left{ background:url(rhm1_l.gif) no-repeat; width:15px; height:64px; f... 阅读全文

posted @ 2009-08-09 01:39 linFen 阅读(929) 评论(0) 推荐(0)

CSS绿色小矩形水平导航菜单

摘要： 演示效果截图 用到的图片 CSS代码/* CSS Document */*{ margin:0; padding:0;}#menu{ width:90%; margin:25px auto;}#menu ul{ list-style:none;}#menu li{ display:block; float:left;}#menu li a{ background:#749b10 url(menu_... 阅读全文

posted @ 2009-08-09 01:38 linFen 阅读(1677) 评论(0) 推荐(0)

四款CSS滑动门效果的水平菜单

摘要： 演示效果截图用到的图片CSS代码body { padding: 50px; margin: 0;}ul.green { padding: 5px; margin: 10px 0; list-style: none; background-color: #fff; border-bottom: 1px solid #e7e7e7; float: left; clear: left;}ul.green... 阅读全文

posted @ 2009-08-09 01:36 linFen 阅读(2856) 评论(0) 推荐(0)

CSS蓝色水平选项卡菜单

摘要： 演示效果截图用到的图片CSS代码:link,:visited {text-decoration:none;}ul,ol,dl {list-style:none;} ul,ol,li,body,html,p{margin:0; padding:0;} a img,:link img,:visited img {border:none;}i {display:none;}#navbar{width:7... 阅读全文

posted @ 2009-08-09 01:35 linFen 阅读(929) 评论(0) 推荐(0)

亮蓝色水平CSS选项卡菜单

摘要： 演示效果截图用到的图片CSS代码body{background:#fff url(bkg_page.png) repeat-x;padding:0;margin:0;font-family:'Verdana';font-size:12px;color:#7f8991}#header{margin:108px 0 0 100px}#header em{display:none}#header ul{... 阅读全文

posted @ 2009-08-09 01:34 linFen 阅读(1211) 评论(0) 推荐(0)

带个形象小图标的黑色水平CSS菜单

摘要： 演示效果截图 用到的图片 CSS代码body{background:#FFF;font-family:Verdana, Arial, Helvetica,sans-serif;font-size:80%;color:#000;margin:0;vertical-align:top}img{border:0;vertical-align:middle}a:link{color:#00248A;tex... 阅读全文

posted @ 2009-08-09 01:33 linFen 阅读(1632) 评论(0) 推荐(0)

五种样式滑动透明效果的水平CSS导航条

摘要： 演示效果截图用到的图片CSS代码<style type="text/css">body {padding: 50px;}/* The CSS Code for the menu starts here */#menu {font-family: Arial, sans-serif;font-weight: bold;text-transform: uppercase;margin: 5... 阅读全文

posted @ 2009-08-09 01:32 linFen 阅读(3061) 评论(0) 推荐(0)