文本框的自動對齊和加圓角

時間 2019-11-12

標籤文本自動對齊圓角简体版

原文原文鏈接

本人不是專業美工（是個程序猿），因工做須要，本身設計了個頁面，使文本框自動對齊和加圓角，本人感受挺有美感的（三個按鈕已修改過了，這裏就不提供最新版本，%>_<%）。 css

先上圖： html

html代碼以下： copy過去便可看到效果（須要一張圓角圖片）， app

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!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=utf-8" />
<title>hh2</title>

<script language="JavaScript">

</script>



<style type="text/css">

.sb {width:860px;list-style:none;position:absolute;left:200px; top:50px;}
.sb li {list-style:none;width:100%; margin:10px 0px 0px 0px;}
.sb span {width:200px; text-align:right; height:30px;vertical-align:middle; display:block; float:left;  color: #888888;}


.ipt {
    background: url("sprit4.png") repeat scroll left top transparent;
    border: medium none;
    color: #888888;
    font-size: 16px;
    height: 30px;
    line-height: 34px;
    padding: 0 4px;
    width: 229px;
}


.ipt1 {
    background: url("sprit4.png") repeat scroll left top transparent;
    border: medium none;
    color: #888888;
    font-size: 16px;
    height: 20px;
    width: 100px;
}

.sut{
   position:absolute;left:440px; top:310px;
}


</style>



</head>
<body bgcolor="#FAFAFA">
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="25" ><span class="font_blue_title">&nbsp;&nbsp;<span class="nav">您所在的位置： 用戶註冊</span></span></td>
  </tr>
</table>
<form name="appform" action="editAgentdaily.do" method="post" onsubmit="return checkSubmit(this);">
    <input name="id"  type="hidden" size="80" value="${dto.id}">
	
<ul class="sb">
    <li><span>用戶名:</span><input class="ipt" name="businessname"  type="text" size="40" value="${dto.businessname}"></li>
	<li><span>手機號碼:</span><input class="ipt" name="x_resultcode"  type="text" size="40" value="${dto.x_resultcode}"></li>
    <li><span>用戶暱稱:</span><input  class="ipt" name="x_resultinfo"  type="text" size="40" value="${dto.x_resultinfo}"></li>
	<li><span>用戶密碼: </span><input class="ipt" name="x_resultinfo"  type="text" size="40" value="${dto.x_resultinfo}"></li>
	<li><span>應用類型：</span>   
	    <select class="ipt1" name="sort_apply">
          <option value="${dto.sort_apply}">請選擇</option>
          <option value="0">網廳</option>
          <option value="1">E幣</option>
          <option value="2">商城</option>
        </select>
	</li>
</ul>
<div class="sut">
    <input name="submitbutton" type="submit" value="提交">&nbsp;
    <input name="resetbutton" type="reset" value="重填">&nbsp;
    <input name="backbutton" type="button" value="返回" onClick="history.back();">
</div>
</form>
   

   


</body>
</html>

圓角圖片： post

本人蔘考了該博文：http://www.metsky.com/archives/81.html ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。