asp.net实现数据库版动态网页滑动门
前端:
<%@ 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实现数据库版动态网页滑动门的更多相关文章
- HTML+CSS技术实现网页滑动门效果
一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...
- Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
- 转!!常用的4种动态网页技术—CGI、ASP、JSP、PHP
1.CGI CGI(Common Gateway Interface,公用网关接口)是较早用来建立动态网页的技术.当客户端向Web服务器上指定的CGI程序发出请求时,Web服务器会启动一个新的进程 ...
- python网络爬虫抓取动态网页并将数据存入数据库MySQL
简述以下的代码是使用python实现的网络爬虫,抓取动态网页 http://hb.qq.com/baoliao/ .此网页中的最新.精华下面的内容是由JavaScript动态生成的.审查网页元素与网页 ...
- 静态网页VS动态网页
干<沙朗新闻发布系统>什么时候.我们已经建立的网页.html的,并且.aspx,第一次接触.我认为这些东西是一样的,因为它,在观看ASP.NET视频的时候.听见里面讲课的老师有提到了这两样 ...
- JSP动态网页
01.什么是服务器 02.什么是动态网页 动态网页是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根据某种条件的变化,返回不同的网页内容.可以让用户和服务器交互的网站 动态网站可以实现交互 ...
- 【Asp.net入门01】动态网站基础知识
本节将介绍: 网站搭建流程 动态网站相关基础概念 网页的访问原理 使用浏览器访问网站是我们几乎天天在做的事情.以前我们只需要关注网页内容,作为网站开发人员,从现在开始我们要关注更深层次的东西了. 1. ...
- JSP/Servlet开发——第一章 动态网页基础
1.动态网页:在服务端运行的使用程序语言设计的交互网页 : ●动态网站并不是指具有动画功能的网站,而是指网站内容可根据不同情况动态变更的网站(股票网站),一般情况下动态网站通过数据库进行架构. ●动态 ...
- JSP技术基础(动态网页基础)
前言:如果说html为静态网页基础,那么jsp就是动态网页基础,两者的区别就是jsp在html的前面多加了几行而已.当然,jsp里面对java的支持度更高.要明白,js只是嵌入在客户端的小程序小脚本而 ...
随机推荐
- firefox插件HTTP-Tool的使用方法
2016年11月3日 14:32:01 星期四 chrome 有postman很强大 我比较懒, 不想FQ, 经常用firefox, 试了几款模拟post请求的插件, 觉得http-tool挺简洁的 ...
- Android源码阅读 – Zygote
@Dlive 本文档: 使用的Android源码版本为:Android-4.4.3_r1 kitkat (源码下载: http://source.android.com/source/index.ht ...
- windows耳机没有声音
问题描述: 扬声器有声音,耳机没有声音,重装了驱动也没有用,系统配置.耳机也没有问题,具体原因我不太清楚,参考网址:http://forum.ubuntu.org.cn/viewtopic.php?f ...
- rsync参数及通信
rsync 支持: 本机数据 <-------> 远程数据/本地数据 意义: 支持增量拷贝 --> 备份,节省带宽,时间 rsync -avL 一.常用选项 ******* ...
- android Acitivity之间的几种传值方式(^_^)
对于开发app 来说,数据的传递肯定是少不了的啦,其实app 的本质就是用来呈现数据的. 好的 方式一 Intent.putExtra(TAG,DATA); 应用场景 对于传送单一数据,而又只在 ...
- mysql 5.7.14 免安装配置方法教程
仅供参考 一.下载 1. 进入mysql官网,下载Mysql-5.7.14,下载地址:http://dev.mysql.com/downloads/mysql/ 2.将下载好的文件解压到自定义目录 二 ...
- 【转】Caffe初试(七)其它常用层及参数
本文讲解一些其它的常用层,包括:softmax-loss层,Inner Product层,accuracy层,reshape层和dropout层及它们的参数配置. 1.softmax-loss sof ...
- Ubuntu 14.04 更换阿里云源[转]
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak #备份 sudo vim /etc/apt/sources.list #修改 sudo ...
- JavaScript浮动广告代码,容纯DIV/CSS对联漂浮广告代码,兼容性非常好的js右下角与漂浮广告代码
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...
- asp.net中获取本机的相关信息!(CPU、内存、硬盘序列号等)
// 注意:首先要在项目bin目录中添加引用 System.Management using System;using System.Collections.Generic;using System. ...