Css样式

dayone

浏览: 365403 次
性别:
来自: xian

最近访客更多访客>>

wangjie24

tadpole1027

sofia2034

hcyahoo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS JavaScript JSP ASP HTML

//div的样式
.img-sl {display:none;position:absolute;left:200px;top:30px;width:360px;border:3px dashed #8DB2E3}

</style>

定义边线：

1、border:3px dashed #8DB2E3 //3个像素的虚线边框

2、border:3px solid #8DB2E3 //3个像素的实线边框

××××××××××××××××××××××××××××××××××××××××××××××××××××

//设置select的样式（不能用css直接控制）
<html>
<head>
<style>
.box
{
     border: 1px solid #C0C0C0;
     width:   82px;
     height: 20px;
     clip: rect( 0px, 181px, 20px, 0px );
     overflow: hidden;
}
.box2
{
     border: 1px solid #F4F4F4;
     width:   80px;
     height: 18px;
     clip: rect( 0px, 179px, 18px, 0px );
     overflow: hidden;
}
select
{
     position: relative;
     left: -2px;
     top: -2px;
     width: 83px;
     line-height: 14px; color: #909993;
     border-style: none;
     border-width: 0px;
}
</style>
</head>

<body>
<div class = box><div class = box2>
<select size = "1" name = "D1">
<option>内容一</option>
<option>内容二</option>
</select>
</div></div>
</body>
</html>
****************************************************************************

//设置文本框的样式 2008-04-19
//定义样式，再使用javaScript脚本遍历页面的所有input.text文本框对象，将样式应用在每一个文本框上。
var a = document.getElementsByTagName("INPUT"); //获取页面上的所有文本框对象（数组形式的）
for(var i=0;i<a.length;i++)
{
if(a[i].type=="text")
{
a[i].className="text";
}
}

//----------在济南项目中的应用-------------
/**
* 方法说明：根据登录用户的权限编号，初始化界面样式；
* 创建：陈勇 2008-04-19
*/
var qxbh = top.ComFrame.document.all("qxbh").value ;
if(qxbh == "0" || qxbh == "" || qxbh == null)
{
     var a = document.getElementsByTagName("INPUT");   //设置文本框的样式css，并且设置为disabled
     for(var i=0;i<a.length;i++)
     {
     if(a[i].type=="text" && a[i].name != "startdate")
     {
       a[i].className="t1";
       a[i].disabled=true;
     }
     }

     var b = document.getElementsByTagName("textarea");   //设置文本（域）的样式css，并且设置为disabled
     for(var i=0;i<b.length;i++)
     {
     if(b[i].type=="textarea" && b[i].name == "beizhu")
     {
       b[i].className="area1";
       b[i].disabled=true;
     }
     }

     var c = document.getElementsByTagName("INPUT");   //设置复选框的样式css，并且设置为disabled
     for(var i=0; i<c.length; i++)
     {
     if(c[i].type=="checkbox" && c[i].name == "isInputDate")
     {
       //c[i].className="area1";
       c[i].disabled=true;
     }
     }
}
//----------------

***************************
连接文字<a href="index.html">测试</a>的“样式”，鼠标移动上去字体变色，点击后也变色
***************************
<style type="text/css">
<!--
A:link {color:#00007f;}
A:visited {color:#65038e;}
A:active {color:#ff0000;}
A:hover {color:#ff0000;}

-->
</style>

***************************
滚动条加样式举例：：：10:28 2008-4-1
***************************
※※※※※※※※※※※※※※※※『这个是起作用的』2008-03-31※※※※※※※※※※※※※※※※※
设置frameset滚动条，除了scrolling属性外，都是设置frame里链接页面的滚动条
如下：
<frameset rows="109,*" framespacing="0" frameborder="0" border="false" id="FrmAll" scrolling="yes">
<frame name="FrmTop" scrolling="no" frameborder="0" framespacing="0" noresize="noresize" src="FrmTop.aspx"/>
<frameset cols="210,10,*" id="FrmBorder">
<frame name="FrmLeft" frameborder="0" marginwidth="0" marginheight="0" id="FrmLeft" src="FrmLeft.aspx"/>
<frame name="FrmMid" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" noresize="noresize" id="FrmMiddle" src="FrmMiddle.aspx" >
<frame name="FrmMain" scrolling="yes" marginwidth="0" id="FrmMain" marginheight="0" noresize="noresize" src="FrmMain.aspx"/>
</frameset>
</frameset>
要设置FrmLeft的滚动条，只要在FrmLeft.aspx页面的 <head> 和 </head> 间加入样式:
<style type="text/css" >
        html{
            background-color:#ADD9E6;
    color:#000000;
    font-size:12px;
    font-family:SimSun;
    border-left:#ECF1F4 0px solid;
    border-right:#ECF1F4 0px solid;
    margin:0;                               /*控制滚动条左右侧实线颜色*/
            overflow-x:hidden;                      /*隐藏底部的横向滚动条*/
            scrollbar-arrow-color:#034079;          /*三角箭头的颜色*/
            scrollbar-3dlight-color:#ADD9E6;        /*立体滚动条亮边的颜色*/
            scrollbar-highlight-color:#89C4D5;      /*滚动条空白部分的颜色*/
            scrollbar-shadow-color:#89C4D5;         /*立体滚动条阴影的颜色*/
            scrollbar-darkshadow-color:#ADD9E6;     /*滚动条强阴影颜色*/
            scrollbar-track-color:#ADD9E6;          /*立体滚动条背景颜色*/
            scrollbar-base-color:#ADD9E6;           /*滚动条的基本颜色*/
       }
     </style>
你便会看到意象中的效果，祝你好运！
％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％

-----------------下边这组配色为（浅色，白）------------------------------
SCROLLBAR-FACE-COLOR: #fcfcfc;
SCROLLBAR-HIGHLIGHT-COLOR: #6c6c90;
SCROLLBAR-SHADOW-COLOR: #fcfcfc;
SCROLLBAR-3DLIGHT-COLOR: #fcfcfc;
SCROLLBAR-ARROW-COLOR: #240024;
SCROLLBAR-TRACK-COLOR: #fcfcfc;
SCROLLBAR-DARKSHADOW-COLOR: #48486c;
SCROLLBAR-BASE-COLOR: #fcfcfc
----------------------------
<STYLE>
BODY   {
SCROLLBAR-FACE-COLOR:   rgb(10,236,209);   //滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR:   rgb(23,255,155);//滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR:   rgb(255,116,23);//立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR:   rgb(66,93,127);//滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR:   rgb(93,232,255);//上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR:   rgb(255,70,130);//滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR:   rgb(10,0,209);//滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR:   rgb(66,93,128)；//滚动条的基本颜色
}
</STYLE>
---------------------------
<STYLE>
Body{
Scrollbar-Face-Color:#536BFD; //滚动条表面颜色
scrollbar-highlight-color:#536BFD; //滚动条上斜面和左斜面颜色
scrollbar-shadow-color:#536BFD; //滚动条下斜面和右斜面颜色
scrollbar-3dlight-color:#FFFFFF; //滚动条上边和左边的边沿颜色
scrollbar-arrow-color:Blue; //滚动条上下箭头颜色
scrollbar-track-color:#536BFD; //滚动条底版颜色
scrollbar-darkshadow-color:#536BFD //滚动条下边和右边边沿颜色
}
</STYLE>
-------------------------
如何只显示垂直滚动条
用下面这个CSS样式代码
html
{
overflow-x:hidden;//隐藏水平滚动条
overflow-y:hidden;//隐藏垂直滚动条
}

*********************************************************

1、********************控制字体大小的样式****************************
<style type="text/css">
<!--
body,td,th {
font-size: 12px; //字体始终保持12号字体大小
}
body {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
}

a {
text-decoration: none; //链接无下划线
}
-->
</style>

<font style=font-size:12px;>
2、********************html中的Table中输出显示的文字自动换行***************
<td style="Word-break:break-all; word-wrap:break-word">
<table style="table-layout:fixed" width="95%" height="100%" align="center" valign="top" border="0">
3、********************滚动字幕marquee**********************
<marquee scrollamount="6" scrolldelay="120" onMouseOver="this.stop();" onMouseOut="this.start();" style='cursor:hand'>
<%=strDisplayMsg%>
</marquee>
4、*********************************************************
style="cursor:hand" //手型鼠标

<td style="padding-left:10px">32323</td> //在左边空10个像素在输出文字
5、******************动态横向柱状图的做法*******************************
<td align=left width=40><font color=#0262cd>5.57%</font></td><td align=left><img src='http://www.sinaimg.cn/dy/survey/14dc_bg.gif' width=2.228 height=10></td>
注意改变图片的宽度即可显示不同的百分比效果
6、*******************文本框样式*************************
<input name="mailTitle" type="text" id="mailTitle" style="border: 1 solid #C0C0C0;" size="13">
7、***************在form表单提交时，调用脚本验证***********************
<form name="addUser" action="insert.jsp" method="post" onSubmit="return numericCheck()">
...............................
</form>
8、***************网页上加一条线*************************
<HR align=center size="1" noshade>
9、 **************链接样式*****************
<a onclick="alert('哈哈')" style="cursor:pointer;" onMouseover="this.style.color='red'" onMouseout="this.style.color='#0000cc'">? 添加</a>
10、**************内嵌框架****************
<iframe name="calender" id="calender" src="AttachFiles\Canleder.htm" width="250" height="300" border="0" frameborder="0" scrolling="No"></iframe>

11、------------我的google日历、日程
<iframe src="http://www.google.com/calendar/embed?src=dayone%40163.com&height=614" style=" border-width:0 " width="640" frameborder="0" height="614"></iframe>

12、****************************************************
///让表格隔一行换一个背景颜色（使用在循环输出数据的时候）
for(int i=0;i<expRs.getCurPageRows();i++)
{
<td align="center" bgcolor="<%=i%2==0?"#FFFFFF":"#F9F9F9"%>"><%=expRs.getString("Exp_Name")%></td>
}
13、**********使用js向html文本域内插入内容实现自动换行*************
<form id="form1" name="form1" method="post" action="2.asp">
<textarea name="t1" cols="66" rows="13"></textarea>
<input type="submit" name="Submit" value="提交" />
</form>

或者是
<form id="form1" name="form1" method="post" action="2.asp">
<textarea name="t1" cols="66" rows="13"></textarea>
<input type="submit" name="Submit" value="提交" />
</form>

onClick="form1.reset()" *清空表单*

onMouseOver="ChgImg('../IMAGES/new_chongtian1.jpg')"
onMouseOut="ChgImg('../IMAGES/new_chongtian.jpg')"
value="重填">
15、**********************************************************************************
《《《《《《《《《《《弹出的窗口定时自动关闭》》》》》》》》》》》》》》》
正常显示的窗口到关闭的时候会弹出提示框让用户选择是否关闭。。。。
弹出的窗口没有提示，将自动关闭

（1）--------------index.html---------------------
<html>
<head>
<title>窗口定时关闭</title>
</head>

<body>
   <table width="500" align="center">
      <tr>
     <td> 
  <a style="cursor:hand" onClick="window.open('open.html','PipInfo','left=200,top=200,height=400,width=580,scrollbars=yes,resizable=yes')">[Hello word.....]</a></td>
   </tr>
   </table>
</body>

</html>
（2）---------------open.html---------------------
<html>
<head>
<title>窗口定时关闭</title>
</head>

<body onLoad="setTimeout('window.close()',3000)"> //三秒后自动关闭
   <table width="500" align="center">
      <tr>
     <td> 世界你好.....</td>
   </tr>
   </table>
</body>
</html>
----------------------------------------------

16、***************************Open_window的应用****************************
<a href="#" onClick="window.open('ClientLinkManAdd.jsp','PipInfo','left=200,top=200,height=400,width=600,scrollbars=yes,resizable=yes')">新增</a>

*************代参数的*******************
<a style="cursor:hand" onClick="open_win('ClientInfo.jsp?ClientNO=<%=ClientNO%>')"><font color="#31517C"><%=pdb.getString("CORNAME",1)%> </font></a>
****************************************************************************
------------客户列表
<a href="ClientInfo.jsp?ClientNO=<%=ClientNO%>&BarCode=<%=intBarCode%>&shouquan=<%=shouquan%>&page=<%=pg%>" style="cursor:hand"><font color="#31517C"><%=pdb.getString("CORNAME",1)%> </font></a>
*********************关闭弹出窗口方法window.close()*************************
<img style="cursor:hand" src="../IMAGES/guanb.gif" onMouseOver="ChgImg('../IMAGES/guanb1.gif')" onMouseOut="ChgImg('../IMAGES/guanb.gif')" onClick="window.close()">
*********************刷新和重置的方法*****************
form.reset()
form.refrens()
*******************查看联系人的弹出窗口（联系人列表中的）*****************
【<a href="#" onClick="window.open('LinkManEdit.jsp?linkNum=<%=linkNum%>','PipInfo','left=200,top=120,height=500,width=700,scrollbars=yes,resizable=yes')">修改</a>】【<a href="javascript:isDel(<%=linkNum%>)">删除</a>】
*****************************************************************
发现：
当第一个窗口为open_win方法弹出窗口时：
<a style="cursor:hand" onClick="open_win('ClientInfo.jsp?ClientNO=<%=ClientNO%>&BarCode=<%=intBarCode%>&shouquan=<%=shouquan%>&page=<%=pg%>&lookFlag=1')"><font color="#31517C"><%=pdb.getString("CORNAME",1)%> </font></a>
这是在这个弹出窗口中再以window.open方法打开窗口时，他将共用同一个弹出窗口
【<a href="#" onClick="window.open('LinkManEdit.jsp?linkNum=<%=linkNum%>','PipInfo','left=200,top=120,height=500,width=700,scrollbars=yes,resizable=yes')">修改</a>】【<a href="javascript:isDel(<%=linkNum%>)">删除</a>】
-----------------------------------------------------------------------------------------------------
17、*********自动定时刷新*********
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />


18、***************************************************************
-----------锚点的应用--------------
<a name="123"></a> //要定位的地方（随便起一个名字）
<a href="#123" target="_self">查看批示</a> //任意链接，点击后就会跳到上面定位的地方！
19、*******************************************************************
--------------------表示这个列是由4列合并成的，但显示的还是一列
<td colspan="4"><font color=#000000>暂时没有批示!!</font></td>
*********************************************************************
14:54 2008-3-29
<input style="visibility:hidden" type="text" name="textfield" /> "visible","hidden"