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 ...
随机推荐
- pycharm全局搜索
方法有:1.使用[Ctrl+N]快捷键按文件名搜索py文件: 2.使用[Ctrl+shift+N]快捷键按文件名搜索所有类型的文件: 3.使用[ctrl+shift+f]快捷全局字符串搜索: 3.使用 ...
- MySQL约束条件(主键-自增-默认值)
目录 一:MySQL约束条件 1.什么是约束条件? 二:unsigned(去除正负号) 三:zerofill(不够位数零填充) 四:not null(非空) 1.使用约束条件(不添加会报错) 五:de ...
- 实用！7个强大的Python机器学习库！⛵
作者:韩信子@ShowMeAI 机器学习实战系列:https://www.showmeai.tech/tutorials/41 本文地址:https://www.showmeai.tech/artic ...
- RabbitMQ、RocketMQ、Kafka延迟队列实现
延迟队列在实际项目中有非常多的应用场景,最常见的比如订单未支付,超时取消订单,在创建订单的时候发送一条延迟消息,达到延迟时间之后消费者收到消息,如果订单没有支付的话,那么就取消订单. 那么,今天我们需 ...
- git使用与代码托管
平时自己写的简单程序文件太多,可以放到代码托管的网站.比如国内的gitee.com, 好吧,只是把这个网站当网络云盘用了.在gitee网站上加上程序运行环境,使用文档,写好README.md使用介绍. ...
- P1024 [NOI2001] 食物链【种类并查集】
题意 P1024 简化题意:给定 \(n\) 和 \(k(n\leqslant5\times10^4,k\leqslant10^5)\) ,表示有 \(n\) 个动物, \(k\) 个描述,其中: \ ...
- anaconda peompt 、labalimg 数据标注
安装anaconda,进行数据标注 1.安装前准备:下好安装包和所需文件 https://www.aliyundrive.com/s/XyH2JQ5TjCz 提取码: 3c2w 2.运行anacond ...
- Mariadb对数据库和表的操作
登录mariadb: 路径切换到bin下 mysql -u root -p 然后会提示输密码 新建数据库: create database demo; 其中demo为数据库名字 新建表 create ...
- [cocos2d-x]关于坐标系
本文从cocos2dx官网看到,搬运过来学习一下. cocos2d-x3.X的坐标系 Cocos2d-x坐标系和OpenGL坐标系相同,都是起源于笛卡尔坐标系. 笛卡尔坐标系中定义右手系原点在左下角, ...
- 使用Zolom内存解析运行python脚本（不落地）
在目标机器运行python工具 好多工具都是python写的,如果目标机器是linux的话自带python环境可以很方便的运行这些工具,但是windows下是不自带python环境的,所以一种办法是直 ...