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 ...
随机推荐
- python什么是异常?如何处理异常
异常处理 什么是异常 异常是程序错误发生的信号.程序一旦出现错误,就会产生一个异常,如果程序中没有处理该异常,该异常就会抛出来,程序的运行也随即终止. 错误分为两种 1.语法错误 2.逻辑错误 如何处 ...
- Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) - Flask表单的实现
1.表单介绍 1.1.表单知识回顾 常见的表单元素: 表单标签<form> action:表单提交的URL地址 method:表单请求的方式(GET/POSt) enctype:请求内容的 ...
- python 之选择结构(if --elif --else)
python中有三种结构:顺序结构.选择结构.循环结构,此处介绍选择结构. if -- else 结构: if 判断条件: 执行语句 else: 执行语句 当if后面的判断条件为真(True)时,执行 ...
- IdentityServer4 - V4 概念理解及认证授权过程
概念理解 Scope 范围,它的定义比较宽泛,可大可小.大到可把多个包含相同Scope的站点或服务形成一个虚拟的组,也可以是站点或服务的子级:小到身份所需要包含的信息,以精确出哪种身份. Client ...
- [0x11] 131.直方图中最大的矩形【单调栈】
题意 link(more:SPOJ1805) 如图,在水平线上有 \(n(n\leqslant10^5)\) 个宽度为 1 ,高度为 \(h(0\leqslant h\leqslant10^9)\) ...
- Centos下部署最后一版支持Docker的k8s集群
部署版本 首先要确定部署的版本 查询Kubernetes对Docker支持的情况 kubernetes/dependencies.yaml at master · kubernetes/kuberne ...
- [Leetcode]扁平化多级双向链表
题目 https://leetcode-cn.com/explore/learn/card/linked-list/197/conclusion/764/ 代码 /* // Definition ...
- [C++]我的理解之内存对齐
问题1:为什么要内存对齐? 平台原因:不是所有的平台都能访问到任意地址上的任何数据,如果在特定的地址上找不到数据的话就会抛出硬件异常. 性能问题:简单的来说如果没有使用内存对齐的话,相对于内存对齐,C ...
- Gvim基础操作-01
Gvim基础操作 进行代码或者是文本.脚本都要使用到文本编辑工具. vi是visual的缩写,其意为可视化.它是Unix系统文本编辑的标准工具.利用光标在屏幕上的移动,用户可以方便的建立.修改或者插入 ...
- GreenPlum批量授权(PG未测试)
创建一个自定义function create or replace function grant_all_exec(schema_name varchar,select_or_insert varch ...