HTML+js页面横向分栏效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态网站建设与管理</title>
<style type="text/css">
html,body{width:100%; height:700px;}
body,td,th {font-size: 14px;}
body {margin: 0px; background:#eee; color:#666;}
a:link {color: #333;text-decoration: none;}
a:visited {text-decoration: none;color: #333;}
a:hover {text-decoration: none;color: #333;}
a:active {text-decoration: none;color: #333;}
ul,form{margin:0; padding:0; }
.clear{ clear:both; margin:0; padding:0; height:0;}
ul{width:300px;height:100%;text-align:left;column-count:1;column-rule:0px dotted #d8d8d8;}
ul li{ margin-left:5px;}
.list{ width:92%; height:80%; margin:20px auto 0 auto; overflow:hidden; background:#fff;}
.tit1{ font-size:14px; font-weight:700; list-style:none; margin-top:10px;}
.tit2{ font-size:12px; line-height:25px; margin-left:25px; color:#999;}
.tit3{ font-size:12px; line-height:25px; margin-left:25px; color:#999; list-style:none;}
</style>
<script type="text/javascript">
window.onload = function() {
var oul = document.getElementsByTagName('ul')[0];
for(var i=0; i<9; i++){
var _li = document.createElement('li');
_li.innerText = i+1;
}
};
</script>
</head>
<body>
<div style="text-align:center; background:#333; font-size:24px; color:#fff; line-height:50px;">动态网站建设与管理</div>
<div class="list">
<ul>
<li class="tit1">第1章 ASP概述</li>
<li class="tit2">1.1 什么是ASP</li>
<li class="tit2">1.2 ASP程序的执行（IIS简述）</li>
<li class="tit2">1.3 ASP程序在Windows Vista操作系统中运行要求</li>
<li class="tit3">1.4 本章小结</li>
<li class="tit1">第2章 ASP框架语言——HTML</li>
<li class="tit2">2.1 HTML语言结构</li>
<li class="tit2">2.2 HTML非正文标记</li>
<li class="tit2">2.3 HTML正文标记</li>
<li class="tit2">2.4 HTML特殊标记</li>
<li class="tit3">2.5 本章小结</li>
<li class="tit1">第3章 ASP脚本语言——VBScript</li>
<li class="tit2">3.1 VBScript概述</li>
<li class="tit2">3.2 VBScript数据类型及运算符</li>
<li class="tit2">3.3 VBScript变量和常量</li>
<li class="tit2">3.4 VBScript常用函数</li>
<li class="tit2">3.5 VBScript语句</li>
<li class="tit2">3.6 VBScript过程和自定义函数</li>
<li class="tit2">3.7 使用VBScript对象编程</li>
<li class="tit2">3.8 综合实例</li>
<li class="tit3">3.9 本章小结</li>
<li class="tit1">第4章 ASP内置对象</li>
<li class="tit2">4.1 获取客户端数据的Request对象</li>
<li class="tit2">4.2 向客户端输出数据的Response对象</li>
<li class="tit2">4.3 应用程序会话管理</li>
<li class="tit2">4.4 服务器信息的Server对象</li>
<li class="tit3">4.5 本章小结</li>
<li class="tit1">第5章 ASP内置组件</li>
<li class="tit2">5.1 基本概念</li>
<li class="tit2">5.2 Ad Rotator组件（制作页面广告轮显）</li>
<li class="tit2">5.3 Browser Capabilities组件（侦测浏览器能力）</li>
<li class="tit2">5.4 Context Linking组件（制作在线小说）</li>
<li class="tit2">5.5 Counters与Page Counter组件（页面访问次数统计）</li>
<li class="tit2">5.6 综合实例：网页在线投票统计</li>
<li class="tit3">5.7 本章小结</li>
<li class="tit1">第6章 ASP的文件处理</li>
<li class="tit2">6.1 FileSystemObject对象</li>
<li class="tit2">6.2 TextStream对象</li>
<li class="tit2">6.3 File对象及Files集合</li>
<li class="tit2">6.4 Folder对象及Folders集合</li>
<li class="tit2">6.5 Drive对象及Drives集合</li>
<li class="tit2">6.6 综合实例：访客留言簿</li>
<li class="tit3">6.7 本章小结</li>
<li class="tit1">第7章 ASP数据库基础知识</li>
<li class="tit2">7.1 数据库基础知识</li>
<li class="tit2">7.2 创建适用于ASP程序的数据库</li>
<li class="tit2">7.3 结构化查询语言SQL</li>
<li class="tit3">7.4 本章小结</li>
<li class="tit1">第8章 ADO在ASP中的应用</li>
<li class="tit2">8.1 活动数据对象ADO</li>
<li class="tit2">8.2 连接数据库Connection对象</li>
<li class="tit2">8.3 检索数据Recordset对象</li>
<li class="tit2">8.4 增强处理能力Command对象</li>
<li class="tit2">8.5 ADO对象库的集合</li>
<li class="tit2">8.6 综合实例：用户注册登录系统</li>
<li class="tit3">8.7 本章小结</li>
<li class="tit1">第9章 常见ASP脚本攻击及防范</li>
<li class="tit2">9.1 ASP漏洞</li>
<li class="tit2">9.2 防范措施</li>
<li class="tit3">9.3 本章小结</li>
<li class="tit1">第10章 ASP技术的综合应用 一套完整的动态网站程序</li>
<li class="tit2">10.1 网站定位</li>
<li class="tit2">10.2 功能模块划分</li>
<li class="tit2">10.3 数据库设计</li>
<li class="tit2">10.4 会员注册与管理</li>
<li class="tit2">10.5 预定制商品</li>
<li class="tit2">10.6 商品陈列架</li>
<li class="tit2">10.7 用Cookies实现购物车</li>
<li class="tit2">10.8 商品检索</li>
<li class="tit2">10.9 BBS社区论坛</li>
<li class="tit2">10.10 主页设计及各模块的整合</li>
<li class="tit3">10.11 本章小结</li>
<li class="tit1">第11章 课程设计、综合测试、教学大纲</li>
<li class="tit2">11.1 课程设计 中小型网站开发能力训练</li>
<li class="tit2">11.2 上机测试题</li>
<li class="tit2">11.3 理论测试题（闭卷）</li>
<li class="tit2">11.4 教学大纲</li>
<li class="tit3">附录A VBScript函数速查表</li>
<li class="tit3">附录B 习题答案</li>
<li class="tit3">网站开发工程师模拟考试题</li>
</ul>
</div>
</body>
</html>
HTML+js页面横向分栏效果的更多相关文章
- css遮罩蒙版效果 分栏效果
mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态 要展示的图像 使用mask之后产生的效果图 首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...
- [Swift通天遁地]八、媒体与动画-(14)使用TextKit快速实现文章的分栏效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- js实现横向跑马灯效果
首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...
- js 实现横向轮播效果
参考:https://www.cnblogs.com/LIUYANZUO/p/5679753.html html: <!DOCTYPE html> <html> <hea ...
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...
- ActiveReports 报表应用教程 (4)---分栏报表
在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印 ...
- CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
- Word 分栏页码，一个页面两个不同页码的设置
1. 前言 在一些报纸.杂志中,我们可以见到各种各样的排版风格效果,其中有一种效果是一个页面设置了两栏,并且每栏下面都有不同的页码,那么,这种效果是如何实现的呢?这种页码在Word中默认页码样式中是没 ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- 左右分栏页面右侧无法出现滚动条bug
问题记录 项目比较老了,左右分栏的页面,导航栏右边是一个iframe组成的页面,通过某个操作后,页面右侧内容区域无法实现滚动 问题查明 遇见过好几次,最后查明,总结一句话,修改了右侧页面body的ov ...
随机推荐
- Maven多模块管理
项目的目录结构: 一.创建父工程的必须遵循以下两点: 1.packaging标签的文本内容必须设置为pom 1 <?xml version="1.0" encoding=&q ...
- 【转载】EXCEL VBA 自动筛选—AutoFilter方法
AutoFilter方法的语法及说明 下面是Range对象的AutoFilter方法的语法: Range对象.AutoFilter(Field,Criterial1,Operator,C ...
- MS17-010漏洞复现（永恒之蓝）
0x01:温馨提示 微软已于2017 年 发布MS17-010补丁,修复了"永恒之蓝"攻击的系统漏洞,一定要及时更新Windows系统补丁. 本次只是简易的复现MS17-010,成 ...
- [常用工具] 基于psutil和GPUtil获取系统状态信息
本文主要介绍在Python3中利用psutil库获取系统状态,利用GPUtil获取gpu状态. psutil (process and system utilities)(进程和系统实用程序)是一个跨 ...
- Redis 数据结构-双向链表
Redis 数据结构-双向链表 最是人间留不住,朱颜辞镜花辞树. 1.简介 Redis 之所以快主要得益于它的数据结构.操作内存数据库.单线程和多路 I/O 复用模型,进一步窥探下它常见的五种基本数据 ...
- Maven初学习
Maven初学习 摘要:本篇笔记记录了我在初学Maven是认为比较重要的一些知识点. 目录 Maven初学习 1.Maven简介 1.1.项目构建 Ant Maven Gradle 1.2.总结 2. ...
- 旋转卡壳（求凸包直径）学习笔记 | 题解 P1452 [USACO03FALL]Beauty Contest G /【模板】旋转卡壳
前言 旋转卡壳(Rotating Calipers)可以在凸包上维护许多有用的信息,最常见的就是凸包直径(平面最远点对). 注意:本文不介绍所谓的 "人类智慧" 乱搞做法. 算法流 ...
- BC4-牛牛学说话之-浮点数
题目描述 会说整数之后,牛牛开始尝试浮点数(小数),输入一个浮点数,输出这个浮点数. 输入描述 输入一个浮点数 输出描述 输出一个浮点数,保留三位小数 示例 1 输入:1.359578 输出:1.36 ...
- 无需依赖Docker环境制作镜像
随着高版本的Kubernetes弃用Docker,企业也可以不依赖Docker环境了,但是DevOps通过Kubernetes部署的话,仍然需要制作镜像,那么在没有Docker环境的情况下如何制作呢? ...
- 学习ASP.NET Core Blazor编程系列二十三——登录（3）
学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...