首页 新闻 搜索 专区 学院

如何实现asp.net效果,如图

0
悬赏园豆:15 [已解决问题] 解决于 2013-12-11 16:03

截图部分的效果是用什么控件来实现的呢,样式如何设置,知道的可以给个demo吗

GIS之家的主页 GIS之家 | 初学一级 | 园豆:59
提问于:2013-11-29 20:41
< >
分享
最佳答案
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
拾梦小侠ด้้้ | 小虾三级 |园豆:748 | 2013-11-30 23:45
其他回答(5)
-1

百度一下吧,或者你直接把你那个效果的页面d代码扣下来,学习学习

junjieok | 园豆:779 (小虾三级) | 2013-11-29 21:54
0

这些都是css样式可以改变的,所以不要什么控件

就是ul和一些a标签

gw2010 | 园豆:1399 (小虾三级) | 2013-11-30 00:11
0

这是是前台专门搞css和javascript做的事,另外一个说法就是前台设计的事情,按我来说,做公司内部的事情,外观要求不高,做外部的话,就有前台设计来做(美工人员),虽然有时候我们也会让美工给我们设计一些外观,就像上一个楼主说的,ul下li下的a

秋壶冰月 | 园豆:5450 (大侠五级) | 2013-11-30 01:01
0

1、Chrome或者FireFox下打开开发者工具(一般F12)看具体的代码;

2、用网站下载器。直接下载整个站点,运气好,能copy下来完整的该页面;

幻天芒 | 园豆:36594 (高人七级) | 2013-11-30 10:52
0

用框架就可以了。jquery好多。自己百度吧。只能帮你到这里了

高卿 | 园豆:8 (初学一级) | 2013-11-30 12:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册