html

word-wrap英文文字换行

margin:auto水平自动居中

opacity透明度

img src=”images/img.jpg”

@keyframes 是 CSS 动画关键帧规则，用于定义动画中每个阶段的样式变化
@keyframes function {
from { }
to { }
}

display 的用途是 控制元素在页面中的排版与显示模式

block，块级元素，独占一行，可设置宽高

inline，行内元素，不独占一行，无法设置宽高

inline-block，行内块，不换行，可设置宽高

animation 是 CSS 的简写属性，用来把一个或多个 @keyframes 动画绑定到元素上。简写可以同时设置多个子属性。
简写格式(常见)，其中 name 与 duration 通常是必需的，其余有默认值。

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

可以用逗号同时声明多个动画。
animation: slide 1s ease, fade 0.5s linear 0.2s;
CSS 属性text-align，用来设置行内内容(水平方向)在其父容器中的对齐方式。justify是两端对齐(增加文字间距)。

var 用来在 JavaScript 中声明变量。创建一个可以存放数据的名称。

var obj = document.getElementById(“logo”);获取页面上 id 为 logo 的元素。

clientWidth内容区域宽度(不含滚动条边框)，offsetWidth元素宽度(含 padding + border)，innerWidth浏览器窗口内容区宽(含滚动条)。

CSS里逗号表示并列选择器，意思是：这些选择器都应用同一套样式。如#nav ul, #nav li { list-style: none; }应用同一套CSS去掉圆点。

导航菜单有动效的下拉/收起效果

<script>
       $(function () { //等页面加载完成后再执行里面的代码
       //jQuery的hover()方法，hover(函数A, 函数B)=鼠标移入执行函数A，鼠标移出执行函数B
           $("#nav li").hover( //选择#nav里所有 li 元素，为它们绑定hover事件(鼠标停留/移出)
               function () {
                   $(this).children("ul").stop(true, true).slideDown(200);
                   // this：当前这个 <li>。.children("ul")：它里面的子 <ul>(即下拉菜单)
                   //.stop(true,true)：停止动画队列，防止闪烁、叠加。.slideDown(200)：用滑动动画显示菜单，时间200ms
               },
               function () {
                   $(this).children("ul").stop(true, true).slideUp(200);
                   //.slideUp(200)：用滑动动画收起菜单
               }
           );
       });
   </script>

用了 $(…)、.hover()、.slideDown()、.slideUp()等jQuery的语法，必须先引入jQuery 库，否则浏览器会报错

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

document.getElementById(“xxx”) 接收的是 id 的字符串，但返回的不是字符串，而是返回对应 id 的 DOM 元素对象（HTMLElement），如果页面里不存在这个 id，则返回 null。

var 只是 创建一个变量，并不是把 DOM 元素“绑定成变量”，而是 变量存了一个指向该元素的引用

$(function(){

})
是 jQuery 的“文档就绪函数”写法，不是定义普通函数，也不是变量有“￥”。$ 在这里 不是钱符号，而是 jQuery 库提供的函数名（与 jQuery 等价）。
等价于：

jQuery(function(){
// DOM Ready 执行
});

这是 jQuery 的 页面加载完成回调，也叫 DOM ready：当 HTML 结构加载完成（不必等图片等资源） 时执行里面的代码。保证你操作 DOM 时，元素已经存在。
$ 是一个函数（jQuery）。当你传入一个函数时：$(fn)，\jQuery 会自动把这个 fn 作为 文档就绪事件 执行。