跪求大神帮忙！网页分辨率问题！请求解决！

在班里电脑分辨率是1600x900

宿舍电脑分辨率是1920x1080

在班里打开网页一切正！各种DIV的位置正常！图1

但在宿舍打开这个网页各种DIV的位置有变化！（这是什么情况）图2

图1： 1900x900

图2：1920x1080

HTML代码如下

<!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>无标题文档</title>
<link rel="stylesheet" href="css/body style.css" />
<link rel="stylesheet" href="css/sousuo.css" />
<link rel="stylesheet" href="css/xinbuju.css" />
<script type="text/javascript" src="js/JS1.js"></script>
<body>
<div id="sousou">
<form class="search" action="">
 <input type="text" placeholder="请输入搜索内容."<required>
  <button type="submit">搜索</button>
</form>
</div>

<div class="LOGO1">
  <h1><strong>杨博林创意个人网站</strong></h1>
  <br />

<div class="logo2">
  <h2><strong>YBL creative personal website</strong></h2>
</div>
</div>
<div id="ybl">
    <ul>
<li><a href="#">首页</a></li>  
<li><a href="#">林工作室</a> 
	<ul>
<li><a href="#">后期制作</a></li>
 <li><a href="#">系统维护</a></li>
	</ul>
</li>
<li><a href="#">网页设计</a>
	<ul>
<li><a href="#"> HTML介绍</a></li>
<li><a href="#">CSS介绍</a></li>
<li><a href="#">JS介绍</a></li>
<li><a href="#">网页欣赏</a></li>
	</ul>
</li>
<li><a href="#">手机刷机</a>
<ul>
<li><a href="#">收费刷机</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">免费教程</a></li>
  </ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">公众号</a></li>
<li><a href="#">联系我们</a></li>
</ul></div>
<div id="xinbuju">
</div>
</body>
</html>

CSS代码如下

@charset "utf-8";
/* CSS Document */

body {
	background-image:url(../image/BGG.jpg);
	
	
	color: aliceblue;
	font-size: 12px;
	line-height: 1.5em;
	z-index: 999;
	background-size: cover;   /*这个里面的Cover表示背景足够大！不会出现分四张或者白边的情况！*/
    overflow: hidden;    
	}

.LOGO1

{
	float: left;
	display: inline-block;
	width: 650px;
	height: 40px;
	color: #FFF;
	font-family: "微软雅黑";
	padding-left: 40px;
	padding-top: 50px;
	font-size: 15px

}


*
{
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: 800;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

.banner
 {
	 width:100%;
	 height:750px;
	 
}

#D2
{   float: left;
	padding-left: 600PX;
	 height:30px;
	 width:700px;
	background-color:#CB1518;
	margin-top:0px;
   margin-right:auto;
   margin-bottom:0px;
   margin-left:auto;
 }



#ybl

{
	float: right;
	position:fixed;
	left:600px;
	padding-left: 50px;
  width:680px;
  height:40px;
  padding-top: 100px;
	

}  
#ybl ul
{ 

  list-style:none;
  margin-right:100px;
  padding:0;
}
#ybl ul li
{ 
  float: left; 
  margin-left:3px;
}  

a
{
	color:#FFF;
    text-decoration: none;
}

a:hover
{
	color:#FF0004;
}

#ybl ul li a
{ 
    display: block;
	width: 110px;
	height: 35px;
	text-align: center;
	font-size: 24px;
	font-family: "黑体";
	font-weight: 600;
}  

#ybl ul li ul
{
  position:absolute; 
  display:none;
}  

#ybl ul li ul li
{ 
	float: none;
	
}  

#ybl ul li ul li a
{ 
	background: none;
}  

#ybl ul li ul li a:hover
{ 
	color:#FF0004;
}  

#ybl ul li:hover ul
{ 
	display:block
}

#ybl ul li.sfhover { 
display: block;
}

.logo2
{
	display: inline-block;
	font-family:"Coalition字体";
}


@font-face
{
	font-family:"Coalition字体";
	src: url(../fount/Coalition字体.woff);
	src:
		url('../fount/Coalition字体.woff?#font-spider') format('embedded-opentype')
		url('../fount/Coalition字体.woff') format('woff')
		url('../fount/Coalition字体.ttf') format('truetype')
		url('../fount/Coalition字体.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	
}

CSS2代码如下：

@charset "utf-8";
/* CSS Document */

.search 
{
	float: right;
	position:fixed;
	left: 1200px;
	width: 260px;
	height: 40px;
	margin: 90px;
    background: rgba(0,0,0,.2);
	border-radius:  5px;

    }   

.search input
{width: 181px;
padding-top:12px;
	color: #ccc;
	font-weight:400;
	border: 0;
	background: transparent;
	border-radius: 3px 0 0 3px;
}

.search input:focus
{outline: 0;
background:transparent;}

.search button 
{
    float: right;
	border: 0;
	padding: 0;
	height: 40px;
	width: 70px;
	color: #fff;
	background: transparent;
	background: rgba(0,0,0,.2);

}   


.search button:hover
{background: #fff;
	color:#444;}
	
#sousou
{
	padding-right:60px;

}

qq_那就好_2

浏览 1213回答 2

2回答

李晓健

.search { /*float 不要*/ float: right; position: fixed; /*这里用right 值自己看着给*/ left: 1200px; width: 260px; height: 40px; margin: 90px; background: rgba(0,0,0,.2); border-radius: 5px; }这个search也是一样

李晓健

#ybl{ /**这个float 应该不要**/ float: right; position:fixed; /**这里用right(给一个合适的值) 不要用left**/ left:600px; padding-left: 50px; width:680px; height:40px; padding-top: 100px; }

随时随地看视频慕课网APP