为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JavaScript进阶篇

求大神帮助 如何 让我做的布局 缩小和放大 都是一个样子

<!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">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="Example of Fluid Layout with Bootstrap version 2.0 from w3cschool.cc"> 

     <meta name="author" content=""> 

<head>

<title>欢迎来到丰丰网</title>

<link rel="stylesheet" type="text/css" href="css.css" fcksavedurl="css.css">

<h1>丰丰布局：</h1>

<style type="text/css">

*{margin: 0px; padding: 0px;}

.left1{

position: fixed; 

width: 200px;

height: 80px;

background: red;

float: left;

}

.right1{

position: relative; 

width: 100px;

height: 35px;

background: green;

float: right;

margin-bottom: 0px;

}

.right2{

position: relative; 

width: 460px;

height: 40px;

background: green;

float: right;

margin-top: 20px;

}

.left2{

position: relative; 

width: 210px;

height: 210px;

align-content: left;

background: yellow;

margin-top: 90px;

}

.left_content{

width: 210px;

height: 105px;

background: blue;

float: left;

margin-left: 220px;

margin-top: -17px;

display: auto;

}

.left_content1{

width: 210px;

height: 35px;

background: blue;

float: left;

margin-left: 220px;

margin-top: -98px;

}

.left_content2{

width: 210px;

height: 20px;

background: blue;

float: left;

margin-left: 220px;

margin-top: -58px;

}

.right_ri{

width: 215px;

height: 170px;

background: red;

float: left;

margin-left:445px;

margin-top:-208px;

}

.right_ri1{

width: 440px;

height: 30px;

background: red;

float: left;

margin-left:220px;

margin-top:-30px;

}

.bonnt{

width: 660px;

height: 30px;

background: pink;

float: left;

margin-left:0px;

margin-top:0px;

}

.body{

margin:0px auto;

width: 1000px;


}

</style>

<!-- <script type="text/javascript" src="st.JS"> </script>  -->

</head>

<body>


<!-- <form name="myform" method="post" onsubmit="return check()"/>

<table width="556" height="173">

<tr>

<td height="31" colspan="3"><font size="+1" face="新宋体" color="#00009">丰丰邮箱</font></td>

</tr>

<tr>

<id widdth="129" height="33" aligan="right">丰丰邮箱：</id>

<td width="175">

<input type="text" name="mainMail" value="请输入邮件地址" onFocus="clso()" onblur="doAction0()"/>

</td>

<td width="236" id="td0">邮箱名只能是字母和数字、下划线</td>

</tr>

<tr>

<td height="32" align="right">密码：</td>

<td><input type="password" name="pwd" onblur="doAction1()"/></td>

<td id="td1">密码至少是6位数字</td>

</tr>

<tr>

<td height="36" align="right">再次输入密码：</td>

<td><input type="password" name="pwd"/></td>

<td>密码至少是6位数字</td>

</tr>

<tr>

<td colspan="36" align="center"><input type="submit" value="提交表单"\></td>

</tr>

</table>

</form>  -->

<div class="left1">logo01</div>

<div class="right1">语言02

<div class="right2">导航03</div>

</div>

<!-- <div class="body"> -->

<div class="body">

<div class="left2">1

<div class="left_content">21</div>

</div>

<div class="left_content1">22</div>

<div class="left_content2">23</div>

<div class="right_ri">3</div>

<div class="right_ri1">4</div>

<div class="bonnt">5</div>

</div>

<!-- </div> -->

</body>

<!-- <input type="button" name="点击" onclick="function_name()"> -->


</html>


撡艚鄵

2016-09-25

源自：JavaScript进阶篇  7-14

关注问题 我要回答
759
操作
收起

正在回答

3 回答

qq_灰色头像_17
2017-08-24

<!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">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="Example of Fluid Layout with Bootstrap version 2.0 from w3cschool.cc"> 

     <meta name="author" content=""> 

<head>

<title>欢迎来到丰丰网</title>


<h1>丰丰布局：</h1>

<style type="text/css">

*{margin: 0px; padding: 0px;}


