<%@ 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优化表单元素样式
猜你喜欢
转载自blog.csdn.net/dongyuxu342719/article/details/80195952
今日推荐
周排行