フロントエンドcontrols_html/css_WEB-ITnoseのレイアウトに関する質問-htmlチュートリアル-php.cn

フロントエンドcontrols_html/css_WEB-ITnoseのレイアウトに関する質問

Jun 24, 2016 am 11:47 AM

写真をご覧ください:
この写真の表 (枠線のあるもの) は元々、これを背景画像として使用する予定でしたが、拡大できず、見栄えが良くありません。実行後、ボディに img を追加し、その幅と高さを 100% に設定し、テキストを入力する場所にコントロールを追加しました。上の図は、実行前にコントロールを追加した後の様子を示しています。コントロールを div で配置し、位置を絶対に設定しますが、実行後は次のようになります。これは見にくいです: 既知の方法やテクニック、または背景画像を拡大するにはどうすればよいですか?

ディスカッションへの返信(解決策)

&lt;style&gt;	.t1&gt;tbody&gt;tr&gt;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;}&lt;/style&gt;&lt;table class=&quot;t1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;	&lt;tr&gt;&lt;td&gt;申请人姓名&lt;/td&gt;&lt;td class=&quot;tr&quot;&gt;&lt;input/&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=&quot;tb&quot;&gt;性别&lt;/td&gt;&lt;td style=&quot;padding:0px;&quot;&gt;&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;		&lt;tr&gt;&lt;td&gt;&lt;select&gt;			&lt;option&gt;男&lt;/option&gt;			&lt;/select&gt;&lt;/td&gt;&lt;td&gt;身份证号码&lt;/td&gt;&lt;td&gt;&lt;input/&gt;&lt;/td&gt;&lt;/tr&gt;		&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

ログイン後にコピー

imgはパーセンテージで表示されるので、divの左上と幅の高さもパーセンテージで配置する必要があります

&lt;style&gt;	.t1&gt;tbody&gt;tr&gt;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;}&lt;/style&gt;&lt;table class=&quot;t1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;	&lt;tr&gt;&lt;td&gt;申请人姓名&lt;/td&gt;&lt;td class=&quot;tr&quot;&gt;&lt;input/&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=&quot;tb&quot;&gt;性别&lt;/td&gt;&lt;td style=&quot;padding:0px;&quot;&gt;&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;		&lt;tr&gt;&lt;td&gt;&lt;select&gt;			&lt;option&gt;男&lt;/option&gt;			&lt;/select&gt;&lt;/td&gt;&lt;td&gt;身份证号码&lt;/td&gt;&lt;td&gt;&lt;input/&gt;&lt;/td&gt;&lt;/tr&gt;		&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

ログイン後にコピー

完了しましたのでhtml を使用すると、完全な図がここにあります。見てみるのを手伝ってください。重要なのは、td が不規則に、1 つが大きく、もう 1 つが小さく設定されている理由がわからないということです。添付画像:

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。