.right1{


width: 100px;

height: 75px;

background:#22787A;

float: right;

margin-bottom: 0px;

}

.right2{

 

height: 40px;

background: green;

margin-top: 50%;

}

.body{


height: 610px;

background: #453F3F;

margin:0 150px auto;

clear: both;

}

.left2{

position:relative;

width: 150px;

height: 100%;

float: left;

background: yellow;


}

.right_ri{

position:relative;

width: 150px;

height: 100%;

background: red;

float:right;

}

.left_content{

background: purple;

position:absolute;

left: 300px;

right: 300px;

width: auto;

height: 100%;

}

.left_content1{


height: 35px;

background: blue;

}

.left_content2{


height: 20px;

background:#E5484A;

}


.right_ri1{

height: 30px;

background: red;

}

.left1{

position: fixed; 

width: 200px;

height: 80px;

background: red;

float: left;

top: 34px;

}

.bonnt{

width:100%; height:50px; background:#9F9; clear:both; margin:0 auto;

}


</style>

<!-- <script type="text/javascript" src="st.JS"> </script>  -->

</head>

<body>


<!-- <form name="myform" method="post" onsubmit="return check()"/>

<table width="556" height="173">

<tr>

<td height="31" colspan="3"><font size="+1" face="新宋体" color="#00009">丰丰邮箱</font></td>

</tr>

<tr>

<id widdth="129" height="33" aligan="right">丰丰邮箱：</id>

<td width="175">

<input type="text" name="mainMail" value="请输入邮件地址" onFocus="clso()" onblur="doAction0()"/>

</td>

<td width="236" id="td0">邮箱名只能是字母和数字、下划线</td>

</tr>

<tr>

<td height="32" align="right">密码：</td>

<td><input type="password" name="pwd" onblur="doAction1()"/></td>

<td id="td1">密码至少是6位数字</td>

</tr>

<tr>

<td height="36" align="right">再次输入密码：</td>

<td><input type="password" name="pwd"/></td>

<td>密码至少是6位数字</td>

</tr>

<tr>

<td colspan="36" align="center"><input type="submit" value="提交表单"\></td>

</tr>

</table>

</form>  -->


<div class="right1">语言02

<div class="right2">导航03</div>

</div>

<!-- <div class="body"> -->

<div class="body">

<div class="left2">1左边</div>

<div class="left_content">21中部

<div class="left_content1">22中部</div>

<div class="left_content2">23中部</div>

<div class="right_ri1">4中部</div></div>

<div class="right_ri">3右边</div>

</div>

<div class="left1">logo01或者网页广告</div>

<div class="bonnt">5网页底部</div>

<!-- </div> -->

</body>

<!-- <input type="button" name="点击" onclick="function_name()"> -->


</html>


0 回复 有任何疑惑可以回复我~
收起回答
#1

qq_灰色头像_17

就是中间还有点问题，中部自适应我已经调成100%了，但是它的长度不能和背景色同步，这个暂时没找到原因。至于你到底想要哪种格局，也没说清楚，只能大概给你改着看，这样应该可以了
2017-08-24 回复 有任何疑惑可以回复我~
TK18
2016-09-26

运用html5文档，然后在head标签中添加：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />这是网页自适应的意思。你应该把<meta>放在head标签中，而不是放在head标签外面

0 回复 有任何疑惑可以回复我~
收起回答
#1

撡艚鄵 提问者

我试试
2016-09-26 回复 有任何疑惑可以回复我~
#2

撡艚鄵 提问者

还是没得用.....大神
2016-09-26 回复 有任何疑惑可以回复我~
qq_顶着西瓜皮的籽_03776560
2016-09-26

目前我只会把固定宽度换成百分比

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468255    人
  • 解答问题       21891    个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

进入课程

本课相似问答

2 回答求助大神帮助

3 回答求大神帮助！

5 回答求大神们帮助

3 回答大神大神，求助大神

2 回答求助各位js大神帮助
搜索更多本课相关问答

求大神帮助 如何 让我做的布局 缩小和放大 都是一个样子

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信