Home  >  Article  >  Web Front-end  >  Questions about the layout of front-end controls_html/css_WEB-ITnose

Questions about the layout of front-end controls_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:211104browse

Please take a look at the picture:
The table in this picture (the one with the border) is an image. Originally, I planned to use this as a background image, but it cannot be enlarged and the effect will not be good after running. It looks good, so I added img to the Body, set its width and height to 100%, and then added a control where the text should be entered. The picture above shows what it looks like after adding the control and before running. I put each All controls are placed in a div, and the position is set to absolute, but after running, it becomes like this, which is difficult to read:
. Is there any known method or technique, or how can I put it? Background image enlargement?


Reply to discussion (solution)

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

Since img is displayed in percentage, then the left top and width of div Height also needs to be positioned using percentages

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


Since it’s done in html, I have a complete picture here. Please help me take a look. I’m key I don’t know why the td is set up so irregularly that one is larger and the other is smaller. Attached pictures:
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn