网页设计尺寸问题！请大神帮帮我吧！谢谢啦！

我班里的电脑分辨率是1600x900 网页设计布局正常！图1
我宿舍电脑的分辨率是1920x1080 打开班里做好的网页，菜单栏移动了位置，搜索栏移动了位置！图2！
这个问题咋处理哈？
图2

图1

代码如下
CSS

body {
	background-image: url(../image/bg1.jpg);
	background-repeat:no-repeat;
	background-attachment: fixed;
	font-family: "宋体";
	color: aliceblue;
	min-height:750px;
	font-size: 12px;
	line-height: 1.5em; 
	}

.LOGO1

{
	float:left;
	width:380px;
	height:40px;
	color:#FFF;
	padding:60px;}
*
{
	margin:0;
	padding:0;
}

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


#ybl

{
	padding-top: 80px;
	padding-left: 60px;
  width:680px;
  height:40px;
  margin: 12px;
   position:fixed; left:800px;
}  
#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: #000;
}

#ybl ul li a
{ 
    display: block;
	width: 110px;
	height: 30px;
	line-height: px;
	text-align: center;
	font-size: 23px;
}  

#ybl ul li ul
{
  border: 0px solid #CC0;
  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
{ 
	background-color:#333;
	color: #fff;
}  

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

#ybl ul li.sfhover { 
display: block;
    border: 1px solid blue;
}

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>杨博林创意个人网站</h1><br />

<h2>YBL creative personal website</h2>
</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>

CSS2

.search 
{
	
	width: 260px;
	height: 40px;
	margin: 80px auto;
    background: rgba(0,0,0,.2);
	border-radius:  5px;
    position:fixed; left:1500px;
    }   

.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 
{
padding-right:;	
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;

}
  #xinbuju
 {
	 height:200px;
	 width:570px;
	 background-color: #FFF;
	 color: #000;
	 position:fixed;
	 top:350px;
	 left:850px;
	 }

qq_那就好_2

浏览 1284回答 1

1回答

qq_歲月靜好不忘初心_0

尽量少用position，f12看看你的布局吧，哪里的尺寸变了，对症下药。

0 0

随时随地看视频慕课网APP