1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@model PagedList<string>
 
<h5>Digg style:</h5>
@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="diggpager"})
<h5>meneame style:</h5>
@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="menepager"})
<h5>Flickr style:</h5>
@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="flickrpager"})
<h5>Black style:</h5>
@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="blackpager"})
<h5>Gray style:</h5>
@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="graypager"})
<h5>badoo style:</h5>
@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",ShowPageIndexBox = true,CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="badoopager"})
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}
 

/* digg style*/

div#diggpager {padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center}

div#diggpager a {border-right: #aaaadd 1px solid; padding-right: 5px; border-top: #aaaadd 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #aaaadd 1px solid; color: #000099; padding-top: 2px; border-bottom: #aaaadd 1px solid; text-decoration: none}

div#diggpager a:hover {border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid}

div#diggpager a:active {border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid}

div#diggpager span.current {border-right: #000099 1px solid; padding-right: 5px; border-top: #000099 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #000099 1px solid; color: #fff; padding-top: 2px; border-bottom: #000099 1px solid; background-color: #000099}

div#diggpager a.disabled {border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid}

/* meneame style*/

div#menepager {padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 3px; margin: 3px; color: #ff6500; padding-top: 3px;; text-align: center}

div#menepager a {border-right: #ff9600 1px solid; padding-right: 7px; background-position: 50% bottom; border-top: #ff9600 1px solid; padding-left: 7px; background-image: url(images/meneame.jpg); padding-bottom: 5px; border-left: #ff9600 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff9600 1px solid; text-decoration: none}

div#menepager a:hover {border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794}

div#menepager a:active {border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794}

div#menepager span.current {border-right: #ff6500 1px solid; padding-right: 7px; border-top: #ff6500 1px solid; padding-left: 7px; font-weight: bold; padding-bottom: 5px; border-left: #ff6500 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff6500 1px solid; background-color: #ffbe94}

div#menepager a.disabled {border-right: #ffe3c6 1px solid; padding-right: 7px; border-top: #ffe3c6 1px solid; padding-left: 7px; padding-bottom: 5px; border-left: #ffe3c6 1px solid; color: #ffe3c6; margin-right: 3px; padding-top: 5px; border-bottom: #ffe3c6 1px solid}

/*flickr style*/

div#flickrpager {padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px;; text-align: center}

div#flickrpager a {border: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; padding-left: 6px; padding-bottom: 2px;  color: #0061de; margin-right: 3px; padding-top: 2px; text-decoration: none}

div#flickrpager a:hover {border: #000 1px solid;background-image: none; color: #fff;background-color: #0061de}

div#flickrpager a:active {border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de}

div#flickrpager span.current {padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #ff0084; margin-right: 3px; padding-top: 2px}

div#flickrpager a.disabled {padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px}

/* black-red style*/

div#graypager{font-size: 11px; color: #fff; font-family: tahoma, arial, helvetica, sans-serif; background-color: #3e3e3e;text-align: center;padding:6px 0px}

div#graypager a {padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #3e3e3e; text-decoration: none}

div#graypager a:hover {color: #fff; background-color: #ec5210}

div#graypager a:active {color: #fff; background-color: #ec5210}

div#graypager span.current {padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #313131}

div#graypager a.disabled {padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #868686; padding-top: 2px; background-color: #3e3e3e}

/*black style*/

div#blackpager {padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 10px; margin: 3px; color: #a0a0a0; padding-top: 10px; background-color: #000; text-align: center}

div#blackpager a {border-right: #909090 1px solid; padding-right: 5px; background-position: 50% bottom; border-top: #909090 1px solid; padding-left: 5px; background-image: url(images/bar.gif); padding-bottom: 2px; border-left: #909090 1px solid; color: #c0c0c0; margin-right: 3px; padding-top: 2px; border-bottom: #909090 1px solid; text-decoration: none}

div#blackpager a:hover {border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(images/invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040}

div#blackpager a:active {border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(images/invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040}

