在班里电脑分辨率是1600x900宿舍电脑分辨率是1920x1080在班里打开网页一切正！各种DIV的位置正常！图1但在宿舍打开这个网页 各种DIV的位置有变化！（这是什么情况）图2图1： 1900x900图2：1920x1080HTML代码如下<!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;
}
2 回答
李晓健
TA贡献1036条经验 获得超461个赞
.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也是一样
李晓健
TA贡献1036条经验 获得超461个赞
#ybl{
/**这个float 应该不要**/
float: right;
position:fixed;
/**这里用right(给一个合适的值) 不要用left**/
left:600px;
padding-left: 50px;
width:680px;
height:40px;
padding-top: 100px;
}- 2 回答
- 1 关注
- 1212 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消