Rumah >hujung hadapan web >html tutorial >CSS问题，求赐教！！！！！！！！！！！！！！！！！！！！！！_html/css_WEB-ITnose
CSS问题，求赐教！！！！！！！！！！！！！！！！！！！！！！_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 09:44:101042semak imbas
CSS HTML
现在有个页面是这样的 代码如下， 有这么几个需求1，
上下左右居中于
并且两个div 会随着浏览器的大小 自动相对变化
2，
2，
这个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，
上下左右居中于
并且两个div 会随着浏览器的大小 自动相对变化
既然要居中自然left right相等，top bottom相等，不需要使用width height。
#main_bg{
position: absolute;
top: 40%;
left: 40%;
right:40%;
bottom:40%;
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;
}
2.
既然要居中自然left right相等，top bottom相等，不需要使用width height。
#main_bg{
position: absolute;
top: 40%;
left: 40%;
right:40%;
bottom:40%;
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;
}
2.
这个div有输入框，输入框的大小可以随着输入文字的长度改变，默认情况下宽 300px
这个可以使用span contenteditalbe="true"来模拟input框，span可以随着长度增长改变。
#span {
min-width:200px;
border: 1px solid;
display:block;
white-space:nowrap;
}
这个可以使用span contenteditalbe="true"来模拟input框，span可以随着长度增长改变。
#span {
min-width:200px;
border: 1px solid;
display:block;
white-space:nowrap;
}
Kenyataan：
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
Artikel sebelumnya：为什么div不能在页面右侧隐藏起来啊 而是下面有个移动框_html/css_WEB-ITnoseArtikel seterusnya：如何让某个文件(非html系列的扩展名)按照html格式被解析？_html/css_WEB-ITnose