1、表格隔行变色且隔td单元格变色,2、多色的th

1、表格隔行变色且隔td单元格变色

感谢 boahy给的思路,让我抛却了各种想的索引值的写法。不然还得在索引值的大坑里面扑腾下去。
td,行和列交叉有重色块。 需要看每行的颜色。(这个地方的颜色要用
“各一行一种样式
Boahy 16:35:30
写两种样式就够了
Boahy 16:35:42
然后交替显示每种样式
Boahy16:35:55
哪里有什么叠加”)“

为了表现明显些,我准备把这张图由1 变成2.
12014-07-25_094755
22014-07-25_095722

td颜色 第一行 32 32 32, 隔行 21 21 21(从每行来看,再找共同点奇偶行相同)

//td颜色
$('.tb tr:even td:even,.tb tr:odd td:odd').css({'background':'#ddd'});
$('.tb tr:even td:odd').css({'background':'#ccc'});

.tb tr:even td:even    tr:even 偶数行里面的 偶数td 和 奇数行里面的 奇数 td
偶数第一行是tr th行。实际有表现的是 偶数第二行 标注黑色字号的2 1 2 1 中的 22 为#ddd是偶数td。

.tb tr:odd td:odd    tr:odd  奇数行里面的 奇数td  32 32的2

$(‘.tb tr:even td:odd’).css({‘background’:’#ccc’})    偶数行的 奇数td。

以往做的时候多考虑,奇偶行数,这次把奇偶行数tr和奇偶表格td全考虑到了。

(私以为不会有人会遇到这么奇葩的表格)

2、多色的th ,这个用了两种方法

① 利用th索引值,添加递增样式。

 //th 的颜色
        $('.tb th').each(function(){
                        i=$(this).index();
                        $(this).addClass('tab_th'+i);
        });

所需要建立多个class

css文件

.tb  .tab_th0{ background:#64badc;}
.tb  .tab_th1{ background:#fdd059;}
.tb  .tab_th2{ background:#ec985f;}
.tb  .tab_th3{ background:#ec61ae;}
.tb  .tab_th4{ background:#7ae85a;}
.tb  .tab_th5{ background:#7b9ca3;}
.tb  .tab_th6{ background:#f4c377;}
.tb  .tab_th7{ background:#ca837b;}

麻烦,不过有可能其他项目会用到

② 利用数组存储背景颜色赋值 √  这个好用,有多个表格也不怕了

function tb_th(id){
	//th颜色
		var Arr=['#64badc','#fdd059','#ec985f','#ec61ae','#7ae85a','#7b9ca3','#f4c377','#ca837b'];
		for(var j=0 ;j<Arr.length;j++){
			$(id+' tbody tr th:eq('+j+')').css({'background':Arr[j]});
		};
	};
	//表格添加th背景色
	tb_th('#tb1');
	tb_th('#tb2');

ps:要保证Arr的颜色值个数= 最大的表格th个数。Arr.length  >=   th.length

demo1(class名字)

demo2(数组)

宽度100%,缩小浏览器,有滚动条,右侧出现空白bug

当浏览器窗口缩小,默认100%宽度为浏览器窗口的宽度。忽略下部内容层固定宽度(1100px)。就出现了固定宽度大于100%宽度的现象。查看以此理解来解析页面,就出现了容器宽度理解上的差异,出现了一个非常奇特的BUG。

width:expression_r(document.body.clientWidth <= 1100? "1100px": "auto"); min-width:1100px; 这种bug一般不常见,或者没有注意到。 但网站放到手机上浏览的时候,就会发现,右侧大块空白。 直接设置 把最大宽度设置成 min-width:npx; 即可

submit 和 button的区别

type=button      就单纯是按钮功能   
type=submit      是发送表单

但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一. 

用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。

 

 

<input type="submit" name="b1" value="提交"     onClick="bt_submit_onclick()">
执行完onClick,转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。

<input type="button" name="b1" value="提交"     onClick="bt_submit_onclick()">
执行完onClick,跳转文件在 js文件里控制。提交需要onClick。

 

 

比如:

1,onclick="form1.action='a.jsp';form1.submit();"     这样就实现了submit的功能了。

2,<form    name="form1"    method="post"    action="http://www.sina.com.cn">   
       <input    type="button"    name="Button"    value="Button"    onClick="submit()">   
   </form>

3,<input    type="button"    name="Button"    value="Button"    onClick="javascript:windows.location.href="你的url"">

 

 

===============submit 和 button的区别=================================== 

 submit:特殊的button,会自动将表单的数据提交 ,onClick方法不加return 会自动提交,并不会起到约束的作用,所以,使用submit时需要验证请加 return 例: 
  <input type="submit" name="Submit" value="  注 册  " onClick=" return check();">  ,在JS中判断的时候 写return true 或者 return false

 button:普通的按钮,不会自动提交表单数据  可以在JS中显式提交:document.form1.submit(),使用场合: 一个页面有多个提交按钮,需要根据用户的操作来确定到底提交到哪个控制器,这种情况下,就需要在JS中判断用户的操作,然后根据操作来给document.form1.action赋值并且document.form1.submit()来提交

 

===============如果想好所有的提交都在一个servlet中处理,该怎么做==================
 提交的按钮也是HTML组件,所以也可以通过 getParameter()来
 得到,那么getParameter()的参数也需要固定下来
 参数就是所有的表单的提交按钮的name,当然提交按钮的name要一样才能统一在一个servlet中根据提交按钮的值来区别操作

 

======================关于路径的设置===================================
A。在页面中直接写路径,如 href="jsp/a.html" 表示 平级目录的访问,此例表示平级目录中有个JSP文件夹,访问的是文件夹中的a.html文件

B。在JAVA中直接写路径 如 response.sendRedirect("jsp/a.jsp")表示项目根目录下有个JSP文件夹,访问的是文件夹中的a.jsp文件

c.如果发现以上设置在浏览器中的地址栏不正确,可以采取绝对路径写法: 
  /工程名/文件夹名/文件名

************在以后的开发中可能有N多的文件夹N多的类和页面,在访问的过程中可能需要访问上几层中的文件夹
—–aaa文件夹      a.html
 |
 |——bbb文件夹  b.html
   |
   |
   |——-CCC文件夹  c.html
 

 如果想要在c.html中访问  a.html 有几 种写法: 
  1。 ../../a.html  说明:  ../表示上级目录
  2.  /工程名/aaa/a.html 说明:使用绝对路径

***********以上内容供以后开发复杂项目时参考,暂时作为了解
***********更改路径小窍门: 可以根据浏览器中地址栏显示出来的路径来有针对性的修改至正确的URL
  

========================默认显示页面=================================
当访问 web项目时,默认会显示根目录下的index.jsp or index.html文件

资料来源

http://www.cnblogs.com/Myhsg/archive/2008/08/14/1268201.html

http://blog.csdn.net/qianjunxian/article/details/4088515

 

今天在做拖拽效果的时候发现用a点击可以实现,用button与submit都不可以,搜索后有其他发现。转载之。

 

在IE6下 png背景图片透明和插入图片透明兼容解决

写在前面的话:我曾经找了个JS解决了png在IE6下的不透明。可是后来在做某个登录页面时,写了两个按钮的背景图片和Hover是两个不同圆角的,加上了JS可是按钮图片在碰触hover的时候出现的背景图片在IE6下出现的竟然还是不透明,有难看的青灰色边框。百思不得其解,后经过在各处寻找资料得到原来在IE6下,你的透明png图片在做背景图片,而不是直接插入的时候也会出现兼容问题。故总结此文,希望能帮上和我遇到同样问题的同学。

PNG图片,具有透明背景的png格式图片在IE6中却不是 背景透明的,透明背景部分会显示出#DBEAED的淡灰色,表现效果很糟糕,为了使用透明背景图片只有采用gif格式了,但是gif格式会出现明显的锯齿 效果,所以只有设法修复IE6的这个问题。解决的办法就是使用IE的Microsoft.AlphaImageLoader滤镜。

· 在PS切页的时候,保存为png24.(在某设计群讨论过png8和png24的区别。Png24无调色板、支持阿尔法-alpha通道的半透明、每个点阵都有透明度的定义,最低32位真彩色。)

下面的都是在png24保存下进行的。(因为png24的保存容量较大,建议只透明图片用png保存,其他img用gif、 jpg保存。)

方法1所能达到的效果是,在页面html上面插入的所有png图片能保持透明。

correctpng.Js (因为百度博客写的字数有限制,可以下载JS)

Html页面写<script type="text/javascript"  src="js/correctpng.js" ></script>

这个方法很快捷,优点是在页面html上面插入的所有png图片IE6I、IE7、 E8、 FF都能保持兼容透明。

缺点是:不过在处于在CSS中写的背景图时,在IE6会有灰色边框,不透明。解决方法是需要方法2

方法2:所需图片为png背景图的时候。可以用css属性写,用的是图图片路径调用(这也是少的原因,每个png图都要有路径写的是!import)。

.png{
background: url(/angel.png) no-repeat !important;  
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://images.baidu.com/angel.png");  
background:none;  
width:100px;  
height:100px;
}
HTML代码:
<div class="png">背景PNG透明<div>

以上代码使用了一些IE的Hack,IE7,IE8,Firefox直接应用_background,IE6则会应用filter!

方法2解释原理

应用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的 “存在”,虽然IE7已经支持都是IE6还是不行。

虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:
IE5.5+的AlphaImageLoader滤镜

语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

了解了以上的内容,可以写一段简单的CSS代码(还不是完全正确的代码):

#div1 {
   height: 600px;
   width: 260px;
   padding: 20px;
   background-repeat: repeat;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png"

}

这段简单的CSS代码就可以在IE中正常的显示PNG透明背景,但是会发现在FF下不会出现背景,分析原因:
AlphaImageLoader滤镜只能被IE支持,FF是不支持该滤镜的
有些初次写的时候很多人会这样:
在代码中添加这样一段: background-image: url(bj1.png);
添加这样一段代码虽然能解决FF下的问题,都是IE又出现问题:新的背景会覆盖在滤镜的背景之上,导致滤镜显示无效,这时候就用到IE和FF对CSS读取的区别特性了:
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>),而IE不识别(包括IE7),所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。代码如下:

html>body #div1 {
   background-repeat: repeat;background-image: url(bj1.png);
}

同时,我们通过只有IE才识别的通配符(*),来定义IE浏览器中的滤镜。代码如下:

* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")

}
而#div1 {}就放一些IE和FF共用的设置来减少代码文件的大小。最终就是这样:
#div1 {
   height: 600px;
   width: 260px;
   padding: 20px;
   background-repeat: repeat;
  

}

/* for ie7 ff*/
html>body #div1 {
     background:url(../images/menu1.png) no-repeat;
}
/* for ie6 */
* #div1 {
     background:none;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/menu1.png’, sizingMethod=’crop’);
}

需要注意的是:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。

主流浏览器对于CSS3与HTML5支持情况

数据来源:http://www.findmebyip.com/litmus/

支持 CSS3 和 HTML5 的浏览器越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,至少要对各个浏览器对这两种新技术的支持情况有一个全面了解。

需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种功能的详细支持情况清单。

CSS3 属性

可以看出,全盘支持 CSS3 属性的浏览器有 Chrome 和 Safari,而且不管是 Mac 平台还是 Windows 平台全支持。

 

CSS3 选择器

除了 IE 家族和 Firefox 3,其它几乎全部支持。Chrome,Safari,Firefox 3.6,Opera 10.5 成绩最好 。

 

HTML5 Web 应用

Safari 对 HTML5 Web 应用的支持最好,除了地理定位功能,其它都支持。

 

HTML5 网页内嵌对象

这应该是 HTML5 最令人期待的东西,内置的画布,视频,音频等对象。全部支持的有 Chrome,Safari,Firefox 3.6,Opera 10.5。IE家族则全军覆没。

 

HTML5 音频编码

Opera 10.5 支持的最全面,IE 家族又是颗粒无收。

 

 HTML5 视频编码

H.264 任重道远。

 

HTML5 各种表单对象

Mac 平台下的 Chrome 成绩最佳。这些表单对象让人想起了桌面程序。

 

HTML5 表单对象属性与行为

又一次想到了桌面程序。

 

结论

目前,对 CSS3 和 HTML5 支持最好的是 Safari,Chrome 次之,Firefox 3.6 和 Opera 10.5 旗鼓相当,IE家族最差。鉴于这种情况,假如你想使用这两项新技术创建一个先锋体验式站点,现在的 CSS3 和 HTML5 可以让你实现,假如你希望这个站点能被绝大多数人正常访问,现在还为时过早,折中的方案是,为不支持 CSS3 和 HTML5 某些功能的浏览器提供降级方案,当然,其中要涉及到很多问题,包括浏览器,版本,平台的探测,CSS Hack 等等大量工作,相信是得不偿失的。

css圆角

【转载】uecss.com

css3和html5 在大家的眼中已经不是什么新鲜的事了,但是能兼容它的浏览器却不是全部,而我只是简单的看了它们的一些属性,简单的性的了解了一下。前些时间一个同事让我写一个圆角的div,要求是尽量少放图片,我想到了css3中有这个属性
在网上查了查发现写圆角的方法还是有很多的。大概的总结了以下几点:

1.灵活的圆角

为了能让圆角更加灵活,我们可以把容器里的每个圆角都做成一个独立的元素,通过CSS强行定位到父容器的四个角上。在这个方法里,我们只需要用到下边这个图片。

HTML:

<div class="box">  

 <span class="crnr tl"></span>  <span class="crnr tr"></span> 

 <h3>This is a heading</h3> 

 <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p> 

 <span class="crnr bl"></span> <span class="crnr br"></span> 

</div>

CSS

.box{

         position:relative;

         width:200px;

         height:300px;}

.crnr{

         position:absolute;

         background:url("http://uecss.com/wp-content/uploads/2010/04/crnr-sprite.jpg")no-repeat;

         width:20px;

         height:20px;

 }

.tl{

        left:0;

        top:0;

        background-position:00;

}

.tr{   right:0;

        top:0;

        background-position:-20px0;

}

.bl{   

          left:0;

          bottom:0;

          background-position:0-20px;

}

.br{right:0;bottom:0;background-position:-20px-20px;}

优点:能自动适应父容器的大小,浏览器兼容性非常强。

缺点:为了实现圆角,添加了一些没有意义的标记。

2.Border radius(边界半径)

css3中为boder增加的一个属性border-radius,目前这个属性已经被Firefox和Safari 3(Chrome)支持,比较遗憾的是IE不支持此属性。

HTML:

<div class="box"> 

 <h3>This is a heading</h3> 

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p> 

</div>

CSS:

.box{width:200px;height:200px;background-color:#EE2E24;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;}

优点:这种方法不需要添加任何多余的标记,而且可以非常方便睇修改圆角的半径,是最易上手的方法。

缺点:虽然符合W3C的标准,但缺乏浏览器支持。

3.多个背景图片

CSS3对background属性做出了一些重大改进,在CSS3标准里,我们可以把多个背景图片应用到同一个元素里。我们利用这个特性为容器加 上圆角效果。HTML代码与上例保持一致,在CSS中需要先把四个圆角的图片分别做好

CSS:

.box{

background:url(top-left.gif)topleftno-repeat,

                      url(top-right.jpg)toprightno-repeat,

                      url(bottom-left.gif)bottomleftno-repeat,

                      url(bottom-right.gif)bottomrightrepeat-y;

}

优点:没有多余的标记,可以分别设置每个圆角的半径。

缺点:使用了W3C未明确定义的方法,浏览器兼容性很差,目前只有Safari和Chrome对此方法支持良好。

4.结合CSS3和JavaScript,兼容所有浏览器

这是一种很不错的实现跨浏览器圆角的解决方案,结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费J该脚本的最大优势是可以在Safari/Chrome/Firefox中
使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。

你所需要做的就是在页面中引入curvycorners.js:avaScript库。

下载这个js

然后引用

<script type="text/javascript"src="curvycorners.js"></script>

然后定义以下样式:

.box{

        width:220px;

        padding:10px;

        background-color:#DDEEF6;

        border:1pxsolid#DDEEF6;/* Do rounding (native in Safari, Firefox and Chrome) */-webkit-border-radius:6px;-moz-border-radius:6px;}

然后在上面的样式后面定义以下代码:

<script type="text/JavaScript">addEvent(window,’load’,initCorners);

functioninitCorners(){varsetting={tl:{radius:6},tr:{radius:6},bl:{radius:6},br:{radius:6},antiAlias:true}curvyCorners(setting,".roundedCorners");}</script>

tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等) 你可以像这样在前面的代码中定义:

…curvyCorners(setting,".roundedCorners");

curvyCorners(setting,".roundedCorners_1");

curvyCorners(setting,".roundedCorners_2");…

HTML代码如下:

<div class="box"> </div>

这样圆角的效果就出现了!