<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        ul, li {
            margin: 0;
            padding: 0;
        }

.biaoti {
            border: 1px solid red;
            color: red;
            margin-top: 10px;
            height: 40px;
        }

ul {
            margin-top: 0.1px;
            list-style: none;
            height: 100%;
        }

ul li {
           
                text-align: center;
                list-style-type: none;
                margin-left: -1px;
                float: left;
                padding-left: 0px;
                border: 1px solid #0094ff;
                height: 100%;
                width: 16.5%;
            }

#left {
            border: 1px solid #0094ff;
            width: 80%;
            float: left;
            height: 40px;
        }

#right {
            margin-left: 80%;
            border: 1px solid #000000;
            width: 20%;
            height: 40px;
        }

.direction {
            height:50%;
            border-bottom: 1px solid #ff00dc;
        }
    </style>
        <script type="text/javascript">
        $(function () {
            alert(1);
            $("#right .direction").eq(0).on("click", function () {
               // alert("up");
                if (pageIndex < pages) {
                    pageIndex++;
                    changeNum();
                }
            })
            $("#right .direction").eq(1).on("click", function () {
                //alert("down");
                if (pageIndex > 1) {
                    pageIndex--;
                    changeNum();
                }
            })
        });
        function changeNum() {

var startRecord = (pageIndex - 1) * pageSize + 1;
            var endRecord = pageIndex * pageSize;
            var newHtml = "";
            newHtml+="<ul>"
            for (var i = startRecord; i <= endRecord; i++) {
                if (i > rows) { break;}
                newHtml+="<li ><div style=\"margin-top:5%\">"+i+"</li>"
            }
            newHtml+="</ul>"
            $("#left").html(newHtml);
        }
       
        var pageIndex = 1;
        var pageSize = 6;
        var rows = 31;
        var pages = Math.floor((rows - 1) / pageSize) + 1;
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div style="height: 100%;">
            <div class="biaoti">

<div id="left">
                    <ul>
                        <li ><div style="margin-top:5%">01</div></li>
                        <li><div style="margin-top:5%">02</div></li>
                        <li><div style="margin-top:5%">03</div></li>
                        <li><div style="margin-top:5%">04</div></li>
                        <li><div style="margin-top:5%">05</div></li>
                        <li><div style="margin-top:5%">06</div></li>
                    </ul>
                </div>

<div id="right">
                    <div class="direction" style="background:#0094ff">
                        <div style="text-align: center;">+</div>
                    </div>
                     <div class="direction" style="background:#808080">
                        <div style="text-align: center;">-</div>
                    </div>
                   <%-- <div class="direction">
                        <div style="text-align: center;">down1</div>
                    </div>--%>
                </div>

</div>

<div class="biaoti">
                <ul>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                </ul>
            </div>
        </div>
    </form>
</body>
</html>

