那个上节课的比喻你可别告诉我女朋友，解释不清，她不会理解夜郎国只有她一位爱妃的……现在我们先来玩个小游戏，缓解一下你我心中的不安……现在我告诉你一个 1—7 的数字，然后你用这是星期 X 来回答我，就是换个说法，来看看我怎么用程序表达：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>
首先是一个很郑重地补充：由衷感谢站酷酷友 @璇也 的指正。事情很简单，在 JS 里面对于变量真的要求宽泛，像我这种懒人每每都是拿起来就用，然后出问题了才去严格一下他的格式之类。好在我一直写的都是一些简短的小功能，所以就算有性能上的问题，在现在电脑硬件这么强悍的前提下也几乎与我无关。于是……我忘记告诉大家声明变量的事情了。
其实我是连续写的，所以还没醒酒，刚才攥着酒瓶子口拧了半天，才发现根本没盖子。你问我这状态能说明白不？我问你一加一你能立刻反应不？其实不能，一般我们都会愣一下，不是因为太简单了，而是因为这只是我们从来不用，真尼玛要思考一下。你看我还能做这么复杂的逻辑思维呢，噗，给你开玩笑呢，我写一遍，后期检查一遍，然后规整格式一遍，放心吧你，容易么我。
这几节都是基础课，基础的我一边写一遍打盹。太无聊了，不服气你做二百道一百以内的加减法试试。上节课我们用了加号，他可以让数字相加，让字符串连接，不解释了啊，那么思考下面的问题哦：heng = "12"+"5";alert(heng);输出的是什么？自己试试，想想为什么。然后要说一个最基础，最基础的重要问题：js 的每一句都要用分号（;）来结束，嗯哼，依旧有特殊情况，后面讲。
这个……初中，代数，不需要你数学怎么好，基础知识而已。我就不重新去讲了。那么我们做个最简单的例子来复习一下，超简单的哦~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript 引用演示</title> <script> a = 12; b = 5; c = a+b; alert(c);
那么这节课开始就要学习众神之神的 JavaScript 了。等等，你先别急着吐槽！这个道理是这样的，如果 Html 是平民的话，那么，CSS 简直就是神一样的存在啊，而如此比喻的话，动态的 JavaScript 简直就是众神之神了。这是一个比喻，而且很局限，为此而吐槽的同学，你们的小学语文老师会哭的！老有人跟我为了这种细节的小问题较劲，真累！
要是前边的 CSS 部分你学得扎实，这部分基本就是看一眼就懂了，很简单的一个事。就是比今天中午吃啥这个问题还简单。额……我比喻的不恰当哈，那样就成了最难的问题了，算了，不比喻了，你们就领会精神就好了。先解释一下原理，就是你为一个元素设置多重的 CSS ，他们根据一定的规则，在不同的情况下分别起作用。这一定的条件一般都是指浏览器窗口的宽高范围。
当然了，没有 JS 这种灵活的东东，我们不可能做很复杂的动态游戏。但是如果你肯开发思路的话，确实可以实现一些完整的游戏过程，虽然确实很简单，但是可玩性，以及游戏体验却也未必很差。那么今天我们来做一个猫咪抓老鼠的小游戏。
然后就是给这个按钮加装一个菜单用来弹出。这很像我们前边写二级菜单的操作，其实也没什么本质上的区别，管他几级呢，反正都是弹出菜单罢了。所以也不过是加一个列表而已，懒惰如我，直接把上边的二级菜单复制过来了。<div id="show-nav"> <div class="button">我<br>是<br>菜<br>单</div> <ul> <li>
导航我还没玩够，哼哼，我要写一个帅点的，这样我们就可以顺便学一些新鲜的玩意了。首先左下角浮动一个按钮，哎呀，这个写起来跟右下角的一样呢~我就不多废话了，对了，区别有点，就是这次我们不用链接了。<div id="show-nav"><div class="button">我<br>是<br>菜<br>单</div></div>
然后我们的问题是：这货怎么一直这么显示着，这不是我想要的结果啊，要是可以鼠标划到上面才显示，鼠标离开就隐藏有多好？当然了，这种效果几乎是各个网站所必备的。第一步：我先把它隐藏掉，省得碍眼。这个最简单了，给 #nav>ul>li>ul 选择器里面加一个属性就好，display:none;，意思就是显示方式是不显示。
那么我们说了，这个要做一个二级菜单的，现在刚有了第一级的菜单，现在来写第二级。二级菜单是什么呢？其实还是一个列表，有那么几个列表项。所以还是 ul 和 li 标签而已。那么放在哪里呢？这个问题很有意思，真正的解答是：放在哪里都可以。我来解说几种情况：第一种：像我们这个实例这么简单的情况。一般的我们为了说明他的层级关系，都会把它放在父级导航项内；
讲了这么多，有点晕了？嗯，很好，很好！来我们做个练习来更加的迷糊一下，咳咳，是深入理解一下。其实这个案例也十分的简单，本来是可以在前面所写的页面中直接添加的，不过怕大家搞乱了，所以索性新写一个好了。当然我们只写主要部分，不会再写一个完整页面的。我们要写的是一个二级导航，和一个返回顶部的按钮。其他部分咱们就简单呵呵一下，你们要理解我在简言之。
现在有些同学可能已经有疑问了，你看这几种定位啊，都是让元素到了别的元素的前面。但是要是我们用这种方式把多个元素定义到了相同的位置，究竟谁在前面谁在后面？这时候就涉及到了网页的坐标系，这是一个三维的坐标系，然而并不复杂在三维层面。真正让人头疼的是二维上的各种变化。让我们从最简单地聊起。
前边的都记住啦？那就来看今天的。其实我觉得，日常用 relative 定位的地方并不多，但是又绝对不少。这话怎么理解呢？就要先看今天的定位方式：absolute 了。这个简单，就把上节课的例子的定位改成 absolute 就好了，我就不再复制一遍了，来看看效果。现在看到，红色的格子没了他原来的位置。这就是老师说：“小明，你给我搬着桌子椅子滚出去！
上节课我们讲了 fixed 定位，那么现在我们来简单回顾一下他。fixed 定位就是锁定元素和浏览器的相对位置，无论怎么滚动页面，这两者之间是相对静止的。然后还有一个细节上一节我们没有注意哦！fixed 定位的元素不在文档流内！这只箱子从传送带上拿出来了，挂在浏览器上一动不动的。所以他和传送带上的箱子互不影响，传送带上也没有他的位置。
前面我们写了一个网页，当然，我们都知道这是一个很简单很基础的网页。只是我们心照不宣的照样拿他出去炫耀罢了，咳咳，这个秘密谁也不许往外说，否则莫怪为师……串词了，没事，你就当没看见。那么大家看前边的布局的时候有没有觉得很单调乏味呢？想横排，用浮动，浮动之后要清除；想居中，两边补，外补自动有宽度。就这点东西吧，翻来覆去还是这点东西。
现在呢，我们也做完了一个网页了，如果你恰好看懂了这些，也跟着做下来了。那么你就拥有了一个网页。挺开心的事情。但是只是自己看着这个网页你总觉得无法满足自己期望炫耀的心情。那怎么办？——发到网上去！最简单的办法好像就是新浪的 sae（http://sae.sina.com.cn/） 了，注册开通之后，创建新应用大概如下图填一下，二级域名和应用名称其实都是随意的。
在开始的时候有一件事情我们一直说后面再说后面再说，但是后来我忘了……为什么酱紫……不过现在来讲一点也不晚啊，我们来讲一讲导航里那个奇葩的链接地址的问题，回过头来改一下导航里的链接地址哦……等等……为什么是改……因为我后面没按着那个写啊……额，我说我写错了你能原谅我吗？算了，我就这么写了，你来咬我呀！<ul id="nav-items"> <
其实写到这里，页尾大家应该都会做了的，还是那点知识而已，我都懒得写了，而且我猜性急的朋友应该也都写出来了。算了，虽然很无聊，但是还是写一遍好了。老板说就这么多内容吧，然后你觉得如释重负啊！可是呢，就算这样也不能完啊，就算是虎头蛇尾总也是要给他一个结尾的啊。其实结尾跟咱们的导航部分有点类似啦，都是一个通栏，然后中间一个居中的区域用来放内容啊。
关注时代Java
