ホームページ > 記事 > ウェブフロントエンド > CSSの問題、教えてください！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ _html/css_WEB-ITnose
CSSの問題、教えてください！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:44:10980ブラウズ
CSS HTML
コードは次のとおりです。 1. cc0dd62e43c2e66f64530d18baba3943 が中央にあります。 2 つの div です。ブラウザのサイズに応じて自動的に変更されます2. cc0dd62e43c2e66f64530d18baba3943 この div には入力ボックスがあり、入力テキストの長さに応じて変更できます。デフォルトでは幅 300px です
トラブル 現在のページを変更する方法を教えてください!
<!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> {$PLUGIN_TITLE} </title><script language="php"> $templateVersion = 2; // Template version // $fieldRowLayout determines the layout of the form fields // Options are 'fieldset' and 'table' // fieldset: displays fieldnames above the input box // table: displays fieldnames in front of the input box $fieldRowLayout = 'table'; // This JS file checks the form for required fields and correct syntax: print '<scr' . 'ipt src="/x/plugin/plugin.js.php?' . htmlspecialchars($_SERVER['QUERY_STRING']) . '" type="text/javascript"></scr' . 'ipt>';</script> <style type="text/css">html { height: 100%; width: 100%; background: #FFFFFF; /* Old browsers */ font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; }body { height: 100%; width: 100%; margin: 0; border: 0; background-position: center center; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; font-size:12px; font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; color:#333333; }body.box{ background-image: url(images/bg1.jpg); background-color:#adc8db;}#main_bg{ position: absolute; top: 40%; left: 50%; width: 20%; height:10%; text-align: left; background-color: rgba(255, 255, 255, 0.8); color: #333333; margin:0 0 0 -176px; -webkit-box-shadow:0px 1px 2px #7d7d7d; -moz-box-shadow:0px 1px 2px #7d7d7d; box-shadow:0px 1px 2px #7d7d7d; padding:50px; background-color:#ECEFF1;}#logo{ position:absolute; top: 32%; left: 50%; width: 172PX; height: 43px; margin:0 0 0 -176px; }#headerDiv,#titleDiv,#contentDiv,#footerDiv{ background-color: rgba(255, 255, 255, 0.8); border:none;}td input{ width:234px;}label.req{display:none; width:0px;}div.explanation{display:none;}.input input{ background-image:url(/mailings/268/tmpl/438/images/input.jpg); width:70%; height:36px; font-size:14px; font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; color:#999999; border:none; padding-left:10px;}textarea{ background-color:#25282b; width:222px; height:136px; border:none;}.buttons button{background-image:url(/mailings/268/tmpl/438/images/aniu1.png); width:97px; height:39px; border:none;}p.buttons{ text-align:right;} fieldset.odd, fieldset.even { padding: 0px; margin:0px; text-align:left;}</style> </head> <body class="box"> <div id="logo"> ?<img src="images/logo.png" alt="" /> </div> <div id="main_bg"> <div class="editable"> plugin content goes here <input type=text> </div> </div> </body></html> ディスカッションへの返信 (解決策)
1. cc0dd62e43c2e66f64530d18baba3943 は cc0dd62e43c2e66f64530d18baba3943 の上下左右の中央に配置されます。 2 つの div はブラウザに従います
を基準にサイズが自動的に変更されます 左右は中心に等しく、上下は等しいので、幅と高さを使用する必要はありません。
#main_bg{
位置: 絶対;
左: 40%;
テキスト整列: 左; , 255, 0.8);
カラー: #333333;
マージン:0 0 0 -176px;
-moz-box-shadow:0px 1px #7d7d 7d;
box-shadow:0px 1px 2px #7d7d7d;
pattern:#ECEFF1;
}
2.cc0dd62e43c2e66f64530d18baba3943この div には入力ボックスがあり、そのサイズ入力テキストの長さが変わると、デフォルトで幅は 300px になります
これは、span contenteditalbe="true" を使用して入力ボックスをシミュレートすることができ、長さが大きくなるにつれてスパンを変更できます。 {#Span {s 最小幅: 200px;
ボーダー: 1px ソリッド;
ホワイトスパイ: 右:
}
}}
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。