HTML制作简单首页导航

13 篇文章 0 订阅

h1大标题:李广程的作业列表

查看演示地址一:http://js.lgcweb.cn/

查看演示备用地址:http://39.105.0.128/JavaScript/

首页截图

 

首页代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>作业列表</title> 
<style type="text/css">
  .box {text-align: center;}
  .btn{     
    display: inline-block;     
    margin-top: 10px;     
    padding: 10px 24px;     
    border-radius: 4px;     
    background-color: #63b7ff;     
    color: #fff;     
    cursor: pointer;     
  }     
  .btn:hover{     
    background-color: #99c6ff;     
  }
  .inbtn{     
    border: none;     
  }      
  .bubtn{     
    border: none;     
  }     
  .btn{     
    font-style: normal;     
  }     
   
</style>     
</head>     
<body bgcolor="#D0D0D0">   
    <div class="box">
      <h1>李广程的作业列表</h1>
    <h2>第一章  认识JavaScript语言和Jquery</h2>
        <input class="inbtn btn"  type="button" value="实例一" title="点击图片触发事件" οnclick="location.href='chapter_1/text_1.1.html'" />
        <input class="inbtn btn"  type="button" value="实例二" title="简单的jQuery实例" οnclick="location.href='chapter_1/text_1.2.html'" /> 

    <h2>第二章  JavaScript的编程基础</h2>
        <input class="inbtn btn"  type="button" value="实例一" title="检测变量的数据类型" οnclick="location.href='chapter_2/text_2.1.html'" />
        <input class="inbtn btn"  type="button" value="实例二" title="变量类型:十进制、八进制、十六进制的应用,数值表示方法:传统计数法、科学计数法的体现" οnclick="location.href='chapter_2/text_2.2.html'" />
        <input class="inbtn btn"  type="button" value="实例三" title="JavaScrip在执行前,会对整个脚本文件的声明部分做完整解析(包括局部变量),从而确定变量的作用域" οnclick="location.href='chapter_2/text_2.3.html'" />
        <input class="inbtn btn"  type="button" value="实例四" title="利用运算符实现数据操作" οnclick="location.href='chapter_2/text_2.4.html'" />
        <input class="inbtn btn"  type="button" value="实例五" title="关系运算符和逻辑运算符的计算方法" οnclick="location.href='chapter_2/text_2.5.html'" />
        <input class="inbtn btn"  type="button" value="实例六" title="验证邮箱格式" οnclick="location.href='chapter_2/text_2.6.html'" />
        <input class="inbtn btn"  type="button" value="实例七" title="输出九九乘法表" οnclick="location.href='chapter_2/text_2.7.html'" />
        <input class="inbtn btn"  type="button" value="实例八" title="隔行变色,调用样式" οnclick="location.href='chapter_2/text_2.8.html'" />
        <input class="inbtn btn"  type="button" value="实例九" title="函数和控制语句结合的方法实现数组的排序" οnclick="location.href='chapter_2/text_2.9.html'" />
        <input class="inbtn btn"  type="button" value="实例十" title="内置函数的用法" οnclick="location.href='chapter_2/text_2.10.html'" />
        <input class="inbtn btn"  type="button" value="实例十一" title="函数方法应用" οnclick="location.href='chapter_2/text_2.11.html'" />
        <input class="inbtn btn"  type="button" value="实例十二" title="函数属性应用" οnclick="location.href='chapter_2/text_2.12.html'" />
        <input class="inbtn btn"  type="button" value="实例十三" title="改变图像大小" οnclick="location.href='chapter_2/text_2.13.html'" />
        <input class="inbtn btn"  type="button" value="实例十四" title="鼠标左、右键事件的应用" οnclick="location.href='chapter_2/text_2.14.html'" />
 
    <h2>第三章  JavaScript的对象</h2>
        <input class="inbtn btn"  type="button" value="实例一" title="数组的应用" οnclick="location.href='chapter_3/text_3.1.html'" />
        <input class="inbtn btn"  type="button" value="实例二" title="小型计算器的设计及功能" οnclick="location.href='chapter_3/text_3.2.html'" /> 
 
    <h2>第四章  浏览器对象模型</h2>
        <input class="inbtn btn"  type="button" value="实例一" title="Window对象方法的使用" οnclick="location.href='chapter_4/text_4.1.html'" />
        <input class="inbtn btn"  type="button" value="实例二" title="在浏览历史中导航" οnclick="location.href='chapter_4/text_4.2.html'" />
        <input class="inbtn btn"  type="button" value="实例三" title="Location对象应用" οnclick="location.href='chapter_4/text_4.3.html'" />
        <input class="inbtn btn"  type="button" value="实例四" title="navigator对象常见属性应用" οnclick="location.href='chapter_4/text_4.4.html'" />
        <input class="inbtn btn"  type="button" value="实例五" title="客户端显示屏幕的信息" οnclick="location.href='chapter_4/text_4.5.html'" />
        <button class="bubtn btn" οnclick="location.href='chapter_4/计算圆的周长和面积.html'">计算圆的周长和面积</button>  
 
    <h2>第五章  表单和数据完整性</h2>
        <input class="inbtn btn"  type="button" value="实例一" title="表单提交" οnclick="location.href='chapter_5/text_5.1.html'" />  
        <input class="inbtn btn"  type="button" value="实例二" title="文本框进行过滤验证" οnclick="location.href='chapter_5/text_5.2.html'" />    
        <input class="inbtn btn"  type="button" value="实例三" title="带复选框的树形菜单" οnclick="location.href='chapter_5/text_5.3.html'" />    
 
    <h2>第六章  文档对象模型</h2>
        <button class="bubtn btn" οnclick="location.href='index.html'">button标签按钮</button>  
 
    <h2>第七章  了解jQuery</h2>
        <button class="bubtn btn" οnclick="location.href='index.html'">button标签按钮</button>  
 
    <h2>第八章  jQuery的事件</h2>
        <button class="bubtn btn" οnclick="location.href='index.html'">button标签按钮</button>  
 
    <h2>第九章  jQuery制作动画效果</h2>
        <button class="bubtn btn" οnclick="location.href='index.html'">button标签按钮</button>  
 
    <h2>第十章  jQuery的扩展插件</h2>
        <button class="bubtn btn" οnclick="location.href='index.html'">button标签按钮</button>  
 
    <h2>第十一章  jQuery Mobile简介</h2>
        <button class="bubtn btn" οnclick="location.href='index.html'">button标签按钮</button>  


    </div>   
