Heim > Web-Frontend > HTML-Tutorial > 关于前台控件布局的问题_html/css_WEB-ITnose

关于前台控件布局的问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:47:21
Original
1133 Leute haben es durchsucht

请大神看下图片:
这张图片中的表格(就是带边框的那个样式)是一个图片,本来我是准备把这个作为背景图片的,但是它不能放大,运行后效果不好看,所以我在Body里加入了img,把它的width和height都设置为100%,然后在该输入文字的地方加入控件,上面这张图中的样子是加入控件之后运行前的样子,我把每个控件都放在了div里,并且把position设置为absolute,但是运行后就成这样了,简直难以入目:
,请问是不是有什么已知的方法或者技巧,或者说怎么能把背景图片放大?


回复讨论(解决方案)

<style>	.t1>tbody>tr>td{border-top:1px solid #000;border-left:1px solid #000;}	.tr{border-right:1px solid #000;}	.tb{border-bottom:1px solid #000;}	td{padding:5px;}	table table td{border-bottom:1px solid #000;border-right:1px solid #000;}</style><table class="t1" cellpadding="0" cellspacing="0">	<tr><td>申请人姓名</td><td class="tr"><input/></td></tr><tr><td class="tb">性别</td><td style="padding:0px;"><table cellpadding="0" cellspacing="0">		<tr><td><select>			<option>男</option>			</select></td><td>身份证号码</td><td><input/></td></tr>		</table></td></tr></table>
Nach dem Login kopieren
Nach dem Login kopieren

既然img是百分比显示的,那么div的left top 和 width height 也要用百分比来定位啊

<style>	.t1>tbody>tr>td{border-top:1px solid #000;border-left:1px solid #000;}	.tr{border-right:1px solid #000;}	.tb{border-bottom:1px solid #000;}	td{padding:5px;}	table table td{border-bottom:1px solid #000;border-right:1px solid #000;}</style><table class="t1" cellpadding="0" cellspacing="0">	<tr><td>申请人姓名</td><td class="tr"><input/></td></tr><tr><td class="tb">性别</td><td style="padding:0px;"><table cellpadding="0" cellspacing="0">		<tr><td><select>			<option>男</option>			</select></td><td>身份证号码</td><td><input/></td></tr>		</table></td></tr></table>
Nach dem Login kopieren
Nach dem Login kopieren


既然用html来做的话,那么我这里还有张完整的图片,您帮忙看看,我关键是不知道那个td怎么一个大一个小一点都不规则的设置。附图:
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage