标签的应用：制作阴影效果

最新推荐文章于 2021-04-11 20:12:34 发布

flowing2008

最新推荐文章于 2021-04-11 20:12:34 发布

阅读量581

点赞数

文章标签： input email xhtml class html border

转载自：http://xiaocaochenfei.blog.sohu.com/40726860.html

<!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" />
<title>fieldset,input:focus的应用</title>
<style>
*{margin: 0;padding:0;}
body {font: 12px Verdana, "Trebuchet MS", Geneva, sans-serif;line-height: 1.6em;color: #0C344D; background-color: #FFF;}
fieldset{border: none;border-top: 1px solid #DA5BA4; width: 500px; margin-left: 30px;}
legend{font-weight: bold;color: #124E74;}
label {margin: 8px 0 0 8px;display: block;}
input, textarea, select {
margin: 4px 8px; padding: 2px 4px;
border-top: none; border-bottom: 4px solid #7FBAE7;
border-right: none; border-left: 1px solid #7FBAE7;
color: #124E74;
background: url(http://f.thec.cn/binglanzhixuan/CSS/images/marco_input.gif) top right no-repeat;
}
textarea { height: 140px; }
input:focus, textarea:focus, select:focus { border-bottom: 4px solid #124E74; }
#name { width: 220px; }
#email { width: 220px; }
#subject { width: 360px; }
#text { width: 360px; height: 140px; }
.check{background:none;border:none;}
</style>
</head>
<body>
<fieldset>
<legend><img src="http://f.thec.cn/binglanzhixuan/CSS/images/tagemail.gif" alt="e-mail"></legend>

<label for="copymail" style="display: inline;">以后都用此姓名给我留言：</label><input name="copymail" id="copymail" value="copymail" class="check" type="checkbox">