hrabs 首页 新闻，快捷菜单，响应式列表，seliverlight

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="firstPage.aspx.cs" Inherits="HraWeb.firstPage" %>
<%@ Import Namespace="System.Data" %>

<!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 id="Head1" runat="server">
    <title></title>
    <style type="text/css" media="screen">
        .pricing_table
        {
            line-height: 65%;
            font-size: 12px;
            margin: 0 auto;
            width: 80%;
            max-width: 800px;
            padding-top: 10px;
        }
        
        .price_block
        {
            text-align: center;
            color: #fff;
            float: left;
            list-style-type: none;
            transition: all 0.25s;
            position: relative;
            box-sizing: border-box;
            margin-bottom: 10px;
            border-bottom: 1px solid transparent;
        }
        /*Price heads*/
        .pricing_table h5
        {
            text-transform: uppercase;
            padding: 5px 0;
            background: #333;
            margin: -10px 0 1px 0;
        }
        
        /*Price tags*/
        .price
        {
            display: table;
            background: #444;
            width: 100%;
            height: 70px;
        }
        .price_figure
        {
            font-size: 24px;
            text-transform: uppercase;
            vertical-align: middle;
            display: table-cell;
        }
        .price_number
        {
            font-weight: bold;
            display: block;
        }
        .price_tenure
        {
            font-size: 11px;
        }
        
        /*Features*/
        .features
        {
            background: #DEF0F4;
            color: #000;
        }
        .features li
        {
            padding: 8px 15px;
            border-bottom: 1px solid #ccc;
            font-size: 11px;
            list-style-type: none;
            height: 100%;
        }
        .price_block
        {
            width: 25%;
        }
        .footer
        {
            padding: 15px;
            background: #DEF0F4;
        }
        
        
        .price_block:hover
        {
            box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
            transform: scale(1.04) translateY(-5px);
            z-index: 1;
            border-bottom: 0 none;
        }
        .price_block:hover .price
        {
            background: linear-gradient(#DB7224, #F9B84A);
            box-shadow: inset 0 0 45px 1px #DB7224;
        }
        .price_block:hover h5
        {
            background: #222;
        }
        .price_block:hover .action_button
        {
            background: linear-gradient(#F9B84A, #DB7224);
        }
        
        @media only screen and (min-width : 480px) and (max-width : 768px)
        {
            .price_block
            {
                width: 50%;
            }
            .price_block:nth-child(odd)
            {
                border-right: 1px solid transparent;
            }
            .price_block:nth-child(4)
            {
                clear: both;
            }
        
            .price_block:nth-child(odd):hover
            {
                border: 0 none;
            }
        }
        @media only screen and (min-width : 768px)
        {
            .price_block
            {
                width: 25%;
            }
            .price_block
            {
                border-right: 1px solid transparent;
                border-bottom: 0 none;
            }
            .price_block:last-child
            {
                border-right: 0 none;
            }
        
            .price_block:hover
            {
                border: 0 none;
            }
        }
        #ReportEg
        {
            height: 50%;
            margin-top: 30px;
        }
        #QuickIoc a:hover
        {
            font-weight: 900;
            background: #c8c8c8;
        }
        #QuickIoc li
        {
            margin-left: 5%;
            float: left;
        }
        #QuickIoc a
        {
            display: inline-block;
            height: 100%;
            border: 0px;
            padding: 0px;
            margin: 0px;
        }
        .information
        {
            margin-left: 5%;
        }
        .Menuinformation li
        {
            float: left;
        }
     
    </style>
    <script type="text/javascript" src="./ReportEg/Visifire2.js"></script>
    <link href="/IndexCeshi/CSS/index.css" rel="stylesheet" type="text/css" />
    <link href="/IndexCeshi/CSS/link.css" rel="stylesheet" type="text/css" />
    <link href="/IndexCeshi/CSS/indexCss.css" rel="stylesheet" type="text/css" />
    <link href="menu/first.css" rel="stylesheet" type="text/css" />
    <link href="CSS/liquidcarousel.css" rel="stylesheet" type="text/css" />
    <link href="CSS/main.css" rel="stylesheet" type="text/css" />
    <link href="CSS/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="CSS/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.liquidcarousel.pack.js" type="text/javascript"></script>
    <script src="/Scripts/tabs.js" type="text/javascript"></script>
    <script src="Scripts/jquery.newsTicker.js" type="text/javascript"></script>
</head>
<body>
    <form>
    <div class="maincon">
        <div class="box box1">
            <div class="box_h2">
                <ul>
                    <li class="on"><a href="#"><span>正在处理的任务</span></a></li>
                </ul>
            </div>
            <div class="box_con">
                
    <div class="green">
        <div class="container">
            
                
                    <div  class="scrollNews">
                        <ul id="nt-example1">
                            <li>市场历史数据已导入完毕.. <a href="#">详情</a></li>
                            <li>路透资讯数据已完成更新.. <a href="#">详情</a></li>
                            <li>交易合约盈亏最新更新.. <a href="#">详情</a></li>
                            <li>建设银行，厦门分行交易员KSBC002远期利率交易有50比数据等待你的审批，请尽快... <a href="#">详情</a></li>
                           </ul>
                    </div>
            
            
        </div>
    </div>
    <div id="liquid" class="liquid" >
    <span class="previous"></span>
    <div class="wrapper" >
        <ul>
            <li><a href="#" title="image 05"><img src="images/D_data.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;1</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_manage.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;2</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_system.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;3</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_deploy.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;4</Lable></li>
              <li><a href="#" title="image 05"><img src="images/D_data.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;5</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_manage.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;6</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_system.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;7</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_deploy.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;8</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_data.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;9</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_manage.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;10</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_system.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;11</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_deploy.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;12</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_system.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;13</Lable></li>
            <li><a href="#" title="image 05"><img src="images/D_deploy.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable>&nbsp;&nbsp;&nbsp;14</Lable></li>

</ul>
    </div>
    <span class="next"></span>
</div>
                        <span class="date"></span>
                <p>
                    <a></a>
                </p>
            </div>
        </div>
        <div class="box box1">
            <div class="box_h2 tmpbox">
                <ul>
                    <li class="on" id=‘l1‘><a href="javascript:void(0);" onclick="showDiv(‘xianc‘,3,‘l1‘)">
                        <span>上海银行间同业拆借利率</span></a></li>
                    <li id=‘l2‘><a onclick="showDiv(‘djs‘,9,‘l2‘);" href="javascript:void(0)"><span>人民币汇率中间价</span></a></li>
                </ul>
            </div>
            <div class="box_con tmptoatal" style="padding-left: 3%">
                <ul id="infoTitleW">
                    <li style="margin-left: 70%; margin-top: 2px; font-size: 10px;">
                        <%=infoTitleW%>
                        09:30:00 </li>
                </ul>
                <div id="content">
                    <%=MKT%>
                </div>
                
              <ul class="ull02" style="display: none" id="djs">
                    <div style="width: 100%; min-width: 240px; overflow-x: hidden; overflow-y: hidden;">
                        <iframe id="RMBCentralParity" name="RMBCentralParity" scrolling="no" marginheight="0"
                            marginwidth="0" src="http://www.chinamoney.com.cn/static/html/column/frontpage/baseprice/rmbcentralparity/RMBCentralParity.html"
                            frameborder="0" height="200" width="290"></iframe>
                    </div>
                </ul>
                <ul class="ul02" style="display: none" id="zs">
                </ul>
                <p>
                    <a></a>
                </p>
            </div>
        </div>
        <div class="box box1">
            <div class="box_h2">
                <ul>
                    <li class="on"><a href="#"><span>受理统计</span></a></li>
                </ul>
            </div>
            <div class="box_con" style="height: 100%;">
                <div class="box box1">
                    <div id="VisifireChart1" style="margin-bottom:10px; margin-top:8px">
                    </div>
                    <script language="javascript" type="text/javascript">

var widthOfChart = window.screen.width*0.35;
                        var heightOfChart = 350;
                        var dataXml = "";
                        dataXml += "<vc:Chart xmlns:vc=‘clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts‘ Width=‘"+widthOfChart+"‘ Height=‘"+heightOfChart+"‘ Theme=‘Theme1‘ BorderThickness=‘0‘ View3D=‘False‘ Watermark=‘False‘ ScrollingEnabled=‘False‘>";
                        dataXml += "<vc:Chart.Titles><vc:Title Text=‘分析图2‘/></vc:Chart.Titles>";
                        dataXml += "<vc:Chart.AxesX><vc:Axis Title=‘直方图横坐标‘><vc:Axis.AxisLabels> <vc:AxisLabels Enabled=‘false‘ Angle=‘45‘ /></vc:Axis.AxisLabels></vc:Axis></vc:Chart.AxesX>";
                        dataXml += "<vc:Chart.AxesY><vc:Axis Title=‘频数值‘ /></vc:Chart.AxesY>";
                        dataXml += "<vc:Chart.Series>";
                        dataXml += "<vc:DataSeries LegendText=‘‘ RenderAs=‘Column‘ LabelEnabled=‘true‘ LabelStyle=‘OutSide‘ Cursor=‘Hand‘>";
                        dataXml += "<vc:DataSeries.DataPoints>";
                        <%foreach (DataRow row in vChartDataSet.Tables[0].Rows){%>
                        
                        dataXml += "<vc:DataPoint AxisXLabel=‘" + <%=row["Tick_Value"].ToString()%> + "‘ YValue=‘" + <%=row["Frequency_Value"].ToString()%> + "‘/>";
                        <% }%>
                        dataXml += "</vc:DataSeries.DataPoints>";
                        dataXml += "</vc:DataSeries>";

dataXml += "</vc:Chart.Series>";
                        dataXml += "</vc:Chart>";
                        dataXml += "";
                        var width = $("#json").width();
//                        alert(widthOfChart+","+heightOfChart);
//

if (typeof (dataXml) != "undefined") {
                            var vChart = new Visifire2(‘/SL.Visifire.Charts.xap‘, widthOfChart,heightOfChart);
                            vChart.setDataXml(dataXml);
                            vChart.render(‘VisifireChart1‘);
                        }
                    </script>
                </div>
            </div>
        </div>
        <div class="box box1">
            <div class="box_h2">
                <ul>
                    <li class="on"><a href="#"><span>收益率曲线</span></a></li>
                </ul>
            </div>
            <div class="box_con" id="ReportEg">
                <table id="jqYiel">
                </table>
                <div id="gridPager1">
                </div>
                <script language="javascript" type="text/javascript">
                        
                    $("#jqYiel").jqGrid({
                        url: "/MKT/MktYieldCurveDataManage.aspx?_method=search",
                        datatype: "json",
                        width: "90%",
                        height: "50%",
                        autowidth: true,
                        
                        colNames: ["收益率曲线名称", "情景名称", "日期", "期限名称", "收益率", "序号"],
                        colModel: [
                            { name: ‘YieldRateCurveName‘, index: ‘YieldRateCurveName‘,width:600, sortable:false},
                            { name: ‘StressTestCaseName‘, index: ‘StressTestCaseName‘,width:500, frozen: true, sortable:false},
                            { name: ‘MktYieldCurveDate‘, index: ‘MktYieldCurveDate‘, width:300, formatter: "date", formatoptions: { newformat: ‘Y-m-d‘ } },
                            { name: ‘TermName‘, index: ‘TermName‘, frozen: true,sortable:false },
                            { name: ‘YieldRate‘, index: ‘YieldRate‘ },
                            { name: ‘Sequence‘, index: ‘Sequence‘}                   
                        ],
                        sortname: ‘Id‘,
                        viewrecords: true,
                        rowNum: 13,
                        rowList: [5,10,15],
                        pager: "#gridPager1",
                    }).navGrid(‘#gridPager1‘, { edit: false, add: false, del: false })
                </script>
            </div>
        </div>
        <div class="clear">
            &nbsp;</div>
    </div>
    <script>
        //---------------------------------设置自动滚动新闻-----------------------------------------------------------
        $(‘a[href*=#]‘).click(function (e) {
            var href = $.attr(this, ‘href‘);
            if (href != "#") {
                $(‘html, body‘).animate({
                    scrollTop: $(href).offset().top - 81
                }, 500);
            }
            else {
                $(‘html, body‘).animate({
                    scrollTop: 0
                }, 500);
            }
            return false;
        });

$(window).load(function () {
            $(‘code.language-javascript‘).mCustomScrollbar();
        });

var nt_example1 = $(‘#nt-example1‘).newsTicker({
            row_height: 20,
            max_rows: 3,
            duration: 1500
        });

//--------------------------自动滚动新闻设置结束--------------------------------------------------------------------
        function showDiv(id, status, l) {
            $(".tmptoatal ul").hide();
            $("#" + id).show();
            if (id == "xianc") {
                $(".features").show();
                $("#infoTitleW").show();
            }
            $("#more").attr("href", "ToDoView.aspx?Status=" + status);
            $(".tmpbox li").removeClass("on");
            $("#" + l).addClass("on");

}
        function showDetail(url) {
            window.parent.PICKER.offset.max = true;
            url = UTIL.getAppRoot() + url;
            window.parent.PICKER.open(url, null, null, 800, 500);
        }
        //判断浏览器的Method
        function getOs() {

var OsObject = "";
            if (navigator.userAgent.indexOf("MSIE") > 0) {
                return "MSIE"; //IE
            }
            if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
                return "Firefox"; //Firefox
            }
            if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {
                return "Safari"; // google
            }
            if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {
                return "Camino";
            }
            if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {
                return "Gecko";
            }
        }

function setIconStyle() {
            var osType = getOs();
            var iconImageList = document.getElementsByTagName("img");
            if (iconImageList != null) {
                for (i = 0; i < iconImageList.length; i++) {
                    if (iconImageList[i].name == ‘iconImage‘) {
                        if (‘Firefox‘ == osType || ‘Safari‘ == osType) {
                            iconImageList[i].style.marginTop = "6px";
                        }
                        if (‘MSIE‘ == osType) {
                            iconImageList[i].style.marginTop = "6px";
                        }
                    }
                }
            }
        }

setIconStyle();
        function Open(text, url, height) {

if (parent.$(‘#tabs‘).tabs(‘exists‘, text)) {
                parent.$(‘#tabs‘).tabs(‘select‘, text);
            } else {
                parent.$(‘#tabs‘).tabs(‘add‘, {
                    title: text,
                    closable: true,
                    content: createTabContent(url),
                    url: url
                });
            }
        }
        //滚动新闻
        function scrollNews() {
            var $news = $(‘div.scrollNews>ul‘);
            var $lineHeight = $news.find(‘li:first‘).height();
            $news.animate({ ‘marginTop‘: -$lineHeight + ‘px‘ }, 600, function () {
                $news.css({ margin: 0 }).find(‘li:first‘).appendTo($news);
            });
        }
        $(function () {
            var height = $(‘div.scrollNews>ul‘).find(‘li:first‘).height() * 3;
//            alert(height);
            $(‘.container‘).height(height);
            var scrollTimer = null;
            var delay = 1500;
            //1.鼠标对新闻触发mouseout事件后每2s调用scrollNews()
            //2.鼠标对新闻触发mouseover事件后停止调用scrollNews()
            //3.初次加载页面触发鼠标对新闻的mouseout事件
            $(‘div.scrollNews‘).hover(function () {
                clearInterval(scrollTimer);
            }, function () {
                scrollTimer = setInterval(function () {
                    scrollNews();
                }, delay);
            }).triggerHandler(‘mouseout‘);

$("#relaod").click(function () {
                var url = "firstPage.aspx?_method=getHtml";
                $.post(url, function (data) {
                    $("#content").html(data);
                });
            })
            $(‘#liquid‘).liquidcarousel({
                height: 150,     //the height of the list
                duration: 100,     //the duration of the animation
                hidearrows: true    //hide arrows if all of the list items are visible
            });
            $(".wrapper").width($(".wrapper").width() - 1);
            $(".wrapper ul li").width($(".wrapper ul li").width() - 1);
            $(".wrapper ul li a img").click(function () {
                var height = ComputGridHeight(100);
                parent.$(‘#tabs‘).height(height);
                parent.$(‘#tabs‘).width(height);
                var url = $(this).attr("src").split(‘/‘)[1];

switch (url) {
                    case "D_data.png": Open("ABC1", "/BAS/BasGlobalTimeZoneManage.aspx", height);
                        break;
                    case "D_deploy.png": Open("ABC2", "/BAS/BasBusinessRegionManage.aspx", height);
                        break;
                    case "D_manage.png": Open("ABC3", "/BAS/BasContractTypeManage.aspx", height);
                        break;
                    case "D_system.png": Open("ABC4", "/BAS/BasSceneTypeManage.aspx", height);
                        break;
                }

});
        });

</script>
    </form>
</body>
</html>

时间： 2024-10-10 02:13:02

hrabs 首页 新闻，快捷菜单，响应式列表，seliverlight的相关文章

第四课 开发uehtml官网响应式静态页面

概况:整站布局.头部菜单响应式设置.最新消息模块变化.内容模块四三二响应式变化. 伪类选择器: E:nth-of-type(n)  表示E父元素中的第n个字节点,且类型为E      E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算      只匹配在下标出现的选择器 E:nth-child(n)  表示E父元素中的第n个字节点      p:nth-child(odd){background:red}/*匹配奇数行*/      p:nth-ch

css3 flex流动自适应响应式布局实例 转

转自:http://www.tuicool.com/articles/auEbMzU   感谢他的分享, 一.图片自适应居中 实例图: 实例HTML: <div class="demo"> <img src="http://dummyimage.com/100x100" alt=""> </div> <div class="demo"> <img class="&

2015.3.14（知乎首页仿写及纯CSS兼容IE6实现响应式下拉菜单）

昨晚写了一个知乎的首页练习,只完成了上半部分的练习.下半部分做了一个纯CSS的响应式下拉菜单(可以兼容IE6). 可以看出那个知乎两个大字下面的那行字是截图截下来的,有一点色差……代码如下: js的部分只用到了获取可视区域的宽度这一点. function setIndex() { var commonWidth = $(window).outerWidith; var commonWidth = $(window).outerHeight; $(".backTitle").css(&q

响应式WEB设计：将导航菜单转换成下拉菜单以适应小屏幕设备

移动互联网时代的到来,使得我们在进行页面设计与开发时,应当根据用户行为以及设备环境(系统平台.屏幕尺寸)进行相应的响应和调整,这个理念也叫响应式WEB设计.今天我将给大家讲解当屏幕尺寸变小时,将横向菜单转换成下拉菜单的效果. 本文使用了HTML5标签以及CSS3技术,您在查看demo时需要您的浏览器支持HTML5和CSS3,建议使用Chrome,Firefox或者IE9等现代浏览器. HTML <nav> <ul> <li><a href="/"

CSS：响应式下的折叠菜单(条纹式)

原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单 之前,我写了一篇关于怎么制作响应式的移动导航的教程.现在,我发现了一个新技巧,不用使用JavaScript就能实现响应式菜单,而是使用HTML 5清晰的语义标记. 这个菜单能居左.居中和居右对齐,不像之前文章提到的菜单需要靠点击在显示和隐藏之间进行切换.它也有一个标记显示激活/当前菜单项,并且它能作用在所有移动平台和包括I

纯css3开发的响应式设计动画菜单（支持ie8）

这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式显示.效果相当的好. 点击这里在线预览 下面贴出实现这功能的源代码,这是一个纯用css3实现的菜单 html代码: <div class="container"> <!--[if lte IE 8]> <style> .iconicmenu > l

BootStrap实现简单响应式导航菜单

用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明.   先上代码,是一个很简单的Demo. <!doctype html> <html> <head> <head> <meta charset = "utf-8"/> <meta name = "viewport" content = "width-device=width,initial = 1.0"/>

CSS3响应式滑动菜单

详细内容请点击 今天我们要来分享一款基于CSS3的响应式滑动菜单,该菜单有两个特点:1.响应式布局,这就意味着随着页面大小的变化,菜单的布局也会发生自适应变化,特别适合在移动设备上使用.2.鼠标滑过动画,鼠标滑过菜单项时可以渐变滑动,动画效果还不错.  在线演示源码演示 学习来源:http://www.html5tricks.com/css3-responsive-slider-menu.html 更多html5内容请点击

响应式布局---菜单

一个简单的响应式菜单,仅使用@media query实现. 上图的作用就是将普通的菜单在缩小浏览器屏幕到一定宽度,或者是在移动设备上的显示效果.现在分步进行实现: 第一步:先构建一个普通的菜单,具体显示如图: 结构如下: <nav class="nav"> <ul> <li class="current"><a href="#">Portfolio</a></li> <