效果和兼容问题

标签：

/* 查看更多收缩 延生 js效果*/

function showAllFriendly(){
$("#allFriendly").show();
$("#someFriendly").hide();
}

function hideSomeFriendly(){
$("#someFriendly").show();
$("#allFriendly").hide();
}

/*新闻段落出现省略号*/
width:250px;overflow: hidden;padding-left: 10px;text-overflow: ellipsis;white-space: nowrap;

/*阴阴影样式阴影样式影样式*/

box-shadow:4px 5px 6px #999

/*圆角*/
.footer-aboutus div.erweima-box {
position: absolute;
top: -110px;
left: 34px;
z-index: 1000;
display: none;
float: left;
width: 100px;
height:100px;
padding: 4px 0;
margin: 1px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;

div+css 圆角加阴影
<style type="text/css">
.test
{
display: inline-block;
padding: 5px 10px 6px;
text-decoration: none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
</style>

/*控制图片大小*/

设置图片 img缩小图片大小

/*看问题仔细点*/

看东西仔细点多看几遍。

/*透明背景*/
background: rgba(0,0,0,.2);

/*******兼容ie*********/
-moz-opacity: 0.3; /* FF 3.5以下 */
opacity: 0.3; /* FF 3.5及以上 */
filter: alpha(opacity=30); /* IE6及以上 */
background: #fff;

图片格式化
app_img.jpg wx_img.jpg wb_img.jpg 二维码图片 以后统一JPG格式
top_bar.png 头部图标
banner.png banner栏透明框图标
index.png 首页内容图标
footer.png 底部图标
floating_layer 右侧浮动图标

body{min-width:1220px} 关于网站小分辩率空白问题

.all IE{property:value\9;}
.gte IE 8{property:value\0;}
.lte IE 7{*property:value;}
.IE 8/9{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
.not IE{property//:value;}

http://61.145.159.156:5112/financing/sbtz/?btype=3
http://61.145.159.156:5112/financing/sbtz/?btype=3

div变成表格 display:table;

/*渐变*/

background: #ed2830; /* W3C syntax */ background:

-moz-linear-gradient(top, #ed2830 0%, #e62129 92%, #9c161c 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed2830), color-stop(92%, #e62129), color-stop(100%, #9c161c));

background: -webkit-linear-gradient(top, #ed2830 0%, #e62129 92%, #9c161c 100%);

background: -o-linear-gradient(top, #ed2830 0%, #e62129 92%, #9c161c 100%);

background: -ms-linear-gradient(top, #ed2830 0%, #e62129 92%, #9c161c 100%);

background: linear-gradient(top, #ed2830 0%, #e62129 92%, #9c161c 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#ed2830‘, endColorstr=‘#e62129‘, GradientType=0 );

/*阴影*/

-moz-box-shadow: 0 0 5px #717171;

-webkit-box-shadow: 0 0 5px #717171;

box-shadow: 0 0 5px #717171;

/*字段截取*/

text-overflow: ellipsis;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url("ellipsis.xml#ellipsis");

/*圆角*/

-webkit-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;

/*padding-left的兼容问题*/
padding-left基于盒模型，所以box-sizing属性会和padding-left、width属性一同影响到元素的最终宽度；而text-indent则始终不会影响元素的宽度。
这很重要，因为webkit和firefox的默认样式表里，会设置input元素的box-sizing: border-box，若你同时设置了width和padding-left，会出现webkit/firefox和IE低版本的很大的宽度区别。
因此，用到padding-left时，需要重置webkit和firefox的相应样式：input[type=text] { box-sizing : content-box; -moz-box-sizing : content-box; }

/* display:inline-block;兼容ie6*/

display:inline-block;*display:inline;zoom:1;

http://www.sz-marathon.com/cn/login 用户名：yueyue198 密码：yanesoo198

用input做成按钮 在火狐里面登录直接按Enter键需要增加 type="submit" type=button 就单纯是按钮功能 type=submit 是发送表单

效果和兼容问题

标签：

原文地址：http://www.cnblogs.com/xinyueqq/p/4957156.html