<%@ 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. nyoj-1132-promise me a medal(求线段交点)

    题目链接 /* Name:nyoj-1132-promise me a medal Copyright: Author: Date: 2018/4/26 20:26:22 Description: 向 ...

  2. C#进阶之路（一）：委托

    一.什么是委托 简单说它就是一个能把方法当参数传递的对象,而且还知道怎么调用这个方法,同时也是粒度更小的“接口”(约束了指向方法的签名). 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方 ...

  3. Unity Shader 创建程序纹理贴图

    创建一个脚本 附加到一个游戏体上 using UnityEngine;using System.Collections; public class ProceduralTexture : MonoBe ...

  4. Python函数-bytearray()

    bytearray([source [, encoding [, errors]]]) bytearray([source [, encoding [, errors]]])返回一个byte数组.By ...

  5. hl7消息中和时间有关的字段的格式

    hl7消息中有许多segment(段)包含时间类型的Field.常用的MSH, EVN, PID中的时间字段及其格式为: 1. MSH-7, Date/time Of Message为yyyyMMdd ...

  6. （1）java8初体验

    很多博客都拿Comparator,我也贴一下吧. java8以前的匿名内部类用来排序. //匿名内部类 @Test public void java8Test() { Person p1 = new ...

  7. 聊聊基于Lucene的搜索引擎核心技术实践

    最近公司用到了ES搜索引擎,由于ES是基于Lucene的企业搜索引擎,无意间在“聊聊架构”微信公众号里发现了这篇文章,分享给大家. 请点击链接:聊聊基于Lucene的搜索引擎核心技术实践

  8. 获得Oracke中刚插入的ID ---> GetInsertedID()

    (1)首先 需要创建序列: CREATE SEQUENCE SE_TD_POWER MINVALUE 1 NOMAXVALUE START WITH 1 INCREMENT BY 1 NOCYCLE ...

  9. Day3(1)linux文件系统及文件类型

    Linux的文件系统 根文件系统(rootfs) root filesystem LSB,FHS:(FileSystem Heirache Standard) /etc,/usr,/var,/root ...

  10. POJ 3624 Charm Bracelet（01背包模板）

    Charm Bracelet Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 45191   Accepted: 19318 ...