`
hulin
  • 浏览: 61759 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

青色柔和的导航条代码特效(非常酷)

阅读更多

                                    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> THE BEAUTIFUL LIST </TITLE>
  <style type="text/css">
div#BeautifulList{width:300px;margin:20px;font-family: Verdana;}
#BeautifulList a{display:block;color:#BBE1E7;padding:10px 15px;background-color:#3DA2B6;border-bottom:dotted 1px #A8D3DA;font-size:12px;text-decoration:none;}
#BeautifulList a:hover{color:#fff;background-color:#58AFC0; font-weight:bold; }
#BeautifulList h1{margin:0;font-weight:normal;color:#fff;padding:15px;font-size:14px;background-color:#238298}
#BeautifulFoot h2{color:white;margin:0; font-size:14px;padding:20px 10px;}

/*圆角*/
div.RoundedCorner{background: #3DA2B6}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #3DA2B6}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
  </style>
</HEAD>
<BODY>
  <div id="BeautifulList">
<h1>THE BEAUTIFUL LIST</h1>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Photos</a>
<a href="#">About</a>
<a href="#">Contact Me</a>
<div id="BeautifulFoot" class="RoundedCorner">
<!-- <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> -->
<h2>Welcome to PureDays.CN</h2>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
  </div>
</BODY>
</HTML>

 

1
4
分享到:
评论
2 楼 freecode 2008-08-23  
效果不错,试用一下。
1 楼 tantec 2008-08-23  
真的还不错。

相关推荐

    青色大气横向DIV+CSS导航菜单.rar

    青色大气横向DIV+CSS导航菜单.rar青色大气横向DIV+CSS导航菜单.rar青色大气横向DIV+CSS导航菜单.rar青色大气横向DIV+CSS导航菜单.rar青色大气横向DIV+CSS导航菜单.rar青色大气横向DIV+CSS导航菜单.rar青色大气横向...

    photoshop 漂亮 青色 质感 样式

    例如,使用高斯模糊或动感模糊滤镜可以为质感添加柔和的效果,而通过曲线或色相/饱和度调整图层则可以改变青色的深浅和纯度。 总的来说,“Photoshop漂亮的青色质感样式”是图像设计中的一个重要组成部分,它涵盖了...

    Discuz! 青色模板

    1. 清晰导航:青色模板在顶部设有明显的导航栏,包括论坛首页、分类、用户中心等,方便用户快速跳转。 2. 强大的分类功能:模板支持多级分类,便于管理大量的帖子和话题,用户可以根据兴趣或需求轻松查找相关信息。...

    大气清爽青色社区网站模板

    标题中的“大气清爽青色社区网站模板”表明这是一个设计风格以青色为主调,给人以清新、宽敞感觉的网站模板,特别适用于构建社区类的网站。这类网站通常需要提供友好的用户界面,鼓励用户交流互动。 描述中提到,这...

    PHPWind论坛 青色风格

    1. **开源软件**:PHPWind是一款遵循GPL协议的开源软件,这意味着源代码公开,允许用户自由地使用、修改和分发。这为开发者提供了广阔的定制空间,可以根据自身需求打造个性化的社区论坛。 2. **模板系统**:“青色...

    青色精品企业源码网站系统

    压缩包中的"青色导航"可能是指该系统的导航模块或一个特定的模板示例,用于展示网站顶部菜单的实现方式,帮助用户了解如何自定义网站的导航结构。 综上所述,"青色精品企业源码网站系统"是一个全面的建站工具,它...

    html颜色代码大全

    新手记不住常用的颜色代码?用这个打开就知道了,基本上能用到的颜色RBG代码都有,只要用浏览器开该文件即可。

    cmd颜色代码

    在深入探讨CMD颜色代码之前,我们首先应当理解CMD(命令提示符)的含义与功能。CMD是Microsoft Windows操作系统中的一...对于经常使用CMD进行操作或编程的用户来说,灵活运用颜色代码是一项非常实用且值得掌握的技能。

    青色曲线艺术幻灯片背景图片下载.rar

    描述详细介绍了该背景图片的特点:“这是一份青色背景的,艺术设计PPT背景图片,作者只用了几条曲线就勾勒出了这份幻灯片背景。”这说明设计简洁而富有创意,使用了青色作为主色调,通过线条的巧妙运用,营造出艺术...

    PS颜色代码

    在Photoshop(PS)中,颜色代码是一种用于标识和应用颜色的标准方式,通常采用16进制(Hexadecimal)表示法。颜色代码可以帮助设计师精确地选取和复制颜色,尤其是在跨平台设计,如网页设计(例如使用Dreamweaver时...

    动感背景音乐活力青色欧美风动态商务ppt模板.zip

    "动感背景音乐活力青色欧美风动态商务ppt模板.zip" 提供了一种创新且现代的设计方案,旨在提升你的演示文稿的专业性和吸引力。这款模板的特点是其大图暗色背景,结合了简约线条与矩形元素的创意封面设计,这不仅能够...

    青色App互联网应用开发网站模板

    青色App互联网应用开发网站模板是一款专为展示和推广移动应用程序设计的专业网页模板。这款模板以其独特的青色调和简洁的设计风格吸引用户,旨在为开发者提供一个高效、直观且具有吸引力的平台来展示他们的APP产品。...

    智能建站软件-青色系企业网站源码

    青色风格的机械零件加工企业网站模板,风格简洁清晰,设计感强,适合做五金,机械、产品加工等公司企业网站。 宽度:1000px 对齐:居中 主色:青色 结构:div+css 运行环境:asp.net2.0(或以上) 后台地址:...

    青色机械零件加工企业网站制作资源免费

    青色风格的机械零件加工企业网站模板,风格简洁清晰,设计感强,适合做五金,机械、产品加工等公司企业网站。 宽度:1000px 对齐:居中 主色:青色 结构:div+css 运行环境:asp.net2.0(或以上) 后台地址:...

    藏青色背景商务线条工作总结PPT模板.pptx

    藏青色背景商务线条工作总结PPT模板.pptx

    超简洁工具条式网页音乐播放器代码及演示.rar

    超简洁工具条式网页音乐播放器代码及演示,放在网页可听背景音乐,风格很简洁明了那种,参数设置说明:  // 这是「自动连续播放」的设定。一般来说,播放一首音乐完毕后就会自动跳到下一首。  // 但是如果您要...

    永久免费建站_青色机械零件加工企业网站源码

    青色风格的机械零件加工企业网站模板,风格简洁清晰,设计感强,适合做五金,机械、产品加工等公司企业网站。 宽度:1000px 对齐:居中 主色:青色 结构:div+css 运行环境:asp.net2.0(或以上) 后台地址:...

    青色竖条背景BLOG网页模板

    青色竖条背景BLOG网页模板是用于创建个人博客或在线日志的一种设计风格,它以独特的青色竖条纹为背景,旨在提供一个既美观又功能齐全的平台,让内容展示更加引人注目。在网页设计领域,选择合适的模板能够极大地提升...

    CAD2007青色图库

    CAD图库 

    cad图库大全青色

    各种家具家电块

Global site tag (gtag.js) - Google Analytics