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

查看演示:http://39.105.0.128:45/

首页截图

HTML制作简单首页导航

 

首页代码如下:

<!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>

相关文章: