我班里的电脑分辨率是1600x900 网页设计布局正常！图1我宿舍电脑的分辨率是1920x1080 打开班里做好的网页，菜单栏移动了位置，搜索栏移动了位置！图2！这个问题咋处理哈？图2图1代码如下CSSbody {
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;
}
添加回答
举报
0/150
提交
取消