CSS优化表单元素样式

男娘i 2022-05-25 00:26 180阅读 0赞

<%@ 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>
    	
    	
    	<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>

![20180504153408393][]

![20180504153416347][]

[20180504153408393]: /images/20220525/19c34c30414d4d07bdb6848f6cd23541.png
[20180504153416347]: /images/20220525/5565c7567f1844eb89ea9eda3a016d72.png