<%@ 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. redis的no-appendfsync-on-rewrite参数

    redis提供了两种持久化机制,rdb和aof. 关于aof的原理,类似于预写日志,不再解释.其中几个选项如下: appendfsync always:总是写入aof文件,并完成磁盘同步appendf ...

  2. 聊聊WPF中字体的设置

    1. 今天帮同事调试一个字体的bug:TextBox中的中文显示大小不一致, 比如包含"杰","热". 原因是WPF针对点阵字体需要指定特定字体才能正确渲染, ...

  3. Python网络编程中的select 和 poll I/O复用的简单使用

    首先列一下,sellect.poll.epoll三者的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select ...

  4. laravel的批量插入

    在日常开发中,用到批量插入的操作还是挺多的.记得很早很早以前,我还是在循环中写sql插入,结果被项目经理按在地上摩擦.好吧,性能这东西,用不到的时候还好,万一性能成为瓶颈,那代码优化,数据库优化就首当 ...

  5. 在Mac系统下如何恢复SourceTree全局忽略的文件

    在家目录“~”下编辑 “.gitignore_global ” 文件即可:vim  .gitignore_global

  6. 蓝桥杯 基础练习 BASIC-19 完美的代价

    基础练习 完美的代价   时间限制:1.0s   内存限制:512.0MB 问题描述 回文串,是一种特殊的字符串,它从左往右读和从右往左读是一样的.小龙龙认为回文串才是完美的.现在给你一个串,它不一定 ...

  7. (转)C# 特性（Attribute）详细介绍

    本文转载自:http://www.cnblogs.com/luckdv/articles/1682488.html 1.什么是Atrribute 首先,我们肯定Attribute是一个类,下面是msd ...

  8. git 学习 多个提交用同一个commit

    git add .git commit --amend(连续按连个ZZ)git push -f origin ibm_branch(命令行可能不好用,用IDEA force push好用)

  9. Ubuntu 下 ROS Kinetic 的安装

    安装环境为 Ubuntu 16.04 配置 Ubuntu 软件仓库 打开“设置”中的“软件和更新” 把 “restricted”.“universe” 和 “multiverse” 这三项勾上 勾完后 ...

  10. C Primer Plus学习笔记（二）- 数据和C

    从一个简单的程序开始 #include <stdio.h> int main(void) { float weight; float value; printf("Please ...