‘W3C’ 分类下的所有文章
2010九月30

table 美观例子

css 评论关闭

?<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″utf-8″ />
</head>
<style type=”text/css”>
/* CSS Document */

body {
font: normal 11px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}

a {
color: #c75f3e;
}

table {
width: 700px;
padding: 0;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA? no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}

td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*———for IE 5.x bug*/
html>body td{ font-size:11px;}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
}
</style>
<body>
<table cellspacing=”0″>
<caption> </caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
<th>居住地点</th>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
</table>

</body>
</html>

2010九月30

网站变灰色

css 评论关闭

?方法一
1::<head></head>中加入代码:
<style>
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
</style>

2:在css文档种加入以下代码
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
若 FLASH的颜色不能被CSS滤镜控制,可以在FLASH代码的<object …></object>之间插入:
<param =”false” name=”menu”/>
<param =”opaque” name=”wmode”/>

方法二、给body加个css滤镜(仅限IE)
body {filter:gray;}
flash变灰的方法:object 之间加入
<param value=’false’ name=’menu’/>
<param value=’opaque’ name=’wmode’/

2010九月30

filter滤镜:控制页面的透明度,颜色,灰度,波纹

css 评论关闭

语法:STYLE=”filter:filtername(fparameter1, fparameter2…)”
(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)
滤镜说明:
Alpha:设置透明层次 ?
blur:创建高速度移动效果,即模糊效果
Chroma:制作专用颜色透明
DropShadow:创建对象的固定影子
FlipH:创建水平镜像图片
FlipV:创建垂直镜像图片
glow:加光辉在附近对象的边外
gray:把图片灰度化
invert:反色
light:创建光源在对象上
mask:创建透明掩膜在对象上
shadow:创建偏移固定影子
wave:波纹效果
Xray:使对象变得像被x光照射一样

哀悼日期间设置网站页面为灰色:
<style>
body{
? ?? ???filter:gray;
}
</style>

2010九月30

页面中所有的控件形状,位置,大小

css 评论关闭

页面中所有的控件形状,位置,大小都可利用css来改变成所想要的效果。以前只是改td,div, 文字,要意识到input也是html元素,当然也能改变!!!

2010九月30

例子

css 评论关闭

1,<a href=”http://www.w3schools.com/css/tryit.asp?filename=trycss_float5“>导航条</a>

body{
font-family: “宋体”;
font-size: 12px;
//对于页面中出现的文字,如外部没有CSS,就用这个CSS,默认。即最外层的CSS影响它所包含的内部所有元素,若其没有自己的CSS,则外部的应用之,对应应用。因为如td之类没有字体之类的属性,这种对应指的是外部CSS属性与元素含有的属性的交。
如: td
{
font-size:12px;s
}
对页面中td内的文字应用。

background-color: #F8FDF8;
margin: 0px auto;
}

2, 连接:link:正常显示 visited: 点击过后 hover: 鼠标滑过 active: 鼠标按下时
a.link {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}
a:visited {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}
a:hover {
font-size: 12px;
line-height: 22px;
color: #009900;
text-decoration: none;
}
a:active {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}

