CSS之文本框样式和水平居中 |
您所在的位置：网站首页 › word使文本框居中 › CSS之文本框样式和水平居中 |
|
1 CSS使用
1.1 文本框样式
1.1.1 鼠标一上去变成浅绿色
css-文本框
1.1.2 文本框提示样式，鼠标点击获得焦点时提示内容消失
文本框提示样式
window.onload=function(){
s('n','Your message1');s('n1','Your message2')
}
function g(a){return document.getElementByIdx_x(a)}
function s(n,v){
with(g(n)){
className='a1';value=v;
onfocus=function(){if(value==v)value='';className='a2'}
onblur=function(){if(value==''){value=v;className='a1'}}
}
}
1.1.3 input文本框样式
新建网页 1
用户名：
1.1.4 只有下划线的文本框
1.1.5 软件序列号式的输入框
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
—————
软件序列号式的输入框(完整版)： if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus(); select(); var sn=new Array(); for(i=0;i输入几个回车试试 文本框输入提示 ... ...后台文件 [input.asp] .buttoncss { font-family: "tahoma", "宋体"; font-size:9pt; color: #003399; border: 1px #003399 solid; color:#006699; border-bottom: #93bee2 1px solid; border-left: #93bee2 1px solid; border-right: #93bee2 1px solid; border-top: #93bee2 1px solid; background-image:url(../images/bluebuttonbg.gif); background-color: #e8f4ff; cursor: hand; font-style: normal ; width:60px; height:22px; } 1.2 按钮和框样式 1.2.1 蓝色按钮 .bluebuttoncss { font-family: "tahoma", "宋体"; font-size: 9pt; color: #003366; border: 0px #93bee2 solid; border-bottom: #93bee2 1px solid; border-left: #93bee2 1px solid; border-right: #93bee2 1px solid; border-top: #93bee2 1px solid;*/ background-image:url(../images/blue_button_bg.gif); background-color: #ffffff; cursor: hand; font-style: normal ; } 1.2.2 红色按钮 .redbuttoncss { font-family: "tahoma", "宋体"; font-size: 9pt; color: #0066cc; border: 1px #93bee2 solid; border-bottom: #93bee2 1px solid; border-left: #93bee2 1px solid; border-right: #93bee2 1px solid; border-top: #93bee2 1px solid; background-image:url(../images/redbuttonbg.gif); background-color: #ffffff; cursor: hand; font-style: normal ; } 1.2.3 选择按钮 .selectbuttoncss{ font-family: "tahoma", "宋体"; font-size: 9pt; color: #0066cc; border: 1px #93bee2 solid; border-bottom: #93bee2 1px solid; border-left: #93bee2 1px solid; border-right: #93bee2 1px solid; border-top: #93bee2 1px solid; background-image:url(../images/blue_button_bg.gif); background-color: #ffffff; cursor: hand; font-style: normal ; } 1.2.4 绿色按钮 .greenbuttoncss { font-family: "tahoma", "宋体"; font-size: 9pt; color: #0066cc; border: 1px #93bee2 solid; border-bottom: #93bee2 1px solid; border-left: #93bee2 1px solid; border-right: #93bee2 1px solid; border-top: #93bee2 1px solid; background-image:url(../images/greenbuttonbg.gif); background-color: #ffffff; cursor: hand; font-style: normal ; } 1.2.5 图像按钮 .imagebutton{ cursor: hand; }cursor: hand和cursor:hand都是手型的光标，但是还是有一丢丢的区别。 cursor:hand IE完全支持，但是在Firefox是不支持的，木有效果。 cursor:pointer 是CSS2.0的标准，所以Firefox是支持的，但是IE5.0及之前的版本不支持。IE6开始支持。 1.2.6 页面正文 body { scrollbar-face-color: #ededf3; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #93949f; scrollbar-3dlight-color: #ededf3; scrollbar-arrow-color: #082468; scrollbar-track-color: #f7f7f9; scrollbar-darkshadow-color: #ededf3; font-size: 9pt; color: #003366; overflow:auto; } td { font-size: 12px } th { font-size: 12px; } 1.2.7 下拉选择框 select{ border-right: #000000 1px solid; border-top: #ffffff 1px solid; font-size: 12px; border-left: #ffffff 1px solid; color:#003366; border-bottom: #000000 1px solid; background-color: #f4f4f4; } 1.2.8 线条文本编辑框 .editbox{ background: #ffffff; border: 1px solid #b7b7b7; color: #003366; cursor: text; font-family: "arial"; font-size: 9pt; height: 18px; padding: 1px; } 1.2.9 多行文本框 .multieditbox{ background: #f8f8f8; border-bottom: #b7b7b7 1px solid; border-left: #b7b7b7 1px solid; border-right: #b7b7b7 1px solid; border-top: #b7b7b7 1px solid; color: #000000; cursor: text; font-family: "arial"; font-size: 9pt; padding: 1px; } 1.2.10 阴影风格的表单 .shadow { position:absolute; z-index:1000; top:0px; left:0px; background:gray; background-color:#ffcc00; filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true); } 1.2.11 只显一条横线的输入框 .logintxt{ border-right: #ffffff 0px solid; border-top: #ffffff 0px solid; font-size: 9pt; border-left: #ffffff 0px solid; border-bottom: #c0c0c0 1px solid; background-color: #ffffff } 1.2.12 没有边框的输入框 .noneinput{ text-align:center; width:99%;height:99%; border-top-style: none; border-right-style: none; border-left-style: none; background-color: #f6f6f6; border-bottom-style: none; } 2 六种实现元素水平居中 2.1 引言水平居中的实现方案，大家最熟悉的莫过开给元素定一个显示式的宽度，然后加上margin的左右值为auto。如： .center { width: 960px; margin-left: auto; margin-right: auto;}这种方法给知道了宽度的元素设置居中是最方便不过的了，但有很多情况之下，我们是无法确定元素容器的宽度。换句话说，未有明确宽度的时候，上面的方法无法让我们实现元素水平居中。那要怎么办呢？这也就是我们今天需要讨论的问题。 为了更好的说明问题，我们来看一个制作分页效果的代码： Prev 1 2 3 4 5 Next |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |