在**在线已经工作了一个多月了，从刚开始只有基本的HTML技巧到现在对前端开发略有所知，最近这一个月学到了很多知识，这也要感谢我的同事对我的帮助，特别是感谢我的前辈，感谢感谢。
以下是我这段时间以来在技术和工作技巧上的收获总结，有个人总结，也有在网上学习的有用的技巧。不到之处，还请指正！
1、clear:both的使用以及FF浏览器设置margin-top 无效的解决方法
在子标签设置浮动之后，为了不影响后面div 的布局，需要在后面的div加上clear:both来清除浮动。
在FF设置margin-top无效，可以在设置了浮动的div 最后加上<div class=”clear”></div>(.clear{ clear.both;})来解决。
对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化，通过如下方法解决：
程序代码
</pre><p></p><pre name="code" class="html">.clear {clear: both; height:1px; margin-top:-1px; overflow:hidden;}参考网址：http://www.cnblogs.com/jenney-qiu/archive/2012/03/28/2421819.html
2、设置网页字体以及双引号使用的问题
在设置网页字体的时候可以直接写 font-family:微软雅黑; 也可以使用 font-family:”微软雅黑”; 效果是一样的。
双引号不可以嵌套使用，在已经有双引号的时候，里面的标签要使用单引号。
3、超链接跳转
在<a>标签内注意使用target属性，target:_bank _self _parent _top framename(分别是在新窗口、在相同的框架、在父框架、在整个窗口、在指定的框架中打开被链接文档)。
4、多次重复的图文混排
使用<dl><dt><dd>标签。<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。也就是说<dt>用来创建列表中的上层项目，<dd>用来创建列表中最下层项目，<dt>和<dd>都必须放在<dl>< /dl>标志对之间。
5、pading和margin属性在IE6的兼容性问题
在元素设置float的时候，同时设置margin或padding属性在IE6中会加倍，解决方法是利用IE6的专有识别符号“_”解决，即设置_margin为原有数值的一半来解决。
“*”为IE6和IE7专有识别符号，FF无法识别。
6、IE与Fire Fox识别CSS属性区别标签 !important
#page_body{
width: 1000px !important;
height:30px !important;
width: 980px ;
height:36px ;
}以上样式
在IE6/7中只执行width: 980px与height:36px
FireFox中则优先执行带有!important标签的CSS行width: 1000px与height:30px
记住，以上代码的顺序不能颠倒。
7、width与margin,padding之间的宽度计算问题区别
一个600px宽的div，margin,padding的值计算区别
ie{width: 600px;margin:10px;padding10px;}在Firefox中应修改为
FF{width: 560px;margin:10px;padding10px;}也就是说在FF中，margin,padding的左右值也要算在width中，600-10×2-10X2=560px
以上两点参考链接：http://www.poorren.com/css-ie-ff-margin-padding/
8、网页设置层宽的时候不要超过1000px，否则在缩小浏览器窗口的时候容易出现横向滚动条，影响浏览体验。
9、网页head中有文字的，可以通过在背景div设置背景为top并通过padding-top调整子元素的垂直位置，通过子元素的margin调节水平位置
10、input文本框的光标的IE浏览器下不垂直居中，可以设置一个较低的line-height，让后通过padding调节；<input>前后的文字和标签不对齐的时候设置<input>为display：inline-block解决。
11、设置页面最宽背景的方法：
设置<body>的css为：
.bg{background:url(bg.jpg);width: expression(this.offsetWidth > 1920 ? '1920px': true); max-width:1920px; margin:0 auto;}12、css中filter:alpha透明度使用小结兼容IE、火狐
{ilter:alpha(opacity=80); /* IE */
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/ }
简单解释，IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数（alpha(opacity)）使用大于0小于100的数值，其实也是百分比）。
filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。
Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
{style="width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}StartX和StartY：代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
13、自动隐藏多余的文字，带有省略效果
{style="width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}<span style="font-family:Times New Roman;"></span>14、网页添加百度分享 效果：
在<body>之间复制上如下代码：（只有联网的时候才有效果）
百度分享：
<!-- Baidu Button BEGIN -->
<script type="text/javascript" id="bdshare_js" data="type=slide&img=0&pos=right&uid=6615260" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
</script>
<!-- Baidu Button END -->15、地图锚点添加方法，适合在图片上添加链接的情况。
<img src="images/dx_18.jpg" usemap="#Map1" border="0" />
<map name="Map1" id="Map1"><area shape="rect" coords="386,74,609,90" href="www.shenglejia.com" target="_blank" rel="nofollow" />
<area shape="rect" coords="635,74,940,90" href="www.dengxiangtanjing.com" target="_blank" rel="nofollow" /></map> shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。
shape 属性用于定义图像映射中对鼠标敏感的区域的形状：
圆形（circ 或 circle）
多边形（poly 或 polygon）
矩形（rect 或 rectangle）
16、整个网页全部变成黑白效果，在CSS中加入如下代码
html {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}17、浏览器中最后一个图层无法加载父图层的背景，要在父图层上面加上overflow:hidden，让父图层自动适应高度。
18、在FF浏览器中设置背景的时候注意不要把repeat属性放在center和top属性之间，会造成背景图片无法显示
19、在FF浏览器中设置了a:active中超链接的文本或背景颜色之后，超链接会一直显示该颜色而忽略a:link中的设置的颜色。
20、在文本框中显示提示内容：
<textarea οnblur="if (value =='')
{value='你想说点啥'}" οnfοcus="if(value=='你想说点啥'){value=''}" οnkeyup="textup()"
οnkeydοwn="textdown(event)" class="text_are_01" id="content" name="content">你想说点啥</textarea>21、在标签内用placeholder="姓名" 也可以，不过IE浏览器不支持
22、如果有个别元素超过1000px主层的，也可用 position: relative;
right: 12px;平移主层解决，但是主层内的元素要相应向左纠正。这个方法需要body背景图片配合使用。
23、position属性:
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
24、"rel=nofollow"如果是链接到公司网页不要在<a>标签加这个，如果不是连接到本公司的页面就要加这个。
nofollow的使用
nofollow有两种用法：
1.用于meta元标签：<meta name="robots" content="nofollow" />，告诉爬虫该页面上所有链接都无需追踪。
2.用于a标签：<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。
nofollow主要有三个作用：
1.防止不可信的内容，最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接，为了防止页面指向一些拉圾页面和站点。
2.付费链接：为了防止付费链接影响Google的搜索结果排名，Google建议使用nofollow属性。
3.引导爬虫抓取有效的页面：避免爬虫抓取一些无意义的页面，影响爬虫抓取的效率。
简单来说，“nofollow” 标签是Google、Yahoo和微软公司前几年一起提出的一个标签，链接加上这个标签后就不会被计算权值，搜索引擎支持nofollow属性，在很大程度上抑制博客或论坛的垃圾留言。
扫一扫
2161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
