【web学习】搞了一下午才搞懂的一些事——生活需要实践

每天学习一点，成功更近一些。——蒋陈伟

前言

       从网上找了一些网页 psd 模版，自己切图，自己编写代码。做了一段时间，第一个 psd to html 成功了，心里还是比较激动的。毕竟，自己花了不少心思在上面。
        先把自己写好的页面给呈现上来：

演示地址：http://jlwmxe.aliapp.com/crafty/index.html

 

兼容性测试篇

       做好的第一件事，就是检测兼容性，开心的是，很顺利的通过了当前版本的火狐和谷歌浏览器（貌似一般都会通过）。但是，在测试 IE浏览器的兼容性时，出现了一些意外：IE7、8、9、11 中，网页显示基本正常，在 IE6 中出现了问题。

浮动问题
        对于解决浮动问题的方法，我知道的有3个（不知道对不对啊，其中有两个肯定是对的）：

      clear:both;    这是一个经常使用的方法（是我最先学会的），一直用 

 的方法来去除左右浮动，不过这个有限制（div 的位置可不能乱放，一定要符合 W3C 的标准，例如：div 不能放在 ul li 里面）。当然也可以写在父元素的属性里面。TIPS：clear 的属性不止 both 一种，还有 left 、right 、none 、inherit 。

      overflow:hidden;    这个方法，是我在慕课网学习的时候学到的，用起来一直很不错，终于在今天出现了问题。overflow:hidden; 在处理多个浮动时，在 IE6 中不会正常显示，这是一个非常头痛的问题啊。找了好久，找出了解决方案，加一个 *zoom:1; 没有试过能不能通过 W3C 的验证，留着以后尝试吧。

      定义 height ，这是一个没有办法的办法，一旦限定死高度，当内容增加时，会溢出。唉，少用为好。当然，如果块的内容不再改变时，可以试试。

       碰到这个问题后，一直喜欢用浮动来解决一些问题的我，不得不静下来思考一下，该如何处理一些情况。

领悟

       其实，当一些问题，换一种方式来解决时，说不定会比一直用的方式好的多的多。这样也能够更好的符合结构、表现和行为的分离，让代码更加简洁。

W3C 验证篇

       搞完了兼容性的问题，该看看 html 和 css 是否符合 W3C 的验证了。
        服务器对于我这中接触 html 和 css 没多久的人来说，还是比较高大上的（其实是有点贵啊，毕竟是在学习静态页面的阶段，需要测试的东西很少）。于是我找了很久，找到了 JD 云擎（虽然出现了一点小问题，但小麦还是比较喜欢 JD 云擎的，谁让他免费呢）。

无法验证

       让我很郁闷的就是，之前可以通过上传静态页面，通过二级域名来验证 W3C 标准的方法，现在不行了。找个免费的，好用的东西还是很难的啊。
        对于 css 的验证，还好说，毕竟人家有三种方法嘛。

        而 html 验证只有一种方法。验证出错怎么办？找别的储存空间！在阿里云发现了免费的ACE管理，还是蛮不错的，通过给 wordpress 加插件的方法，把 html 文件传到了存储空间，顺利的通过了 W3C 的验证，很开心的有木有？

感悟

有时候，遇到问题时，要换一种方式来思考，来解决，很多事将变得更加容易，简单。

犯个贱篇：svn的使用

       因为很开心，所以我犯贱了。人在兴奋时，会做一些抽抽的事。
        wordpress 加插件上传 html 的方法毕竟不好，有时候会遇到明明上传了，但看不见的情况（可能是因为插件的问题）。那就需要学习阿里云给我们指定的版本管理工具了（不会用的不要怕，我原本也不会，通过一两个消失的捣鼓之后，基础的我也学会了）。

如何汉化

       我有个很不好的习惯，那就是喜欢用正版的，但英语水平是一个硬伤，所以，svn 需要汉化。
        网上找了一些方案，不想用；找了一些软件，不想下。有时候我也想抽自己，没办法，上官网。上了官网才发现，其实，人家是提供汉化包的（那时我真的真的有想抽自己的冲动，不过，我忍住了）。
        40种语言包，还是比较全面的，反正有中文的，不管其他的了。

        如果还有一点英文都不认识的小伙伴，右上角有 ZH ，也就是中文的意思，整个网页大部分会编程中文了。
        至于安装方法和使用方法，小伙伴们还是自己上网搜搜吧。

感悟

       做事要仔细，这样，无形中会为自己解决很多潜在的问题。

总结

       搞了一个下午，还是有所收获的，生活就是需要实践，如同古人说的，实践出真知。

PS：

       欢迎小伙伴们前来交流，希望我们能够成为互助的好友。

百度经验链接：http://jingyan.baidu.com/article/a65957f4f2e9c824e67f9b1c.html

新浪微博链接：http://weibo.com/p/1001603824746943887373