前端：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.cs" Inherits="UI.滑动门" %>

<!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>

　　<link rel="stylesheet" href="css/style.css" />

</head>

<body>

    <form id="form1" runat="server">

        <div class="solidBox">

            <h3 class="solidBox_title">

                <asp:ListView ID="ListTitle" runat="server">

                    <ItemTemplate>

                        <!--自定义模板-->

                        <strong runat="server" id="Title" class="">

                            <%#Eval("Title") %>

                        </strong>

                    </ItemTemplate>

                </asp:ListView>

            </h3>

            <div class="solidBox_content">

                <asp:ListView ID="ListContent" runat="server">

                    <ItemTemplate>

                        <!--自定义模板-->

                        <strong runat="server" id="Content">

                            <%#Eval("Content") %>

                        </strong>

                    </ItemTemplate>

                </asp:ListView>

            </div>

        </div>

    </form>

</body>

</html>

样式重置：

/*

 * 样式重置文件

 */

body,

div,

dl,

dt,

dd,

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

h6,

pre,

form,

fieldset,

input,

textarea,

p,

blockquote,

th,

td {

    margin:;

    padding:;

    font-weight: normal;

    font-style: normal;

    font-size: 12px;

    font-family: inherit;

}

table {

    border-collapse: collapse;

    border-spacing:;

}

fieldset,

img {

    border:;

}

address,

caption,

cite,

code,

dfn,

em,

strong,

th,

var {

    font-style: normal;

    font-weight: normal;

}

ol,

ul {

    list-style: none;

}

caption,

th {

    text-align: left;

}

h1,

h2,

h3,

h4,

h5,

h6 {

    font-size: 100%;

    font-weight: normal;

}

q:before,

q:after {

    content: '';

}

abbr,

acronym {

    border:;

}

a {

    color: #333;

    text-decoration: none;

}

a:hover {

    text-decoration: underline;

}

/*通用父子盒子嵌套浮动问题解决，开始*/

.clearfix:after {

    content: ".";

    display: block;

    height:;

    clear: both;

    visibility: hidden;

}

.clearfix {

    display: inline-block;

}

* html .clearfix {

    height: 1%;

}

.clearfix {

    display: block;

}

/*通用父子盒子嵌套浮动问题解决，结束*/

/*间隙层开始*/

.space_hx {

    /*横向间隙*/

    clear: both;

    width: 100%;

    height: 10px;

    font-size: 1px;

    overflow: hidden;

}

.space_zx {

    /*纵向间隙*/

    float: left;

    width: 10px;

    font-size: 1px;

    overflow: hidden;

}

/*间隙层结束*/

样式：

        .solidBox {

            width: 330px;

            height: 187px;

            margin: 20px;

            border-left: #CCCCCC 1px solid;

            overflow: hidden;

        }

            /*.solidBox .solidBox_title 中间空格是父子关系，以逗号隔开是同级关系*/

            .solidBox .solidBox_title {

                height: 30px;

                line-height: 30px;

            }

                .solidBox .solidBox_title div {

                    float: left;

                    /*变成块级元素*/

                    width: 109px;

                    height: 30px;

                    border: #CCCCCC 1px solid;

                    text-align: center;

                    border-left: none;

                    font: 16px "微软雅黑";

                    cursor: pointer;

                    /*cursor局部鼠标的样式*/

                }

                .solidBox .solidBox_title .hover {

                    background: #9D9D9D;

                    color: #FFF;

                }

            .solidBox .solidBox_content {

                padding: 5px;

                border: #CCCCCC 1px solid;

                border-left: none;

                border-top: none;

                height: 157px;

                width: 327px;

                overflow: hidden;

            }

后台：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

namespace UI

{

    public partial class 滑动门 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            DBind();

        }

        private void DBind()

        {

            SqlConnection conn = new SqlConnection("Server=.;database=Test;uid=sa;pwd=x");

            conn.Open();

            SqlCommand cmd = new SqlCommand("select * from huadongmen",conn);

            SqlDataReader reader = cmd.ExecuteReader();

            List<huadongmen> list = new List<huadongmen>();

            while (reader.Read())

            {

                huadongmen sb = new huadongmen();

                sb.Title = reader[].ToString();

                sb.Content = reader[].ToString();

                list.Add(sb);

            }

            reader.Close();

            conn.Close();

            ListTitle.DataSource = list;

            ListTitle.DataBind();

            ListContent.DataSource = list;

            ListContent.DataBind();

        }

    }

}
 

附上数据库脚本：

create database Test

go

use Test

create table huadongmen

(

    title varchar(20),

    content varchar(500)

)

go

