页面背后的故事
周四拿到产品的设计稿，周五拿到UI的设计稿，然后，项目在昨晚上线了。听起来，似乎特别的高大上，其实，并不然。我知道我的能力有多少，也知道可以坐在这里，可以能按时做完，已然是祂的恩典。因我对js的掌握真的太有限，还学不会从书本的知识到实际应用的转换，所以拿到设计稿的时候，虽没有说出来心中的慌乱，但也知道，会比较艰难。但那些迈不过去的坎儿，其实都或好或坏的解决了。记录一下项目开发过程中的点点滴滴吧，虽然真的很水，但也是成长的第一步。
坑与填坑
描述：导航条的上面，有hover过，出现了二级菜单，而且，菜单里不是简单的列表，而是用了一个大的框框，放了不同的ul。各大网站都有这样的效果，就标签语义化来说，尽量避免嵌套div，因此我选择了某云的 section h3 a span 等标签来制作二级菜单。但排版总是有问题，所以就放弃了--这个为代码重构或者优化预备了工作内容呀。目前的解决是使用div em-制作小三角 ul li，也就是说，二级菜单里放了三个ul。当初样式出现问题的原因，是不知道使用 绝对定位和相对定位。 navdown 是absolute，而 一级菜单中的 li 则是relative，而这个也可以解决 对话框上方的小三角 位子不对的情况。具体需要学习 CSS position 属性。
描述：导航条上，hover滑过，二级菜单就出现，离开，二级菜单就消失了。肯定是会添加hover，但添加在哪个元素上呢？特别是在ul li ul li不断嵌套的导航条中，直接写 ul li 是指所有的子元素；而 ul>li 则是该ul的子元素。具体需要学习 CSS 选择器参考手册 。在该项目中，将第一个 ul 用 id 标注，它的直接li元素里，样式为XX的元素就可以选择到啦。
描述：关于hover，我之前以为只有超链接 a 才可以用，后来发现，li也可以使用，再后来知道，div也可以使用。原来，hover不要求是那个元素使用它，而是描述了一个小动作出发的状态，而对象不单单是超链接。而这个知识点儿，CSS3里也强调过，具体需要学习hover伪类。:hover是当用户鼠标悬停在元素上时改变元素的外观，在大多数符合规范的浏览器中，伪类选择符适用于各种元素，但在IE6浏览器中，伪类选择符只可以用于超链接元素，而其他的元素，只能调用相关方法，比如JQuery的hover()方法。
:hover 选择器可用于所有元素，不只是链接。
:link选择器设置指向未被访问页面的链接的样式，:visited选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接 。:hover 选择器用于选择鼠标指针浮动在上面的元素。
描述：当为着二级菜单的显示与隐藏要哭的时候，到了幻灯片才是真的要哭。找了许多的代码，但终究不是自己的，也不是设计的要求。说一个过程中的感受吧，因为很想做出来，但始终找不到100%满意的，自己又不会写的时候，就会为自己的无能而痛苦。最后，还是在信仰里找到了方向，才又重新站立起来。我接纳js不好的自己，但项目的deadline就在那里，我需要在自己能做到的部分尽本分，而在自己不能的部分寻求帮助。这样，就不会痛苦于自己是否不尽本分，也不会压力山大了，也不再纠结于一个点儿阻止了前进的脚步。最后的幻灯片是同事帮忙找了一个代码，但因产品不喜欢数字，需要圆圈，于是，我就将数字的颜色与背景色相同，太机智了有木有。😌 其实是因为真的不会改。border-radius很奇妙的呢。
描述：body里面呢，第一次没有不断为页面设置背景色与居中，最小宽度，而是将页面的宽度设定为min-width，然后再讲wrap里设置为固定的值，并将margin： 0 atuo使用起来。之后就是在各个部分用wrap来装它。虽然我不太懂，为什么不在每一个样式里重复写，而是在HTML里引入多个样式。
描述：在学习使用hover时，我看到在CSS里描述样式的顺序并不相同，不知道这个会不会影响最后的呈现效果。后来才发现，在为一个目标定义样式时，顺序不同并不影响，也就是说，一个 {} 之前的类 顺序无关；不同的 {} 定义的color就会影响呈现了，最后一个才会显示出来。这个貌似称为 CSS的继承性。
描述：浮层是我第一次见识到CSS3的强大，终于明白那句CSS3+HTML5可以做部分JS的工作了。这个部分先去搜索了代码，就知道了transform、transition、animation动画三组合，但我只用到了前面两个。
描述：产品要求，鼠标移过：浮层缓慢出现，之前的文字上移，更多的文字出现，这最好是三个div，互不影响。之前用过两个div，但很多不可控。所以，在写之前，可以先思考情况，到底要怎么实现。带我的那个同事，他很聪明，因产品需要给背景颜色透明度，但文字又完全清晰，所以，他就将背景色单独给了一个div来用hover控制。
描述：当小图标旁边需要放文字，并需要有hover状态，hover的范围需要覆盖到小图标，就需要用padding-left来增加hover范围，但每一个小图标大概就是100px，因此，就把padding-left设为一样的，100px，而将所有的文字都给一个样式，绝对定位后，margin-left不同就好啦。
脚印里的代码：
小小三角形：border-color: transparent transparent #26292c; border-style: dotted dotted solid; 其中，solid和颜色的位子不同，也表明了三角的朝向不同（链接里的同学给出的更加详细）
鼠标滑过二级导航条出现：#nav > li > .navdown{display: none;}；#nav > li:hover > .navdown；{display:block;}
hover的对象：可以使用 .topnav .nav li a:hover ； .basic li:hover .content ； .list:hover .recent:hover a
文字两端对齐：text-align:justify; text-justify:inter-ideograph;
固定行高多行文字垂直居中：height: 80px; line-height: 30px； margin-top: 30px; font-size: 14px;（这个部分，似乎在footer里很常见）
鼠标移过出现透明度变化的浮层：opacity: 0.2; opacity: 1; transition-property: opacity 1s linear .3s;（translation针对的属性在元素hover前后都要有，因此，opacity必须有；其中，z-index 设置先后顺序，负值表示下移一层；）
鼠标移过出现背景色浮层：background: none; background: #a9afbb; transition: background 1s ease-in-out;(从none到有颜色，然后，再用transition对背景这样的变化设置时间)
鼠标移过文字上移：transform: translateY(-100px); transition: transform .3s linear;（先是transform，然后在利用transition对transform设置过渡的时间，其中，负值表示上移，正值表示下移。而且，要设置绝对定位。）
小图标旁边的文字：父：position: relative; 子 a：position: absolute; display: block;
调试小技巧：chrome的开发者工具很厉害呢，延程都是直接在chrome里测试移动多少像素合适，这样可以看到事实更新的数据；当这些都调好之后，就将数值再写入页面。另一个就是，我将所有的图片都保存为PNG的格式，包括小图标和幻灯片等，但后来人民群众都反应说，网页加载很慢，延程就建议说，除了小图标，其他的格式都保存为JPG，而且分辨率不会下降，然后，img的大小下降了好多。最后就是，再一次的记住，padding是要计算入width之内的，而margin是width之外的。
未解决的坑
鼠标移过图片放大后缩小：放图片的div的容器设置了大小，但还需要有overflow：hidden；但总是左边的图片使用了overflow后，右边的文字布局就会乱，自动掉下去了。未解决，已绕过。搜了一下，据说是overflow还可以清除浮动，还有一个高级的未理解的词BFC。
幻灯片：已不知道说什么，除了认真学习jQuery。目前还有全屏幻灯片的问题没有解决呢。
小小的分享
尽本分与压力大：有智慧的设立工作中的界限。
祂的恩慈领我悔改：哭过，抱怨过，但祂的恩典却在我最不配的时候，临到我。这一周，我知道我对面的同事是基督徒。Amazing Grace。
