CSS，求赐教！！！

我嘞个去 2013-06-08 12:56:15

现在有个页面是这样的代码如下，有这么几个需求
1，<div id="main_bg"> 上下左右居中于<div id="main_bg"> 并且两个div 会随着浏览器的大小自动相对变化
2，<div id="main_bg">这个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>

...全文

122 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

victor_woo 2013-06-08

打赏
举报

引用 6 楼 gavin_ts 的回复:

[quote=引用 5 楼 fangmingshijie 的回复:] css根本没法实现

css如何实现第一个需求呢？ <div id="main_bg"> 上下左右居中于<div id="main_bg"> 并且两个div 会随着浏览器的大小自动相对变化 [/quote] <div id="main_bg"> 上下左右居中于<div id="main_bg"> 不都是main_bg？水平居中可直接在外部DIV样式设置align:center 但是vertical-align可能无效加一个和外DIV重叠的单格TABLE，TD的VALIGN可控制竖直居中

花谢尊前不敢香 2013-06-08

打赏
举报

100%就行了。

木薯超人 2013-06-08

打赏
举报

相对于浏览器自动变化就%，加浮动被，我就是没浮动

我嘞个去 2013-06-08

打赏
举报

引用 5 楼 fangmingshijie 的回复:

css根本没法实现

css如何实现第一个需求呢？ <div id="main_bg"> 上下左右居中于<div id="main_bg"> 并且两个div 会随着浏览器的大小自动相对变化

花谢尊前不敢香 2013-06-08

打赏
举报

css根本没法实现

我嘞个去 2013-06-08

打赏
举报

引用 2 楼 ppgs8903 的回复:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">	
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
	$(document).ready(function(){
		$("input").keyup(function(){
			alert(($("input").val()).length);
			if(($("input").val()).length<10)
				return 1;
			else{
				var s = $("input").attr("size");
				alert(s);
				s = parseInt(s) + 1;
				$("input").attr("size", s);
			}
	  });
	});
  </script>
 </head>

 <body>
	<div style="width:95%; height:100px; background:#eee; margin:0 auto"><input type="text" size="10" id="input"></input></div>
 </body>
</html>

写了个类似的，不拿你那个了

谢谢先~ css怎么去实现呢？

我嘞个去 2013-06-08

打赏
举报

引用 1 楼 fangmingshijie 的回复:

用js去控制输入框的样式

js是可以了，但是只能用css！不知道css如何去实现！

木薯超人 2013-06-08

打赏
举报


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">	
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
	$(document).ready(function(){
		$("input").keyup(function(){
			alert(($("input").val()).length);
			if(($("input").val()).length<10)
				return 1;
			else{
				var s = $("input").attr("size");
				alert(s);
				s = parseInt(s) + 1;
				$("input").attr("size", s);
			}
	  });
	});
  </script>
 </head>

 <body>
	<div style="width:95%; height:100px; background:#eee; margin:0 auto"><input type="text" size="10" id="input"></input></div>
 </body>
</html>

写了个类似的，不拿你那个了

花谢尊前不敢香 2013-06-08