div#blackpager span.current {border-right: #ffffff 1px solid; padding-right: 5px; border-top: #ffffff 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ffffff 1px solid; color: #ffffff; margin-right: 3px; padding-top: 2px; border-bottom: #ffffff 1px solid; background-color: #606060}

div#blackpager a.disabled {border-right: #606060 1px solid; padding-right: 5px; border-top: #606060 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #606060 1px solid; color: #808080; margin-right: 3px; padding-top: 2px; border-bottom: #606060 1px solid}

/*badoo style*/

div#badoopager {padding-right: 0px; padding-left: 0px; font-size: 13px; padding-bottom: 10px; color: #48b9ef; padding-top: 10px; font-family: arial, helvetica, sans-serif; background-color: #fff; text-align: center}

div#badoopager a {border-right: #f0f0f0 2px solid; padding-right: 5px; border-top: #f0f0f0 2px solid; padding-left: 5px; padding-bottom: 2px; margin: 0px 2px; border-left: #f0f0f0 2px solid; color: #48b9ef; padding-top: 2px; border-bottom: #f0f0f0 2px solid; text-decoration: none}

div#badoopager a:hover {border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid}

div#badoopager a:active {border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid}

div#badoopager span.current {border-right: #ff5a00 2px solid; padding-right: 5px; border-top: #ff5a00 2px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ff5a00 2px solid; color: #fff; padding-top: 2px; border-bottom: #ff5a00 2px solid; background-color: #ff6c16}

div#badoopager a.disabled {display: none}

div#badoopager input[type=text]{width:30px}

MvcPager 分页示例 — 应用CSS样式的更多相关文章

  1. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  2. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  3. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  4. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  5. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  6. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  7. HTML静态网页 css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  8. css 样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  9. HTML前端——CSS样式

    使用CSS样式的方式: HTML<!DOCTYPE> 声明标签 内链样式表<body style="background: green; margin: 0; paddin ...

随机推荐

  1. 通过字典传递django orm的filter功能

    class AppRightManageListView(ListView): template_name = 'rightmanage/list_apprightmanage.html' # mod ...

  2. IE常见兼容问题

    图片有边框 CSS 增加 border:0; border,在IE 模式下不算在宽度内;

  3. （1）php开篇常识

    一.php PHP由zend公司开发维护,目前最高版本PHP7.1,官网地址http://php.net/ PHP从5.5开始不支持XP,没有PHP6这个版本 PHP是嵌入到HTML的脚本代码,格式: ...

  4. 基于django rest framework的mock server实践

    网上找了一下mock server的实现,发现python的基本都是基于flask来实现的,因最近在学django,就尝试用drf实现了下: A brief introduction of sui_m ...

  5. Job的使用

    1.Job完成状态监听: job.addJobChangeListener(new JobChangeAdapter() {            @Override            publi ...

  6. Ubuntu下触控板手势调节软件xSwipe

    楼主进了一台Thinkpad T450s,触控板支持4点触控,安装了ubuntu14.04 LTS之后,触控板只剩下双指滑动了,略有不爽,各种google,百度. 真找到办法了. 首先得知了touch ...

  7. .Net解析html文档类库HtmlAgilityPack完整使用说明

    在前几篇文章中([搜房网房产数据采集程序demo--GeckoWebBrowser实例] )都有提到一个解析html的C#类库HtmlAgilityPack, 今天终于有时间整理一下,并把Demo分享 ...

  8. EDM邮件群发十大技巧提升邮件群发效果

    有很多人抱怨现在邮件群发没有什么效果,其实不然,每一种推广方式都有他的优势,没有看到效果说明你没有掌握好方法.个人觉得EDM邮件群发的优势在于传播速度快.不受地域限制.不受时间限制.邮件内容能够多元化 ...

  9. docker部署 自动测试脚本记录

    1 首先配置virtualenv, 并启动之,source py3env/bin/activate 2 安装各种必备包 ,如simplejson,chardet, configparser等 3 注意 ...

  10. sqlmap工具命令行的含义

    SQLMAP参数介绍 sqlmap的使用方式:python sqlmap.py [options]: sqlmap中一共有以下十六个选项卡: 帮助选项卡: Target(目标选项卡): Request ...