如何实现asp.net效果，如图
0
最佳答案
0
<!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 runat="server"> <title></title> <style type="text/css"> * { text-decoration: none; list-style-type: none; font-family: 'Microsoft YaHei'; } ul { clear: left; font-size: 14px; margin: 0px; padding: 0px; padding-bottom:10px; } ul li { font-weight: 600; height: 25px; border-left:#5499d3 solid 1px; border-top:#5499d3 solid 1px; border-bottom:#5499d3 solid 1px; background-color: rgba(84, 153, 211, 0.6); text-align:center; margin-bottom:15px; vertical-align:middle; background-color: #EFF5FE; cursor:pointer; } a:link, a:visited { color: #7C8BAF; } .hover{ border:2px solid #0041f6} </style> <script type="text/javascript" src="script/jquery.min.js"></script> <script type="text/javascript"> $(function () { $("ul li a").click(function () { $(this).parent().find("span").remove(); $(this).parent().append("<span>☞</span>").find("a,span").css("color", "#0041f6"); $(this).parent().siblings().find("span").remove(); $(this).parent().siblings().find("a").css("color", "#7C8BAF"); }); $("li a").hover(function () { $(this).parent().addClass("hover"); $(this).parent().siblings().removeClass("hover").end(); }).mouseout(function () { $(this).parent().removeClass("hover").end(); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div style="width: 980px; height: 700px; margin-left: auto; overflow: hidden; margin-right: auto; border: 1px solid #5499d3;"> <div style="width: 100%; height: 4%; float: left; background-color: #84CCFF; text-align:center; padding-top:5px; font-size:20px;"> <b style="width: 100%; text-align: center; color:White;">药房管理配置系统</b> </div> <div style="width: 120px; height: 96%; float: left;background-color: #84CCFF; border-right-color:#EFF5FE;"> <ul> <li><a href="WindowConfig.aspx" target="RightPage" style=" color:#0041f6;">窗口配置信息</a><span style=" color:#0041f6;">☞</span></li> <li><a href="ModeConfig.aspx" target="RightPage">模式配置信息</a></li> <li><a href="Mode.aspx" target="RightPage">模式信息</a></li> <li><a href="Window.aspx" target="RightPage">窗口信息</a></li> <li><a href="Catapult.aspx" target="RightPage">弹射装置</a></li> <li><a href="CatapultJump.aspx" target="RightPage">弹射计数信息</a></li> <li><a href="ControlCard.aspx" target="RightPage">控制卡信息</a></li> <li><a href="SharpCode.aspx" target="RightPage">二维码信息</a></li> <li><a href="TOEC.aspx" target="RightPage">光电信息</a></li> <li><a href="RFID.aspx" target="RightPage">RFID信息</a></li> </ul> </div> <div style="width: 859px; height: 96%; border: 1px solid #5499d3; border-right: 0px; border-left-color:#EFF5FE; float: right;background-color: #84CCFF;"> <iframe id="SeexIframe" src="WindowConfig.aspx" name="RightPage" width="858px;" height="100%" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" style="vertical-align: top;"></iframe> </div> </div> </div> </form> </body> </html>
最近刚做的一个类似的，但差别有点大，不过可以参考下
收获园豆：15
其他回答(5)
-1
百度一下吧，或者你直接把你那个效果的页面d代码扣下来，学习学习
0
这些都是css样式可以改变的，所以不要什么控件
就是ul和一些a标签
0
这是是前台专门搞css和javascript做的事，另外一个说法就是前台设计的事情，按我来说，做公司内部的事情，外观要求不高，做外部的话，就有前台设计来做(美工人员)，虽然有时候我们也会让美工给我们设计一些外观，就像上一个楼主说的，ul下li下的a
0
1、Chrome或者FireFox下打开开发者工具（一般F12）看具体的代码；
2、用网站下载器。直接下载整个站点，运气好，能copy下来完整的该页面；
0
用框架就可以了。jquery好多。自己百度吧。只能帮你到这里了