没事写写css的更多相关文章

  1. LOJ 10155 - 「一本通 5.2 例 3」数字转换

    前言 从现在开始,这个博客要写一些题解了.起初,开这个博客只是好玩一样,没事就写写CSS.JS,然后把博客前端搞成了现在这个样子.以前博客只是偶尔记录一些东西,刷题也从来不记录,最近受一些学长的影响, ...

  2. 一个五年 Android 开发者百度、阿里、聚美、映客的面试心经

    花絮 也许会有人感叹某些人的运气比较好,但是他们不曾知道对方吃过多少苦,受过多少委屈.某些时候就是需要我们用心去发现突破点,然后顺势而上,抓住机遇,那么你将会走向另外一条大道,成就另外一个全新的自我. ...

  3. 《IT蓝豹》挑战独立开发项目能力

    做了5年的android开发,今天没事写写刚入行不久的时候第一次独立开发项目的心得体会,    当时我刚工作8个月,由于公司运营不善倒闭了,在2011年3月份我开始准备跳槽,    看了一周andro ...

  4. oracle、mysql、sql server等；流行数据库的链接驱动配置

    系统的写博客的时间不多,但是还想一直写来坚持,就没事写写积累下来的知识点吧 #ORACLE #jdbc.driver=oracle.jdbc.driver.OracleDriver#jdbc.url= ...

  5. 二分查找法 java

    前几天去面试,让我写二分查找法,真是哔了狗! 提了离职申请,没事写写吧! 首先二分查找是在一堆有序的序列中找到指定的结果. public class Erfen { public static int ...

  6. 工作的准备：atoi，itoa，strcpy，memcpy，strcmp，二分查找,strcat

    对常见的几个函数,周末没事写写,绝对是笔试面试中非频繁,前面n届学长无数次强调了,大家就别怀疑了.从今天开始,每天10道题. int atoi(const char* str) { if(str==N ...

  7. xcode 执行时模拟器不可选的问题

    好久没写博客了,上一次是什么时候都想不起来了. 之前总认为脑袋记住了,用过了就能够了,干嘛要写博客,简直浪费时间.事实上没事写写博客优点还是挺多的.这样既能够对自己用过的和学到的东西做一个总结,也能提 ...

  8. Python集成开发环境(Eclipse+Pydev)

    刚開始学习python,就用Editplus, Notepad++来写小程序, 后来接触了Sublime Text2.认为很不错,没事写写代码.就用编辑器Sublime Text2,最好再配搭一个ap ...

  9. 屌丝程序猿赚钱之道之taobao 2

    续上篇,之前写的案例,都是比較0基础的. 案例4:  代写情书.软文.论文等等. 这是我一个同学的真实故事.     我隔壁寝室的小王平时没事就爱谢谢博客.逛逛论坛.大二的时候接触了威客网,開始在网上 ...

随机推荐

  1. poj2263 zoj1952 Heavy Cargo(floyd||spfa)

    这道题数据范围小,方法比较多.我用floyd和spfa分别写了一下,spfa明显有时间优势. 一个小技巧在于:把城市名称对应到数字序号,处理是用数字. 方法一:spfa #include<ios ...

  2. UVA - 11014 Make a Crystal (莫比乌斯反演)

    给定一个n*n*n的立方体(中心点为原点O),选择尽量多的点,使得对于任意两点A,B,B不在线段OA上. 可以发现,原问题可转化为三维坐标下的点(x,y,z)中有多少个点的gcd(x,y,z)=1. ...

  3. C#面向对象（一）：明确几个简单的概念作为开胃菜

    绝对干货,总结了下C#面向对象的干货内容以及我几年来的使用心得,分享出来 先明确几个简单概念作为开胃菜: 1.命名空间 namespace BackStageManagement.Services 关 ...

  4. Cloudera API访问

    多租户管理页面(admin)操作 cloudera 管理页面页面操作多租户是这样的: 进入到YARN的服务页面,点击Resource Pool,你将会看到已经存在的资源池,然后再点击资源池表格右上角的 ...

  5. cpu高的问题的快速定位

    功能问题,通过日志,单步调试相对比较好定位. 性能问题,例如线上服务器CPU100%,如何找到相关服务,如何定位问题代码,更考验技术人的功底. 58到家架构部,运维部,58速运技术部联合进行了一次线上 ...

  6. MSSQL Join的使用

    假设我们有下面两张表.表A在左边,表B在右边.我们给它们各四条记录. id name id name -- ---- -- ---- 1 Pirate 1 Rutabaga 2 Monkey 2 Pi ...

  7. java中i/o练习

    总结: FileInputStream fis; int length; while((length=fis.read(b,0,b.length))!=-1){ output.write(b,0,le ...

  8. L2-022. 重排链表

    L2-022. 重排链表 时间限制 500 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定一个单链表 L1→L2→...→Ln-1→Ln,请 ...

  9. mybatis学习7 实战项目

    自己写一个实战项目,最好和hibernate做对比.

  10. CSS3新特性详解

    本文讲解CSS3相关实用知识点 CSS3相关实用知识点目录 边框设置 颜色设置 背景设置 渐变使用 超出文本设置 阴影设置 CSS3变换设置 过渡设置 动画设置 多列布局 BoxSizing设置 弹性 ...