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="data:images/D_data.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 1</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_manage.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 2</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_system.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 3</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_deploy.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 4</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_data.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 5</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_manage.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 6</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_system.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 7</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_deploy.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 8</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_data.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 9</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_manage.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 10</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_system.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 11</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_deploy.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 12</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_system.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 13</Lable></li>
<li><a href="#" title="image 05"><img src="data:images/D_deploy.png" width="88" height="100" alt="image 05" border="0" /></a><br/><Lable> 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">
</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>
hrabs 首页 新闻，快捷菜单，响应式列表，seliverlight的更多相关文章
- 第四课 开发uehtml官网响应式静态页面
概况:整站布局.头部菜单响应式设置.最新消息模块变化.内容模块四三二响应式变化. 伪类选择器: E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E E:nth-la ...
- CSS5:移动端页面(响应式)
CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做只有一些新闻站点 ...
- .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...
- 使用media Queries实现一个响应式的菜单
Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- media Queries实现一个响应式的菜单
使用media Queries实现一个响应式的菜单 Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一 ...
- 【唯星宠物】——CSS/BootStrap/Jquery爬坑之响应式首页
前言:唯星宠物产品官网,分为首页.子页和登录注册页三个页面,除网页内容设计与图片素材的部分使用网上的材料之外,其余内容呈现以及功能模块全部为自己重构. 一.响应式轮播banner 思路:使用BootS ...
- 纯css3开发的响应式设计动画菜单（支持ie8）
这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...
- 纯css3响应式3d翻转菜单
前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...
随机推荐
- 使用LINQ获取List列表中的某个字段值
使用LINQ获取列表中的某个字段值,下面以获取员工列表中的编号字段为例子. 1.使用Select方法 List<Emplayee> emplayeeList = GetEmplayeeLi ...
- 【thrift】thrift入门初探--thrift安装及java入门实例
转载:https://www.cnblogs.com/fingerboy/p/6424248.html 公司的一些平台服务框架底层封装了thrift提供服务,最近项目不是很紧,于是研究了一下,刚刚入门 ...
- gqlgen golang graphql server 基本试用
gqlgen golang 的graphql server 具体代码参考https://github.com/rongfengliang/gqlgen-demo 特点 模型优先 类型安全 代码生成 安 ...
- cocos2dx Scene,Layer,Sprite的理解
layer,scene,sprite的默认锚点都是0.5,0.5 三者都继承自Node节点,暂时没看出有什么区别,或者下面的话是对的吧. 在cocos2d-x中,一个应用可以有多个scene,但任何时 ...
- 在 Linux redis 验证交互连接过程中遇到 redis Could not connect to Redis at 127.0.0.1:6379: Connection refused 的解决方法
Could not connect to Redis at 127.0.0.1:6379: Connection refused 1.找到redis.conf 并修改 daemonize no 为 d ...
- 不同复制模式下，如何忽略某些binlog事件
在MySQL复制中,如果slave节点上遇到错误,比如数据不存在或者主键冲突等错误时,想要忽略这些错误,可以采用以下几种方法: 1.未启用GTID模式时 只需通过设定 SQL_SLAVE_SKIP_C ...
- [DP题]放苹果
放苹果(DP做法) 描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法.输入第一行是测试数据的数目t(0 < ...
- servlet配置及其生命周期
servlet配置: 在web.xml中,首先向服务器注册一个servlet.在<servlet>标签下 给定一个servlet名字,这个servlet-name是我们自己用的,方便我们用 ...
- 事务的ACID和四个隔离级别
在实际的业务场景中,并发读写引出了和事务控制的需求.优秀的事务处理能力是关系型数据库(特别是oracle等商用RDBMS)相对于正当风口的NoSQL数据库的一大亮点.但这也从另一方面说明了事务控制的复 ...
- LR-IE录制设置
ie浏览器去掉启用第三方浏览器扩展,路径. ie浏览器-工具-internet选项-高级,在列表中找到“启用第三方浏览器扩展” 把钩去掉 . 启动loadrunner11,按键盘F4,在brows ...