<style type="text/css">
body,td,th {
font-size: 12px; //字体始终保持12号字体大小
}
#xijing_grid{width:100%; height:100%;} //div的样式
.icon-grid {background-image:url(../images/grid.png) !important;}
.add {background-image:url(../images/add.gif) !important;}
.delete {background-image:url(../images/delete.gif) !important;}
.save {background-image:url(../images/save.gif) !important;}
.plugin {background-image:url(../images/plugin.gif) !important;}
.excel {background-image:url(../images/application_view_list.png) !important;}
.chart {background-image:url(../images/cog.png) !important;}
.upload-icon {background: url('../images/image_add.png') no-repeat 0 0 !important;}
//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>
<script language='javascript'>document.form1.t1.value='123\r\n123'</script>
或者是
<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>
<script language='javascript'>document.form1.t1.value='123\n123'</script>
都可以实现换行
14、****************调用表单自带的函数实现“清空表单内容”，同reset按钮一样**************************************
<img src="../IMAGES/new_chongtian.jpg" width="85" height="26" style="cursor:hand"
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" />
<!--这里是设置页面20秒刷新一次-->
<!--meta http-equiv="Refresh" content="20"-->
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"
分享到：
相关推荐
CSS样式按钮CSS样式按钮CSS样式按钮
用来设置全局的通用的CSS样式初始化文件
CSS参考.rar CSS样式CSS样式CSS样式CSS样式……想让自己做出的界面跟美观，来看看吧……
android TextView 支持CSS样式
css样式，很好用好，很不错，可以试试
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
清除删除修改Vue自带的CSS样式，在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色，后来发现是Vue自带了默认的CSS样式导致的，只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。
【错误引用】将css样式写在引用于body内<style type=”text/css”> body,td,th { font-family: Arial; font-size: 12px;} </style> 【错误引用】引用外部的css样式 <link rel=”stylesheet” type=”...
css样式表手册->web前端样式开发->中文
css样式
经典好看的各式控件样式CSS样式，各种常用控件好看CSS样式，可自己修改，决定好用
在设计网页的时候，利用css样式进行布局
Qt css样式大全+详细书签pdf
Dreamweaver CS6 CSS样式汉化文件
css样式 特殊效果 圆角 浮动 弹窗 渐变色背景 css样式 特殊效果 圆角 浮动 弹窗 渐变色背景
10款很不错的CSS样式，非常好用…… 自带图片资源，可以随意修改。
在对web页面排版布局时，经常有琐碎的细节要另外写样式，umi.css样式库将最常用的碎片样式整合起来，并统一了样式命名规则。 可将umi.css理解为点缀样式库。 umi.css可与任何web框架结合使用。 简单、易记、通用，是...
自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式
24种非常漂亮的分页css样式,非常值得研究，各种分页效果均有，而且非常的好看，具有一定的技术含量。