index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="g-wrap">
    <h1 class="g-title">JS原生实例学习</h1>
    <div class="g-content">
        <ul class="m-nav">
            <li>
                <p class="nav-title" onclick="downSelect()"> 第一课（6）</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/firstOne.html">1)控制DIV属性</a></li>
                    <li><a target="_blank" href="html/firstTwo.html">2)网页换肤</a></li>
                    <li><a target="_blank" href="html/firstThree.html">3)函数接收参数并弹出</a></li>
                    <li><a target="_blank" href="html/firstFour.html">4)用循环将三个Div变成红色</a></li>
                    <li><a target="_blank" href="html/firstFive.html">5)鼠标移入/移出改变样式</a></li>
                    <li><a target="_blank" href="html/firstSix.html">6)记住密码框</a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">第二课</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/secondOne.html">1) 百度输入法</a></li>
                    <li><a target="_blank" href="html/secondTwo.html">2) 点击Div，显示其innerHTML</a></li>
                    <li><a target="_blank" href="html/secondThree.html">3) 求出数组中所有数字的和</a></li>
                    <li><a target="_blank" href="html/secondFour.html">4) 弹出层效果</a></li>
                    <li><a target="_blank" href="html/secondFive.html">5) 函数传参，改变Div任意属性的值</a></li>
                    <li><a target="_blank" href="html/secondSix.html">6) 图片列表：鼠标移入/移出改变图片透明度</a></li>
                    <li><a target="_blank" href="html/secondSeven.html">7) 简易选项卡</a></li>
                    <li><a target="_blank" href="html/secondEight.html">8) 简易JS年历</a></li>
                    <li><a target="_blank" href="html/secondNine.html">9) 单一按钮显示/隐藏一播放列表收缩展开</a></li>
                    <li><a target="_blank" href="html/secondTen.html">10) 提示框效果</a></li>
                    <li><a target="_blank" href="html/secondEleven.html">11) 鼠标移过，修改图片路径</a></li>
                    <li><a target="_blank" href="html/secondTWL.html">12) 复选框（checkbox）全选/全不选/返选</a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">第三课</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/thirdOne.html">1) 用typeof查看数据类型</a></li>
                    <li><a target="_blank" href="html/thirdTwo.html">2) 用parseInt解析数字，并求和</a></li>
                    <li><a target="_blank" href="html/thirdThree.html">3) 累加按钮，自加1</a></li>
                    <li><a target="_blank" href="html/thirdFour.html">4) 输入两个数字，比较大小</a></li>
                    <li><a target="_blank" href="html/third5.html">5) 页面加载后累加，自加1</a></li>
                    <li><a target="_blank" href="html/third6.html">6) 判断数字是否为几位数</a></li>
                    <li><a target="_blank" href="html/third7.html">7) 网页计算器</a></li>
                    <li><a target="_blank" href="html/third8.html">8) 简易网页时钟</a></li>
                    <li><a target="_blank" href="html/third9.html">9) 倒计时时钟（100秒）</a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">第四课</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/fourth1.html">1) 二级导航栏</a></li>
                    <li><a target="_blank" href="html/fourth2.html">2) 自动播放一幻灯片效果</a></li>
                    <li><a target="_blank" href="html/fourth3.html">3) 自动改变方向一幻灯片效果</a></li>
                    <li><a target="_blank" href="html/fourth4.html">4) agruments应用一求出函数参数的总合</a></li>
                    <li><a target="_blank" href="html/fourth5.html">5) css函数一设置/读取对象的属性</a></li>
                    <li><a target="_blank" href="html/fourth6.html">6) 当前输入框高亮显示</a></li>
                    <li><a target="_blank" href="html/fourth7.html"> 7) 数组练习：各种数组方法的使用</a></li>
                    <li><a target="_blank" href="html/fourth8.html"> 8) 事件练习：封装兼容性添加、删除事件的函数</a></li>
                    <li><a target="_blank" href="html/fourth9.html"> 9) 星级评分系统</a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">第五课</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/five1.html">1) 模拟select控件</a></li>
                    <li><a target="_blank" href="html/five2.html">2) 点击页面，显示单击的坐标</a></li>
                    <li><a target="_blank" href="html/five3.html">3) 用户按下键盘，显示keyCode</a></li>
                    <li><a target="_blank" href="html/five4.html">4) 阻止右键菜单（阻止默认事件）</a></li>
                    <li><a target="_blank" href="html/five5.html">5) 跟随鼠标移动（大图展示）</a></li>
                    <li><a target="_blank" href="html/five6.html">6) 自定义右键菜单</a></li>
                    <li><a target="_blank" href="html/five7.html">7) 用键盘控制Div</a></li>
                    <li><a target="_blank" href="html/five8.html">8) Div闪烁</a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">第六课</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/six1.html">1) 完美拖拽</a></li>
                    <li><a target="_blank" href="html/six2.html">2) 仿腾讯微博效果</a></li>
                    <li><a target="_blank" href="html/six3.html">3) 自定义多级右键菜单</a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">第七课</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">第八课</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">第九课</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">第十课</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">项目实例</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">YUI实例</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                </ul>
            </li>
            <li>
                <p class="nav-title">KISSY实例</p>
                <ul class="u-nav">
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                    <li><a target="_blank" href="html/"></a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script src="js/index.js"></script>
</body>
</html>