</body>     
</html>

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
第一网站程序是一套采用asp access数据库架构的网址导航程序,本站全站生成html静态页面(不但减轻服务器的负载而且更利于搜索引擎收录) 本程序体积小(压缩起来只有1M左右),后台功能强大、界面清新、操作简单,不需要专业的建站知识,也可轻松管理本站的程序 本程序模版全部采用div css编辑(访问速度比普通table编辑的更快)并且完美兼容互联网所有流行的网页浏览器,本程序拥有精心设计的网页模版 丰富的网站内容,本站的网站内容及模版设计均属原创,是广大站长建立网址导航的第一选择!   程序后台功能介绍: 网站信息管理 网站基本信息、公告发布修改、主机信息查询 网站网址管理 网站审核、网站搜索、网站添加、网站列表 网站分类管理 分类搜索、分类添加、分类列表、分类合并 网站模版管理 通用模版、新增模板、分类模版、公告模版、调用标签、自定义标签   生成静态页面 生成通用页面、生成分类页面 广告调用管理 广告列表、添加广告 网站新闻管理 新闻发布、新闻管理 网站用户管理 会员搜索、会员管理、管理员管理、新增管理员 后台登录地址:http://您的域名/admin/admin_login.asp 用户名:admin 密码:123456 登录后台后设置一下网站信息,生成一下全部通用页面跟分类页面就OK了!   好多网友反映演示的时候放在子目录CSS无法正常显示,觉得是程序有问题,其实程序没问题,只是如果要放在子目录要先进入后台设置一些参数,   设置方法如下: 1.先进入=网站信息管理>网站基本信息 修改一下网站信息然后点击保存。 2.进入=网站模版管理>通用模版 生成一下,网站首页、网站顶部、网站底部、风格页面 这样就OK了,这样放在子目录就可以正常显示了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值