<%@ 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. canvas基础学习（四）

    今天逛天猫时,看见优衣库店铺首页有个这个飘雪效果,顿时觉得好酷炫,立马从里面copy代码进行学习. 之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom ...

  2. Codeforces Round #259(div2)C(数学期望)

    数学题. 关键是求最大值为k时有多少种情况,结果是kn-(k-1)n-1.可以这么想:每一次都从1至k里选,共kn种,这里需要再减去每一次都从1至k-1里面选的情况.当然也可以分类计数法:按出现几次k ...

  3. uva120 Stacks of Flapjacks （构造法）

    这个题没什么算法,就是想出怎么把答案构造出来就行. 思路:越大的越放在底端,那么每次就找出还没搞定的最大的,把它移到当前还没定好的那些位置的最底端,定好的就不用管了. 这道题要处理好输入,每次输入的一 ...

  4. LeetCode Maximum Length of Pair Chain

    原题链接在这里:https://leetcode.com/problems/maximum-length-of-pair-chain/description/ 题目: You are given n  ...

  5. redis 双写一致性问题

    首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用.在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作. 但是在更新缓存方面,对于更新完数据库,是更新缓存呢,还是删除缓存.又或者 ...

  6. Eclipse之Web工程探究以及格式化

    1. 关于部署 只要配置了Web Deployment Assembly,可以不需要手工拷贝引用jar到/WEB-INF/lib里面了,之前失败是因为引用工程的output路径有问题导致的,修改完成后 ...

  7. docker镜像的导入和导出

    启动命令 docker run -d -p 3000:80 twang2218/gitlab-ce-zh:9.0.3 docker run -d -p 8080:80 gitlab/gitlab-ce ...

  8. mina写入数据的过程

    mina架构图  写数据.读数据触发点: 写数据: 1.写操作很简单,是调用session的write方法,进行写数据的,写数据的最终结果保存在一个缓存队列里面,等待发送,并把当前session放入f ...

  9. Regexp：教程

    ylbtech-Regexp:教程 1.返回顶部 1. 正则表达式 - 教程 正则表达式(Regular Expression)是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符( ...

  10. xcode修改横屏

    1.修改工程属性 2.修改info.plist文件