2006-10-19

网页中小三角的做法与使用(CSS特效)

来源: 中国本站网作者:佚名评论 0 条

用DIV CSS可以作出很多不同外形的角形；以下我只写了几个；CSS没有优化；是为了让大家看得更清一些；

以下是一些小三角的外形：

这是第一个小三角的写法：

#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}

以下是一些小三角；可以举一反三；做出更多的；

以下是一个应用的实例：

代码框
<!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>www.zishu.cn</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> /*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;} </style> </head> <body> <div id="nav"> <h1>应用的一个实例</h1> <ul> <li><a href="http://www.zishu.cn" target="_blank"><span></span>子鼠首页</a></li> <li><a href="http://www.zishu.cn" target="_blank"><span></span>给我留言</a></li> <li><a href="http://www.zishu.cn" target="_blank"><span></span>友情链接</a></li> <li><a href="http://www.zishu.cn" target="_blank"><span></span>我的日志</a></li> <li><a href="http://www.zishu.cn" target="_blank"><span></span>音乐英语</a></li> </ul> </div> </body> </html> </td> <br> </td> </tr> <tr align="left"> <td colspan="2">共2页: 上一页 1 <a href='31979_2.html'>[2]</a> <a href='31979_2.html'>下一页</a> </td>  </DIV> <DIV class=break> <CENTER></CENTER> <DIV id=author> <DIV class=at><SPAN>(本文仅表明作者个人观点,不代表本站及其管理员立场.)</SPAN> <a href="/plus/recommend.php?arcID=31979" target=_blank>推荐</a> <A href="/plus/stow.php?arcID=31979">收藏</A> <A href="/member/article_add.php" target=_blank>投稿</A> <a href="#" onClick="window.print();">打印</a> <a href="#top">返回</a> <a href="#" onClick="window.close();">关闭</a></DIV> </DIV>上一篇：<a href='/webdesign/CSS/20071115/31978.html'>特效：CSS Javascript实现表格背景变色</a> <br />下一篇：<a href='/webdesign/CSS/20071115/31980.html'>为不同的浏览器载入不同CSS的二种方法</a> </DIV> <A name=feek></A> <div id="feedback"> <ol id="gbook"> <img src="/img/ajax_small.gif" align="absmiddle" /> 评论加载中… </ol> </div> </DIV></DIV> <DIV class=cr> <DIV class=index> <table width="264" height="256" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_2315680"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="34"; alimama_width=250; alimama_height=250; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>热门排行</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/CSS/20071115/32019.html'>CSS如何为同一个元素处理多种规则</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32020.html'>彻底弄懂CSS盒子模式之二</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32021.html'>技巧文章：常用CSS修改实际操作技巧</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31911.html'>美化网页制作精美圆角表格</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31913.html'>CSS 陈列馆-收集站精选</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31914.html'>网页中背景样式表的应用</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31994.html'>用CSS样式表来定义博客上的链接样式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31989.html'>如何使用HTC文件来封装CSS样式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31980.html'>为不同的浏览器载入不同CSS的二种方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31982.html'>CSS实现当前页的滑动门菜单效果方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31981.html'>CSS实现导航条图片的翻转菜单</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31964.html'>CSS样式表实现文字变图象特效</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31965.html'>CSS样式表完成可以控制的闪烁效果</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31971.html'>网页设计引入CSS样式的五种方式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/32018.html'>纯CSS代码实现翻页</a></LI>  </UL> </DIV></DIV> <DIV class=index> <DIV class=indext> <B>推荐文章</B></DIV> <DIV class="indexc list"> <UL>   </UL></DIV></DIV> <DIV class=index><table width="264" height="60" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img border="0" src="/img/2.gif" /><br> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_860008"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="13"; alimama_width=250; alimama_height=60; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>相关文章</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/CSS/20071115/31980.html'>为不同的浏览器载入不同CSS的二种方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31978.html'>特效：CSS Javascript实现表格背景变色</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31981.html'>CSS实现导航条图片的翻转菜单</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31977.html'>变脸：用CSS JS打造的网页皮肤</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31982.html'>CSS实现当前页的滑动门菜单效果方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31976.html'>网页特效之CSS制作的三级下拉菜单</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31983.html'>css模拟title和alt的提示效果</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31974.html'>你知道这些css网页设计技巧吗</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31984.html'>实时切换网页的CSS样式实现</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31985.html'>CSS的“顶级技巧”</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31973.html'>css星级效果总结</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31972.html'>CSS让网页中的内容自动换行的实现方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31986.html'>ie7 下hack的方法</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31971.html'>网页设计引入CSS样式的五种方式</a></LI> <LI>·<a href='/webdesign/CSS/20071115/31987.html'>用CSS设计高用户体验的web文字大小</a></LI>  </UL></DIV></DIV> </DIV> <DIV class=clear></DIV></DIV> <DIV id=server><A href="/">网站首页</A> 　- 　<A href="/plus/sitemap.html" target=_blank>网站地图</A>　- 　　<A href="http://bbs.whzz.org/" target=_blank>站长论坛</A> 　- 　<A href="/member/article_add.php" target=_blank>网站投稿</A> 　- 　<script src='http://s37.cnzz.com/stat.php?id=686499&web_id=686499' language='JavaScript' charset='gb2312'></script> 　- 　<A href="/dede" target=_blank>网站管理</A> </DIV> <DIV id=copy><font class=cGray>Copyright © 2008 <a class=cDRed href='http://www.whzz.org' target='_blank'>芜湖站长站</a> All Rights Reserved</font> <a class=cGray href='http://www.miibeian.gov.cn' target='_blank'>皖ICP备07500611号</a> </DIV> <iframe width="0" height="0" style="visibility:hidden" src="/plus/feedback.php?arcID=31979" id="igbook" name="igbook"></iframe> </BODY></HTML>