跪求大神帮忙！网页分辨率问题！请求解决！
在班里电脑分辨率是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
Html/CSS