小三角的做法与使用
2006-11-02 00:00
260 查看
用DIV+CSS可以作出很多不同形状的角形;以下我只写了几个;CSS没有优化;是为了让大家看得更清一些;
以下是一些小三角的形状:
这是第一个小三角的写法:
以下是一些小三角;可以举一反三;做出更多的;
www.zishu.cn
/*zishu.cn*/
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;}
#info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
#info div{background:#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;}
/*一些三角的写法*/
#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;}
#com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
一些三角形的写法
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
以下是一个应用的实例:
www.zishu.cn
/*zishu.cn*/
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;}
#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
a:link,a:visited{color:#FF6600;text-decoration: none;}
a:hover,a:active{ color:#FF0000;}
#nav a span{overflow:hidden; border-top:6px solid #FFFFCC;border-left:6px solid #FFFFCC;border-bottom:6px solid #FFFFCC; height:0px; width:0px; margin:2px 2px 0 -10px; position:absolute}
#nav a:hover span{background:#CC3300;border-top:6px solid #FFFFCC;border-left:6px solid #FF3300;border-bottom:6px solid #FFFFCC;overflow:hidden; float:left;}
应用的一个实例
子鼠首页
给我留言
友情链接
我的日志
音乐英语
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在IE6和IE7还有FIREFOX还有OPERA都测试过!IE6更低的版本没有测试!
以下是一些小三角的形状:
这是第一个小三角的写法:
#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
以下是一些小三角;可以举一反三;做出更多的;
www.zishu.cn
/*zishu.cn*/
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;}
#info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
#info div{background:#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;}
/*一些三角的写法*/
#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;}
#com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
一些三角形的写法
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
以下是一个应用的实例:
www.zishu.cn
/*zishu.cn*/
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;}
#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
a:link,a:visited{color:#FF6600;text-decoration: none;}
a:hover,a:active{ color:#FF0000;}
#nav a span{overflow:hidden; border-top:6px solid #FFFFCC;border-left:6px solid #FFFFCC;border-bottom:6px solid #FFFFCC; height:0px; width:0px; margin:2px 2px 0 -10px; position:absolute}
#nav a:hover span{background:#CC3300;border-top:6px solid #FFFFCC;border-left:6px solid #FF3300;border-bottom:6px solid #FFFFCC;overflow:hidden; float:left;}
应用的一个实例
子鼠首页
给我留言
友情链接
我的日志
音乐英语
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在IE6和IE7还有FIREFOX还有OPERA都测试过!IE6更低的版本没有测试!
相关文章推荐
- DIV+CSS 小三角的做法与使用
- 小三角的做法与使用
- 小三角的做法与使用
- 使用Jquery提交Json格式的数据到Asp.net程序的另类做法
- WinForm 使用TreeView控件作为导航的 TreeNode(TreeView)点击事件(Click、DoubleClick ~)的一般做法
- 使用 Windows Phone 执行模型的最佳做法
- 使用JDBC连接数据库的改进做法
- 使用网站作为WCF服务宿主的几种做法
- 使用CGAL查找输入三角网格模型独立模型个数
- 使用post方法上传文件的两种做法
- 三角螺旋阵 方阵的主对角线之上称为“上三角”。 请你设计一个用于填充n阶方阵的上三角区域的程序。填充的规则是:使用1,2,3….的自然数列,从左上角开始,按照顺时针方向螺旋填充。
- [K/3Cloud] 表单python脚本使用QueryService的做法
- 使用post方法上传文件的两种做法
- [原]不使用资源文件动态创建对话框的做法
- 使用JavaScript实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形
- 在U3D中使用Sqlite做配置数据存取的靠谱做法
- 使用HTTPS时的最佳做法
- datasnap——动态注册服务类 datasnap——动态注册服务类 在DataSnap的应用程序时,我们首先需要注册的服务器类,以提供访问客户端应用程序的服务器方法。通常的做法是使用DSSer
- 读写锁 要写线程优先那么还可以使用条件变量的方法,具体做法可以参考msdn。
- 网页三角的一个特殊做法