注: visited要在a:link之后。 active要在hover之后才会有效果。
3, 当控件获得焦点时进行样式操作
&lt;html&gt;
&lt;head&gt;
&lt;style type=”text/css”&gt;
input:focus
{
background-color:yellow;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form action=”form_action.asp” method=”get”&gt;
First name: &lt;input type=”text” name=”fname” /&gt;&lt;br /&gt;
Last name: &lt;input type=”text” name=”lname” /&gt;&lt;br /&gt;
&lt;input type=”submit” value=”Submit” /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

3, 图片由半透明转为透明

&lt;html&gt;
&lt;head&gt;
&lt;style type=”text/css”&gt;
img
{
opacity:0.4; //firefox的用法,范围从0.0 – 1.0
filter:alpha(opacity=40) //ie的用法,范围从0 – 100
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Image Transparency&lt;/h1&gt;
&lt;img src=”klematis.jpg” width=”150″ height=”113″ alt=”klematis”
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ /&gt;

&lt;/body&gt;
&lt;/html&gt;

4, 改变html的表现形式: 如input text 这个文本框让其只有下线,改变其边框颜色
&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”&gt;
&lt;html xmlns=”<a href=”http://www.w3.org/1999/xhtml”>http://www.w3.org/1999/xhtml</a>”&gt;
&lt;head&gt;
&lt;meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;style&gt;
input {
border-color:red;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
sdf
&lt;input name=”" type=”text” /&gt;sfd
&lt;/body&gt;
&lt;/html&gt;

5, 百度输入栏:高度为28px, 而google为21px, 而中文高度比英文字母要繁,高度要高,显然百度的输入栏更符合输入中文。
&lt;input name=”" type=”text” autocomplete=”off”/&gt;
input[type="text"]{font:16px Verdana;height:28px;padding-top:2px} //改变html元素显示形状
注:页面要去掉头部的&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”&gt;

2010九月30

属性高级指定

css 评论关闭

1,Dimension :尺寸,用来控制控件的高与宽

  • img.big {height:120px}
  • p{max-height:100px;}? 最大高度,同样有:max-width; min-heigh; min-width;
  • 左右为left, right

2, Classification: 指定控件的显示方式

  • p {display: inline} 追加到上一行显示,即在同一行显示
  • span{display:block;} 控件已块显示,即分行显示
  • div {display: none} :不显示
  • img {float:right;} 图片浮动在右方
  • h2.pos_left{position:relative;left:-20px;} position:relative相对定位 position:absolute; 绝对定位 fixed; 固定
  • h1.visible {visibility:visible}? h1.hidden {visibility:hidden}? 控制控件是否显示
  • <span style=”cursor:pointer”>pointer</span><br /> 手形鼠标,指定鼠标样式 cursor:wait 等待
  • 定位:relative:相对于原来的位置移动,absolute:相对于页面移动,即相对于(0,0)

2,p

  • p:first-letter {color: #ff0000;font-size:xx-large;}? //首字母特别
  • p:first-line {color:#ff0000;font-variant:small-caps;} //首行特别
  • h1:before {content:”sdf”}? //在文本之前插入文字,或图片h1:before {content:url(smiley.gif)}
  • h1:after {content:url(smiley.gif)} //之后, before, after在IE中没有作用

3,z-index 属性设置元素的堆叠顺序
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
注:Z-index 仅能在定位元素上奏效(例如 position:absolute;)

2010九月30

属性指定

css 评论关闭

1, background
?? ???? body
?? ??? ?{
?? ??? ??? ?background: #00ff00 url(‘smiley.gif’) no-repeat fixed center;?? //当将css从文件中提取,放入一.css文件中时,图片路径注意调整
?? ??? ?}

  • background-color:yellow; 或者 background-color:#00ff00; 或者 background-color:rgb(255,0,255);
  • background-image:url(‘aaa.gif’) ? //默认:水平,垂直重复. 水平background-repeat:repeat-x; ? 垂直 background-repeat:repeat-y;? 不重复background-repeat:no-repeat;
  • background-attachment:fixed;? //指定背景图片是否固定,取值为scroll, fixed. 当为fixed时,图片永远在当前屏幕中显示,不会随滚动条的滑动而变化。
  • background-position:50% 20%;? 或者:background-position:center;???? 或者:background-position: 50px 100px;
  • 所有放在同一个;background: #00ff00 url(‘smiley.gif’) no-repeat fixed center;

2,text
?? ??? ?h1
?? ??? ?{
?? ??? ??? ?text-align:center;
?? ??? ??? ?text-transform:capitalize;
?? ??? ??? ?color:#800000;
?? ??? ?}

  • color:blue; color:#00ff00; color:rgb(255,0,0)
  • text-align:center
  • text-decoration:none 可用来去掉连接的下划线 , 其值可取:overline; line-through; underline; blink;
  • text-transform:uppercase :文本全部大写, 小写为:lowercase; 每个单词首字母大写为capitalize;
  • text-indent:50px;? 段落中指定首行缩进距离,为负时表示从右边开始缩进
  • letter-spacing:10px; 指定字母,汉字的间距
  • word-spacing:30px;; 指定单词,汉字的间距
  • line-height: 100%; 单倍行距
  • direction:rtl; 文本开始方向,默认从左开始。取值可为ltl, rtl
  • white-space:nowrap;设置如何处理元素内的空白。
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。

3,font

  • font-family:”Times New Roman”,Georgia,Serif? 当第一个浏览器不支持时,会依次尝试后面的字体。
  • font-style:italic;指定字体为斜体,normal为正常
  • font-size:40px;指定字体大小,默认为16px;
  • font-weight:bold; 设置字体精细,也可用font-weight:500; 在为数字时范围从100-900, 其中400相当于normal, 700相当于bold

4, margin, border, padding, content:指示一个控件的显示位置,控件就是content

  • margin: 控件周边的空白,在最外部
  • border: 控件的边框
  • padding: 填充, 边框与控件之间的距离
  • content: 控件
  • 一个元素的宽度由控件内容content + 左右padding + 左右border + 左右margin 组成。 当设置控件的大小时,实际设置的是content的大小。
  • width:220px;? content宽度
    padding:10px;
    border:5px solid gray;
    margin:10px;??????????????????? 实际宽度为:220 + 10 *2 + 5 *2 + 10*2 = 270px
  • 注:在IE中content宽度包含了border, padding即元素的实际宽度= content + 左右margin 若想得到上面的效果,要在头部加入:
  • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
    <html>……</html>

?
? 5,border

  • border-style:solid, 其值可为:solid 实线;none;dotted 点线;? dashed 虚线; double 双线; groove ridge inset outset hidden
  • 或每个边定义:border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
  • border-width:5px; 值为像素,或者: thin, medium, or thick.? border-left-width:15px;
  • border-color:red; border-right-color:#ff0000;

6, margin : 没有背景色,完全透明,填充空白

  • margin-top:100px; margin-top:2cm
    margin-right:50px;????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? margin-bottom:100px; margin-bottom:25%??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? margin-left:50px;
  • margin:25px 50px 75px 100px;? 上,右,下,左
  • margin:25px; 上,右,下,左 都是 25px

7, padding : 边框与控件的距离

  • padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
  • padding:25px 50px 75px 100px; 上,右,下,左

8,list : 项目符号列表

  • ul.circle {list-style-type:circle}
    ul.square {list-style-type:square}
  • ul.inside {list-style-position:inside}
    ul.outside {list-style-position:outside}
  • ul
    {
    list-style-image:url(‘arrow.gif’);? //以图片代表序号
    }

9, table

  • table {border-collapse:collapse} 设置border为融合,默认为分开,双线
  • table {border-spacing:10px 50px;}
  • caption {caption-side:bottom} 设置table的caption属性显示的位置
  • table {empty-cells:hide} 设置当表格为空时是否显示,IE不支持。
  • table { table-layout:fixed; } 表格布局, auto, 或 fixed auto:随着内容大小的改变而改变
2010九月30

基本定义

css 评论关闭

1,定义方式:selector {property:value}

? selector可一次应用所有元素,或用class指定,或用ID,前者时selector名字为html自带,后者为自定义。
? (1)定义多个属性用;隔开。p {text-align:center;color:red}
? (2)多个同一样式:
?? ??? ??? ?h1,h2,h3,h4,h5,h6
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?color:green
?? ??? ??? ??? ?}
?(3)应用多个样式:用空格分开 <p>This is a paragraph.</p>
?(4)内部样式,外部样式,在页面中应用:

?????????? <style>
p{ background-color:#006633}background-color:#006633}
</style>
?若有相同的css定义,相同的部分部分优先级为本页最高,其次是外部引用,本页覆盖外页,若不相同,则二者求并集。
优先级也可通过? !important 为调节,带它的优先级会最高,无论是内页还是外页。
.module ul{margin-left:-55px !important; } //直接加在分号前即可。

2,html自带:
??? (1)p {font-family:”sans serif”} ? ?? 页面中所有段落都会自动应用此样式。
??? (2)自带内部定义用 点 :p.right {text-align:right}? 应用于 ? <p>This paragraph will be right-aligned.</p>
??? (3)指定子类自动应用:input[type="text"] {background-color:blue}? 类型为text的所有控件都会被应用。

注:自定义的用. 如p.right, html的以空格隔开如:a:hover img {border: 1px solid #0000ff;width:500px;height:500px;} //以a 内的img应用
?<a target=”_blank” href=”klematis_big.htm”><img src=”klematis_small.jpg” alt=”Klematis” width=”110″ height=”90″ /></a>

3,自定义:以.开头,以class引用
???? .cc {text-align:center}
? ?? <p>This paragraph will also be center-aligned.</p>
????? 注:名称不能以数字开头,firefox不支持。

4,id指定,不用class
??? #username{color:green}? 则页面中ID为username的控件会自动应用此样式。

5,注释:/*This is a comment*/

6,总结:
?? ???? (1)自动应用的,即不用class指定的
?? ????????????? 1)名字以html元素开头,如body, h1, th, td,table
???????????????? 2)? 用[]指定子类型的。如:input[type="text"] {background-color:blue}
???????????????? 3)? 以#开头的ID,页面中有此ID的自动应用。
??????? (2)用class指定应用的。名字以 . 开头
??????????????? (1)页面元素前为元素名后为 .? 如:p.right {text-align:right}? 应用于 ? <p>This paragraph will be right-aligned.</p>
??????????????? (2)自定义,以 . 开头??? .cc {text-align:center} ? ?? <p>This paragraph will also be center-aligned.</p>

注:因一些浏览器不支持css, 要在<style></style>加上<!–????????????????????? –>

2010九月30

js含多个引号单引号时可用转义符

javascript 评论关闭

OnClientClick=’<!–Eval(“name”,”alert(\”{0}\”)”)–>’ &gt;

2010九月30

HTML radio指定相同name,则为互斥关系

javascript 评论关闭

<input name=”sex” type=”radio” />男
<input name=”sex” type=”radio” /> 女

2010九月30

HTML 用label来扩大按纽可选范围

<label for=”male”>Male</label>
<input id=”male” name=”sex” type=”radio” value=”on” />

2010九月30

Undifined 与 null

javascript 评论关闭

typeof(undefined) == ‘undefined’
typeof(null) == ‘object’
虽然 null == undefined的结果(true) 但还是有区别的,就是和数字运算时,10 + null结果为:10;10 + undefined结果为:NaN。

2010九月30

点击行变色,其它行不变


1 1 1
2 2 2
3 3 3
2010九月30

颜色转换rgb到#

javascript 评论关闭

rgb(207,0,0)转换为#就是#CF0000 即:求对应的数据的16进制即可,这也可能明白为什么rgb最大为255,因为15*15=255,16进制有15个数字表示。

2010九月30

像素是个相对单位,而不是绝对的

javascript 评论关闭

电脑显示器一般用分辨率来表示,电脑是1440×900分辨率,指的是每一条水平线上包含有1440个像素点,一个像素就是一个点,如果把一个像素放大,会发现,一个像素原来是一个小正方形,很像画在纸上的小方格子。显示器上布满了密密麻麻的这样的点,或这样的小正方形,我们看到屏幕上的图像,正是由这些点组成的。
毫米、厘米、米、英寸、英尺等都是绝对单位,无论把它放到什么地方,其值都是不变的。然而,像素就不是这回事了,像素的值是相对的,是由显示器的分辨率和显示器的大小决定的。比如把显示器的分辨率先设置成800×600像素,然后再设置成1024×768像素,前者的一像素就比后者的一像素要大

计算方式:比如说17的显示器(显示器大小指斜对线),分辨率为1024*768,则1像素=17*(17/25)开方*25.4毫米=0.313毫米 (1英寸=25.4毫米)

2010九月30

遍历table的行

javascript 评论关闭
var tb = document.getElementById('mytab');
     var rowNum=tb.rows.length;

     for (i=0;i<rowNum;i++)
     {

                 alert(tb.rows[i]);
     }
2010九月30

js 文件在在本地调试时总会出现:“为帮助保护您的安全….”

javascript 评论关闭

js 只是会在本地出现,上传到服务器上就不会了。
activeX则无论是在本地还是服务器都会显示。
若想在本地调试时不出现,可设置:工具-Internet选项-高级-允许活动内容在我的计算机文件上运行 打勾。

在本地弹出显示的原因:
网页中可能会加载远程的JS文件,所以会阻止,IE不会让本机一个网页加载其它域上的活动脚本内容的,但是如果你通过浏览器直接访问,因为js脚本和网站是同一个域,所以IE不会拦截。

2010九月30

在文本框中输入时保证总是在最后一个字符后输入

javascript 评论关闭

那就要在keypress时保证文本框的光标在尾部,而文本框value赋值后其光标默认在最后,故可采用如下方式:
<input name=”" type=”text” onkeypress=”this.value=this.value” />

2010九月30

禁止电话输入特殊符号

javascript 评论关闭

?<asp:TextBox ID=”txtTel” runat=”server” CssClass=”MustInputText” Width=”164″ AutoPostBack=”true”
??????????????? OnTextChanged=”txtTel_TextChanged” onkeydown=”check(this);” onkeyup=”check(this);” onchange=”return check(this);”></asp:TextBox>

? function check( tel ){
???????????? var e?? =?? window.event
??????????? //alert(e.keyCode);
?????????? ? if (e.keyCode == 8 ||e.keyCode ==46 || e.keyCode == 35 ||e.keyCode ==36||e.keyCode ==37||e.keyCode ==38||e.keyCode ==39||e.keyCode ==40 ){
?????????????? //避免backspace,delete,上、下、左、右、home,end不可用
??????????? }else{
??????????? tel.value = tel.value.replace(” “,”").replace(“\\”,”,”).replace(“-”,”").replace(“?”,”").replace(“(“,”").replace(“)”,”").replace(“(”,”").replace(“)”,”").replace(“、”,”,”).replace(“,”,”,”);
??????????? //alert(tel.length);
??????????? tel.focus();
??????????? if (tel.value.length>8){
??????????????? setTimeout(‘__doPostBack(\’txtTel\’,\’\')’, 0);
??????????? }}
??????? }

2010九月30

在本页面中输入数据提交到别的网站上去

javascript 评论关闭

1,观察对方网站的URL,看提交时是否用get方法,这样就可直接用url传参。
?2,若采用post方法,则在页面中定义和对方网站一样的变量,提交时action指向对方网站即可。
?<form name=”formQuery1″ method=”post” action=”http://www.nb315.com/CGI_EXE/BenowQuery.DLL
??????????????????????????????????????????? enctype=”application/x-www-form-urlencoded” target=”_blank”>
???????????????? …………………………………
??????????????? </form>