效果和兼容问题

/* 查看更多收缩 延生 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 是发送表单

时间: 2024-10-10 10:14:22

效果和兼容问题的相关文章

堆叠相冊效果,兼容pc和移动端

在手机端,堆叠效果的相冊是比較常见的一种图片展示方式,每一个人的思路可能会有一些不同,实现的方法不同. 本篇博客主要是分享下我的实现方法.欢迎大家提出建议,指出我的不足,先3Q啦~ 先看一下终于的效果图: 思路和原理分析: 1.首先是布局上的问题.默认显示五张错位图片,剩下的图片遮挡在第五张图片的背后.错位使用的是css3的transform的属性,使用rotate属性值.对显示的五张图片进行不一样的旋转. 2.js实现上的问题. (1)推断移动端和pc端.相应兼容使用mouse事件还是touc

【jQuery】利用淡入淡出效果实现兼容IE6的告警提示

其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择jQuery,是因为这东西能够很好地兼容IE6. 一.基本目标 当输入框的输入内容的字符数无论中文与英文大

堆叠相册效果,兼容pc和移动端

在手机端,堆叠效果的相册是比较常见的一种图片展示方式,每个人的思路可能会有一些不同,实现的方法不同. 本篇博客主要是分享下我的实现方法,欢迎大家提出建议,指出我的不足,先3Q啦~ 先看一下最终的效果图: 思路和原理分析: 1.首先是布局上的问题.默认显示五张错位图片,剩下的图片遮挡在第五张图片的背后.错位使用的是css3的transform的属性,使用rotate属性值,对显示的五张图片进行不一样的旋转. 2.js实现上的问题. (1)判断移动端和pc端,对应兼容使用mouse事件还是touch

jq鼠标经过之后图片效果(兼容ie8)

一.鼠标经过图标变换 <script src="images/jquery.1.9.1.js"></script><style type="text/css">.xxgk_list li {display: inline-block;float: left;position: relative;margin-top: 7px;}.xxgk_list li a {display: inline-block;width: 173px;

js实现简单的日历效果(兼容IE5 )

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="1.css"/> <script src="jquery-1.11.3.min.js"></

移动端兼容问题注意事项

1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页有300ms延迟,有时会造成按钮点击延迟或者点击失效. 苹果为了将适用于PC端大屏幕的网页能较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,发布IOS系统搭载的safari.如:在手机上用浏览器打开一个PC的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体.图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态. 双击缩放:用

全屏滚动效果H5FullscreenPage.js

前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto.js 功能清单: 1 快速实现页面全屏滚动效果.并提供多种翻页效果,兼容大部分ios和android系统. 2 支持在页面中添加多种动画元素效果 来实现淡入,滑入等效果. 3 支持配置音乐功能. 4 支持摇一摇接口功能. 组件核心代码原理: 1 页面滚动 在移动页面上如果想使用滚动,如过没有任何动画

IE6以及各个浏览器常见兼容问题

综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作. 1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁. 产生条件:不同浏览器: 解决办法:利用css reset文

兼容总结

1.css中设置div高度兼容(兼容ie8,ie9,谷歌,360,火狐等) <div style="border: 1px solid red; width: 100px; padding: 10px;"></div>  在Firefox中,div的完整宽度是padding+width,因此width: 100px; padding: 10px;的实际宽度是120px;而在IE6中,div的完整宽度是width,即100px;通过!important标记,可以设