做web前端的感悟

   大学还没毕业就匆来了家软件公司，一开始就叫我做前端，一开始我是拒绝的，心想我学的是做php后台的，前端会一点就可以了。不过后来听了几经理的开导以及几位

老程序员的细心讲解，我感觉做好前端也是成为一个好的程序员的必修课。

   一开始只会简单的div+ css布局，切图也是花了一个小时 的时间学习的，做到后面感觉问题也越来越多，特别是要兼容ie6浏览器的问题。以前写代码，写到哪算到那，只要浏览器不出现明显的错乱就可以。可是这次刚刚写好的页面一放到ie6中什么都乱了。这下才意识到兼容的重要性。于是一行一行代码的修改。

  几天的前端做完以后，发现了不少的问题，也总结了许多经验，下面就和大家分享一下。首先是切图，网页设计师给的都是psd文件，这里ps有个快捷键按住ctrl+alt 然后用鼠标右键你想要隐藏的内容这样会在左侧的图层里看见相应的图层，点一下眼睛就能隐藏。切图要完全按照图片的尺寸大小，按住alt键滑动鼠标能放大缩小。切好图按住ctrl+shift+alt

+s保存切好的图片。

  图片切好了，接下来就是布局了，首先要规划好网页的内容，什么该用什么要想好，有的公共的可以抽取出来。网页中用的最多的就是float浮动，可以用来做一些标签的定位。

首先设置和一个100%的div，在100%的div里面设置一个固定长度的div，固定长度div设置居中margin:0 auto；这样在怎么布局页面都不会乱。还有一些注意事项，行内标签里最好不要嵌套其他标签，可能会造成页面的紊乱，比如span，img等行内标签给其加一个display：block；可以使其变成块状标签，可以控制其宽高。再有就是一些标签的选择，

带有图片加文字的列表可以使用dl dt ，纯文字的可以使用ul li，等。

在做到ie6兼容时，遇到一个问题就是透明背景，background:rgba(255,255,255,0.7);这个属性在其他浏览器可以，在ie9以下就不行了，所以这里我采用了ie中的滤镜来做

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#9FFFFFFF,endcolorstr=#9FFFFFFF);这样在ie下亦可以显示透明背景。还有就是解决png-24格式的透明背景图片在ie6中背景为灰的情况，这里要判断以下浏览器，加载一段js，<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->，记住ietest可能有时候会有bug，重启一下或者用真正的ie6测试。

  还有一个特别好用的东西，不知道大家有没有遇到过这样的问题，按钮的圆角或者div’的圆角，大家一定想起来一个属性border-radius，的确这个属性能实现圆角，可是如果是ie浏览器，这个属性就没什么用了，下面教给大家一个好的方法。在你的css文件里面加载一个iecss3.htc文件，语法behavior: url(css/iecss3.htc);记住在哪个标签用就加到那个上面，在把那个文件放到css目录下。这样你使用border-radius在ie下也可以使用了。

 今天就说到这吧，以后遇到问题还会来分享的