insert into huadongmen values('标题一','这是标题一的内容')

insert into huadongmen values('标题二','这是标题二的内容')

insert into huadongmen values('标题三','这是标题三的内容')

update huadongmen set content='这是标题二的内容' where title='标题二'

select * from huadongmen

asp.net实现数据库版动态网页滑动门的更多相关文章

  1. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  2. Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  3. 转！！常用的4种动态网页技术—CGI、ASP、JSP、PHP

    1．CGI   CGI(Common Gateway Interface,公用网关接口)是较早用来建立动态网页的技术.当客户端向Web服务器上指定的CGI程序发出请求时,Web服务器会启动一个新的进程 ...

  4. python网络爬虫抓取动态网页并将数据存入数据库MySQL

    简述以下的代码是使用python实现的网络爬虫,抓取动态网页 http://hb.qq.com/baoliao/ .此网页中的最新.精华下面的内容是由JavaScript动态生成的.审查网页元素与网页 ...

  5. 静态网页VS动态网页

    干<沙朗新闻发布系统>什么时候.我们已经建立的网页.html的,并且.aspx,第一次接触.我认为这些东西是一样的,因为它,在观看ASP.NET视频的时候.听见里面讲课的老师有提到了这两样 ...

  6. JSP动态网页

    01.什么是服务器 02.什么是动态网页  动态网页是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根据某种条件的变化,返回不同的网页内容.可以让用户和服务器交互的网站 动态网站可以实现交互 ...

  7. 【Asp.net入门01】动态网站基础知识

    本节将介绍: 网站搭建流程 动态网站相关基础概念 网页的访问原理 使用浏览器访问网站是我们几乎天天在做的事情.以前我们只需要关注网页内容,作为网站开发人员,从现在开始我们要关注更深层次的东西了. 1. ...

  8. JSP／Servlet开发——第一章 动态网页基础

    1.动态网页:在服务端运行的使用程序语言设计的交互网页 : ●动态网站并不是指具有动画功能的网站,而是指网站内容可根据不同情况动态变更的网站(股票网站),一般情况下动态网站通过数据库进行架构. ●动态 ...

  9. JSP技术基础（动态网页基础）

    前言:如果说html为静态网页基础,那么jsp就是动态网页基础,两者的区别就是jsp在html的前面多加了几行而已.当然,jsp里面对java的支持度更高.要明白,js只是嵌入在客户端的小程序小脚本而 ...

随机推荐

  1. java 保留字符串数字的位数，不够前面补0

    @Test public void test() { this.printToConsole(autoGenericCode("10011")); this.printToCons ...

  2. win7系统下的飞秋发送文件失败问题

    飞秋发送文件失败这个问题大多数是由防火墙引起的1.检查windows自带的防火墙设置,在左侧的"允许程序通过windows防火墙"查看飞秋是否存在,不存在则增加之,公网.专网都勾选 ...

  3. WPF DataGrid 性能加载大数据

    WPF(Windows Presentation Foundation)应用程序在没有图形加速设备的机器上运行速度很慢是个公开的秘密,给用户的感觉是它太吃资源了,WPF程序的性能和硬件确实有很大的关系 ...

  4. MySQL 保留字

    ADD ALL ALTER ANALYZE AND AS ASC ASENSITIVE BEFORE BETWEEN BIGINT BINARY BLOB BOTH BY CALL CASCADE C ...

  5. Tern Sercer Tineout

  6. ORA-12541:TNS:no listener 客户端tnsnames.ora配置，以及服务端listener.ora配置

    需求:客户端(192.168.25.1)需要访问服务端(192.168.7.215)的Oracle库ORCL. 步骤一:配置客户端tnsnames.ora 步骤二:配置服务端listener.ora ...

  7. iOS - 如何切图适配各种机型

    关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...

  8. 113使用FOR做九九税法表-不知道为什么自己的编译器实现不了制表符

    package com.chongrui.test;/* *使用FOR做九九税法表 *  *  * */public class test {    public static void main(S ...

  9. *** $CI =& get_instance() 用法：关于CodeIgniter中get_instance() 函数

    使用场景: 注意 get_instance 的使用场景,这个方法并不是用在控制器中的.而是用在控制器外面,比如类库中,想操作 CI 超级对象的时候,超级对象实际上就是当前控制器的实例. 你随便下个CI ...

  10. 【web maven】新建的项目 controller也有，从前台跳转后台 无法找到对应的controller

    碰上很 愣的问题: 使用maven搭建项目完成,项目页面写好,实体.Dao.Service.Controller都有了,但是指定Controller中的某个方法中一直不能从前台进入后台 原因: 没有w ...