CSS学习札记1-边框颜色会变的input 仿网易邮箱文本框
日期：2014-05-17 浏览次数：20785 次
CSS学习笔记1-边框颜色会变的input 仿网易邮箱文本框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.inp{border:1px solid #84a1bd; width:157px; padding:2px 2px 2px 2px ; background-position: -70px -424px}
</style>
<title>无标题文档</title>
<script language="javascript">
function fEvent(sType,oInput){
switch (sType){
case "focus" :
oInput.isfocus = true;
case "mouseover" :
oInput.style.borderColor = '#9ecc00';
break;
case "blur" :
oInput.isfocus = false;
case "mouseout" :
if(!oInput.isfocus){
oInput.style.borderColor='#84a1bd';
}
break;
}
}
</script>
</head>
<body>
<input type="text" size="20" onFocus="fEvent('focus',this)" onBlur="fEvent('blur',this)" onMouseOver="fEvent('mouseover',this)" onMouseOut="fEvent('mouseout',this)" class="inp" />
</body>
</html>
//////////////////////////////////////////////////////////////////////
给文本加边框
上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。第一个边框的CSS代码 是：style="border:thin solid red"；“border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红 色）。我们定义边框，实际上就是设定这三个参数值。
边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线），此外，也可以自定义宽度，如：1pt、5px、2cm等。
边框线的类型有九个确定值：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅），注意：如果系统不支持这些边框的属性值，那么“dotted”、“dashed”、“double”、 “groove”、“ridge”、“inset”和“outset”都会被“solid”代替。
边框线的颜色：可以用十六进制的颜色代码，如#00ffcc。
从上面可以看出，给文本加边框确实很简单，上例中后面那几个边框的设置，我不讲你也明白了吧！在这里告诉你一点小技巧，给一段文本加边框，可把CSS 加在〈P〉标记里；给几段文本加边框，先把那几段文本用DIV标记括起来，再把CSS加在〈DIV〉标记里；若是要给一行文本加几个不同的边框，则需要把 文本放在表格里，再把CSS分别加到〈TD〉标记里。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.inp{border:1px solid #84a1bd; width:157px; padding:2px 2px 2px 2px ; background-position: -70px -424px}
</style>
<title>无标题文档</title>
<script language="javascript">
function fEvent(sType,oInput){
switch (sType){
case "focus" :
oInput.isfocus = true;
case "mouseover" :
oInput.style.borderColor = '#9ecc00';
break;
case "blur" :
oInput.isfocus = false;
case "mouseout" :
if(!oInput.isfocus){
oInput.style.borderColor='#84a1bd';
}
break;
}
}
</script>
</head>
<body>
<input type="text" size="20" onFocus="fEvent('focus',this)" onBlur="fEvent('blur',this)" onMouseOver="fEvent('mouseover',this)" onMouseOut="fEvent('mouseout',this)" class="inp" />
</body>
</html>
//////////////////////////////////////////////////////////////////////
给文本加边框
上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。第一个边框的CSS代码 是：style="border:thin solid red"；“border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红 色）。我们定义边框，实际上就是设定这三个参数值。
边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线），此外，也可以自定义宽度，如：1pt、5px、2cm等。
边框线的类型有九个确定值：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅），注意：如果系统不支持这些边框的属性值，那么“dotted”、“dashed”、“double”、 “groove”、“ridge”、“inset”和“outset”都会被“solid”代替。
边框线的颜色：可以用十六进制的颜色代码，如#00ffcc。
从上面可以看出，给文本加边框确实很简单，上例中后面那几个边框的设置，我不讲你也明白了吧！在这里告诉你一点小技巧，给一段文本加边框，可把CSS 加在〈P〉标记里；给几段文本加边框，先把那几段文本用DIV标记括起来，再把CSS加在〈DIV〉标记里；若是要给一行文本加几个不同的边框，则需要把 文本放在表格里，再把CSS分别加到〈TD〉标记里。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
