CSS问题，求赐教！！！！！！！！！！！！！！！！！！！！！！_html/css

首頁

web前端

html教學

CSS问题，求赐教！！！！！！！！！！！！！！！！！！！！！！_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:44 AM

CSS HTML

现在有个页面是这样的代码如下，有这么几个需求
1，

上下左右居中于

并且两个div 会随着浏览器的大小自动相对变化
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="/static/imghwm/default1.png"  data-src="images/logo.png"  class="lazy"   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.

这个div有输入框，输入框的大小可以随着输入文字的长度改变，默认情况下宽 300px

这个可以使用span contenteditalbe="true"来模拟input框，span可以随着长度增长改变。
#span {
        min-width:200px;
        border:  1px solid;
        display:block;
        white-space:nowrap;
        }

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。