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 ...
随机推荐
- <二>线程间互斥-mutex互斥锁和lock_guard
多线程程序 竞态条件:多线程程序执行的结果是一致的,不会随着CPU对线程不同的调用顺序而产生不同的运行结果. 解决?:互斥锁 mutex 经典的卖票问题,三个线程卖100张票 代码1 #include ...
- Dubbo架构设计与源码解析（三）责任链模式
作者:周可强 一.责任链模式简介 1.责任链模式定义 责任链(Chain of Responsibility)模式的定义:为了避免请求发送者与多个请求处理者耦合在一起,于是将所有请求的处理者通过前一对 ...
- 学会了selenium 模拟鼠标操作，你就可以偷懒点点点了
前言 我们在做 Web 自动化的时候,有时候页面的元素不需要我们点击,值需要把鼠标移动上去就能展示各种信息. 这个时候我们可以通过操作鼠标来实现,接下来我们来讲一下使用 selenium 做 Web ...
- 聊聊Cookie、Session、Token 背后的故事
摘要:Cookie.Session.Token 这三者是不同发展阶段的产物 本文分享自华为云社区<Cookie.Session.Token 背后的故事>,作者: 龙哥手记. 1. 网站交互 ...
- App几个可能造成内存泄漏的情况：
App几个可能造成内存泄漏的情况: 1.block块中直接用self调用,self将会被block copy到内部增加一次饮用计数,形成循环引用 在block里调用self会不会造成循环引用和这个bl ...
- 蓝桥真题——最短路 & 门牌制作
题目1 最短路 标签:填空题 2019 省赛 如下图所示,G 是一个无向图,其中蓝色边的长度是 1.橘色边的长度是 2.绿色边的长度是 3. 则从 A 到 S 的最短距离是多少? 答案 由图可得,最短 ...
- Python调用Openstack API
本文将介绍如何使用 python 调用 OpenStack API. 什么是RESTful API RESTful API 就是 RESTful 风格的 API.遵循 RESTful 风格开发的API ...
- 逗号(,)运算符在Javascript中
逗号运算符 逗号运算符是二元运算符,它能够先执行运算符左侧的操作数,然后再执行右侧的操作数,最后返回右侧操作数的值. 逗号表达式: 一般形式:表达式1,表达式2,表达式3,......表达式n 求解过 ...
- TCP与UDP、socket模块
1.传输层之TCP与UDP协议 1.TCP协议 1.传输控制协议(也称为TCP协议或可靠协议)是为了在不可靠的互联网络上提供可靠的端到端字节流而专门设计的一个传输协议,(数据不容易丢失);造成数据不容 ...
- element el-table固定列凹陷问题
1.业务背景 列表显示字段过多,最后一栏操作列加固定显示,横向添加滚动条,在自测浏览器开发者模式时,发现固定列的最后一行出现了凹陷现象,网上查阅资料大多为在更新生命周期或者页面更新操作时重载页面,这些 ...