公司前端页面制作小心得

公司前端页面制作小心得

先交代一下背景，本人css新手，在公司做前端工作了将近一个月了，学到了一些东西，现在总结一下在制作网页时我自己会忽略的小问题；记录下来，平时经常看看，可以达到提醒自己尽量避免这类问题的效果。

1.          制作页面的时候，最小宽度的问题：针对要求占屏幕100%的div或者背景而言，除了需要设置width:100%;还需要给其div或背景图增加一个min-width：1200px; 的属性，保证其在IE中最大化窗口后可以正常显示，缩小窗口时仍然占满屏幕，不能出现背景图缺失。但是最小宽度在IE6下存在兼容问题，可以通过写.min_width{min-width:300px;_width:expression(document.body.clientWidth< 300 ? "300px" : "auto");}尝试解决问题，但还存在一点点漏洞，需要深入学习；写完的页面需要放到小窗口里测试一下，注意自适应、百分比、最小宽度之类的问题；

2.          制作表格页面的时候，<tr>下<td>个数不一致的问题：在做表格的时候，遇到<tr><td></td></tr>的过程中，若一行的<td></td>个数不一样的话，写出的表格比较容易出问题，可以将其通过：<table><tbody><tr><td colspan="2"></td></tr></tbody></table>中增加colspan属性使其变成相同个数的td；

3.          在制作表格中的select下拉菜单当中，<option selected="selected"></option>中的selected="selected"的元素会显示在下拉列表的默认选项中。

4.          表格中的radio按钮，如果有多个radio按钮，希望单击任意按钮，其余的按钮都不被选中，可以给多个按钮设置相同的name即可；如：<input type="radio"name="sex"></input><input type="radio"name="sex"></input>;

5.          关于几个常用的标签的使用问题：除了大标题之类的需要用到<hx>标签外，其他的文字段落之类的可以使用div,或者P、span标签都可以；只有当遇到需要加连接的标签的时候才能使用<a>标签;

6.          Padding/margin：0；初始值设定问题：为了优化网页，尽量不要使用*{margin:0;padding:0;},将其改为各种标签下{margin:0; padding:0;}，通常已经在reset.css样式表里定义过了。

7.          类似于logo或者banner大图，没有强求扣出图片；可以直接将其进行切片，减少不必要的代码出现;

8.          PNG图出现的问题：在平时制作网页插入图片时经常会有一些关于图片格式以及IE6情况下的兼容问题。首先说说GIF和JPEG格式的两类图片的区别：GIF图片保存出来的图会比PNG图片边缘带的锯齿更明显一些，因此通常情况下我们是建议使用PNG图片的，但是png图片在IE6下背景并非是透明的，因此需要处理一些兼容性的问题，以下是我学习到的几种小方法：（1）最简单的一种方法就是在PS里保存PNG格式的时候尽量使用PNG-8，且加个描边之类的，减小锯齿的严重程度；（2）.对于兼容IE6css,可以专门针对IE6写一些语句，即属性前面带一个"_"即可；例如：_color:#333;_margin-top:20px；因此如果是在IE6中有PNG的背景图可以对IE6使用GIF背景图，对其它浏览器使用PNG背景图；例如：

.conimg{width:1200px;height:158px;margin-top:40px;background:url(images/liucheng_img.png) no-repeat; _background:url(images/liucheng_img.gif)no-repeat;}

（其中需要注意的是：background语句一定要写在_background语句之前，否则将无法实现在IE6下使用GIF图；）；（3）. 通过JS脚本实现判断浏览器版本问题（是IE6还是不是IE6），对IE6使用GIF格式图片；对其它浏览器使用PNG图片；代码如下：   

<scripttype="text/javascript">

varbrowser=navigator.appName

varb_version=navigator.appVersion

version=b_version.split(";");

vartrim_Version=version[1].replace(/[ ]/g,"");

if(browser=="MicrosoftInternet Explorer" && trim_Version=="MSIE6.0"){

alert("IE6.0");

$(".png").hide();

$(".gif").show();

} 

   else{ alert("非IE6.0");

   $(".png").show();

   $(".gif").hide();}  

    </script>

9. margin加倍的问题：ie6下，div设置为float时，左（右）margin会加倍。

解决方法：在这个div里面加上display:inline; 

10.在改版一批页面的时候难免会遇到内容写的复杂或者改起来比较麻烦的时候，此时若是模块简单，建议自己重新写一下，避免代码过于冗余；

11.制作某一个固定的弹框的时候需要用到position:fixed;top:10px;left:10px;属性，固定其位置。此时需要注意设置position : fixed;属性的时候需要注意层级的问题~即：z-index:1;属性；

12. 针对一下子修改一批的页面来说，需要将所有的页面的位置固定，例如：一批表格距离body的左边距和上边距设定的值一定了，在阅览的时候也会比较方便，并且整齐美观。同时需要注意的是：针对有按钮（button）的表格，应该尽量避免两个按钮之间的间距过大，会使页面看着不是很和谐；

13. head头部的头像矩形图片需要写border-radius：50%；使头像变成圆形的，IE6下显方形属正常情况，不用调兼容；