Rumah > hujung hadapan web > html tutorial > 关于前台控件布局的问题_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:47:21
asal
1136 orang telah melayarinya

请大神看下图片:
这张图片中的表格(就是带边框的那个样式)是一个图片,本来我是准备把这个作为背景图片的,但是它不能放大,运行后效果不好看,所以我在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>
Salin selepas log masuk
Salin selepas log masuk

既然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>
Salin selepas log masuk
Salin selepas log masuk


既然用html来做的话,那么我这里还有张完整的图片,您帮忙看看,我关键是不知道那个td怎么一个大一个小一点都不规则的设置。附图:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan