分类目录归档:网站前端开发注意事项

CSS3圆角border-radius阴影box-shadow兼容ie9+ 谷歌 火狐

-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-box-shadow:  -2px 0 5px rgba(125,125,125,0.8), 0 -2px 5px rgba(125,125,125,0.8), 0 2px 5px rgba(125,125,125,0.8), 2px 0 5px rgba(125,125,125,0.8);

-webkit-box-shadow: -2px 0 5px rgba(125,125,125,0.8), 0 -2px 5px rgba(125,125,125,0.8), 0 2px 5px rgba(125,125,125,0.8), 2px 0 5px rgba(125,125,125,0.8);

box-shadow: -2px 0 5px rgba(125,125,125,0.8), 0 -2px 5px rgba(125,125,125,0.8), 0 2px 5px rgba(125,125,125,0.8), 2px 0 5px rgba(125,125,125,0.8);

form表单中input type submit ie6、7兼容css

对应HTML:<input type=”submit” class=”sub” />

适用场景:form表单中的提交按钮在很多CMS中都是用submit完成的,切图时需要用设计师做好的图片为背景,可是ie6下总出问题,于是查阅资料经过总结后有了下边的css

.sub{
border:none;
display:inline-block;
font-size:0;
line-height:0;
*font-size:0;
*line-height:normal;
*padding-left:999px;
*overflow:hidden;
cursor:pointer;
}

使用方法:再加上background和width、height即可完美展示提交按钮

CSS重置reset样式表

*{
padding:0;
margin:0;
}
ol,ul,li{
list-style:none;
}
img{
border:none;
}
h1,h2,h3,h4,h5,h6{
font-size:12px;
font-weight:normal;
}
input,select{
vertical-align:middle;
}
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells:show;
}
.cf:before, .cf:after {  
content:"";  
display:table;  
}  
.cf:after {  
clear:both;  
}  
.cf {  
zoom:1;  
}
.clear{
clear:both;
}
body {
color:#333;
font:12px/20px Arial, "宋体", sans-serif; 
}
a {
color:#333;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
color:rgb(2,45,137);
}
i{
display:inline-block;
vertical-align:middle;
margin:0 5px;
}
.lt{
float:left;
}
.rt{
float:right;
}

其中cf用来清除浮动,添加于浮动标签的父级标签

i,常用来做小图标(可查看新浪腾讯等大网站都是这么做的,使用率相当高),提前重置,需要小图标的地方只需要加上background和width、height就可以了

lt,rt用来左浮动和右浮动