<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>CSS优化表单元素</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
/*输入框*/
/*background:url()设置背景图片,需要同时设置background-size属性来是的背景图片和元素大小适应
background-size属性包括:auto(图片默认大小):
:width height(设置长和宽的像素大小可以和文本框大小相同)
:百分比(是相当于文本框的大小百分比)
:cover(覆盖文本框)
:contain(缩放图片来靠近容器边缘显示)
*/
.text1{border:1px solid #f60;color:#03C;}
.text2{border:2px solid #390;width:200px;height:24px;font-size:16px;font-weight:bold;line-height:1.6;}
.text3{border:2px solid #C3C;height:150px;width:150px;background:#ffeeff url(images/3.jpg)left 3px no-repeat ;background-size:150px 150px;}
.text4{border:1px solid #F90;width:150px;height:150px;font-size:16px;line-height:1.6;background:#ffeeff url(images/4.jpg)0 0px no-repeat ;background-size:150px 150px;}
.area{border:1px solid #F90;overflow :auto;width:90%;height:150px;background:#fff url(images/4.jpg) right bottom no-repeat;background-size:90% 150px;}
/*按钮*/
.btn1{background:#fff url(images/side_bg.gif) 0 0;height:22px;width:55px;color:#297744;border:1px solid #90abcd;font-size:12px;font-weight:bold;line-height:180%;cursor:pointer;}
.btn2{background:url(images/side_bg.gif) 0 -25px;width:70px;height:22px;color:#6a1234;border:1px solid #aabb19;font-size:12px;line-height:1.6;cursor:pointer;}
/* 不设置宽度可以根据文字长度自适应 */
.btn3{background:url(images/submit_bg.gif) 0px -8px;border:1px solid #ccaabb;height:30px;font-weight:bold;padding-top:1px;cursor:pointer;font-size:12px;color:#334455;}
.btn4{background:url(images/srn_bg.gif) 0 0 no-repeat;width:100px;height:35px;border:none;font-size:12px;font-weight:bold;color:#aa00aa;cursor:pointer;}
select{background:#FF8;width:100px;height:30px;border:1px solid #fff;}
.sticker{background:#fff;width:50px;height:100px;border:1px solid #ccc;position:absolute;left:40px;top:800px;font-size:12px;padding:5px;}
</style>
</head>
<body>
<!-- 输入框 -->
<p>
<input type="text" name="textfield" id="textfield"/>这是默认样式
</p>
<p>
<input type="text" name="textfield2" id="textfield2" class="text1" value="I'm blue."/>改变边框样式和文字颜色
</p>
<p>
<input type="text" name="textfield3" id="textfield3" class="text2" value="I'm big."/>改变边框样式和文字颜色
</p>
<p>
<input type="text" name="textfield4" id="textfield4" class="text3"/>增加背景图片
</p>
<p>
<input type="text" name="textfield5" id="textfield5" class="text4"/>增加背景图片
</p>
<p>
<textarea name="textarea" id="textarea" class="area" clos="45" rows="5"></textarea>
</p>
<!-- 按钮 -->
<p>
<input name="button1" type="submit" class="btn1" id="button1" value="提交" />
</p>
<p>
<input name="button2" type="submit" class="btn2" id="button2" value="提交" />
</p>
<p>
<input name="button3" type="submit" class="btn3" id="button3" value="按钮自适应宽度" />
</p>
<p>
<input name="button4" type="submit" class="btn4" id="button4" value="注册账号" />
</p>
<!-- 下拉列表 -->
<select id="select" name="select" class="select">
<option>请选择</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select>
<div class="sticker">我是分割线-----</div>
<!-- 用户资料label美化样式 -->
<p>
<label for="username">用户名:</label>
<input id="username" name="username" type="text"/>
</p>
<p>
<label for="password">密码 :</label>
<input id="password" name="password" type="password"/>
</p>
<p>性别:
<input type="radio" name="sex" id="male" value="radio1"/><label for="male">男</label>
<input type="radio" name="sex" id="female" value="radio2"/><label for="female">女</label>
</p>
<p>爱好:
<input type="checkbox" name="footing" id="footing"/><label for="footing">徒步</label>
<input type="checkbox" name="music" id="music"/><label for="music">音乐</label>
<input type="checkbox" name="travel" id=""travel""/><label for=""travel"">旅游</label>
</p>
<p> </p>
</body>
</html>
CSS优化表单元素样式
最新推荐文章于 2023-10-31 13:35:59 发布