<%@ 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. hdu-1863-畅通工程(kruskal算法模板)

     题目链接 /* Name:hdu-1863-畅通工程 Copyright: Author: Date: 2018/4/18 10:19:03 Description: kruskal算法 */ #i ...

  2. c# Http请求之HttpClient

    利用HttpClient进行Http请求,基于此,简单地封装了下: using System; using System.Collections.Generic; using System.Colle ...

  3. Rebranding（字母代换）

    个人心得:题目意思就是每次给出可以互换的字母,如果每次命令的时候就执行的话一定会超时. 所以我就是将输入的字母从a到z的数目和路径依次保存,再建立一个book数组表示字母现在所指的字母 ,一开始就直接 ...

  4. [BZOJ1797][AHOI2009]最小割Mincut

    bzoj luogu sol 一条边出现在最小割集中的必要条件和充分条件. 先跑出任意一个最小割,然后在残余网络上跑出\(scc\). 一条边\((u,v)\)在最小割集中的必要条件:\(bel[u] ...

  5. python sentence

    1.while for 增加了循环正常结束后执行的else代码块. 2.Objects are mutable 3.import copy p1 = Point() p2=copy.copy(p1) ...

  6. sntp协议简介

    SNTP(Simple Network Time Protocal简单网络时间协议),用于跨广域网或局域网同步时间的协议,具有较高的精确度(几十毫秒).SNTP是NTP协议的简化版,两者分别在RFC1 ...

  7. JavaEE中的Cookie的基本使用方法

    之前一直使用的是统一登录系统,相关的登录由别的部门开发以及维护.但由于最近项目的需要,我们需要自己开发一套简单的登录功能.因此这里就涉及到了一个Cookie的功能.之前也了解过相关的内容,但这次需要独 ...

  8. JAVA方法中的参数用final来修饰的效果

    很多人都说在JAVA中用final来修饰方法参数的原因是防止方法参数在调用时被篡改,其实也就是这个原因,但理解起来可能会有歧义,我们需要注意的是,在final修饰的方法参数中,如果修饰的是基本类型,那 ...

  9. md5加密（2）

    package test1; import java.security.MessageDigest; public class MD5Test { //十六进制下数字到字符的映射数组 private ...

  10. python web框架 Django基本操作

    django 操作总结! django框架安装: cmd安装: pip3 install django pycharm安装: 在python变量下 搜索 django 安装 创建django项目: c ...