在班里電腦分辨率是1600x900宿舍電腦分辨率是1920x1080在班里打開(kāi)網(wǎng)頁(yè)一切正！各種DIV的位置正常！圖1但在宿舍打開(kāi)這個(gè)網(wǎng)頁(yè) 各種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>無(wú)標(biāo)題文檔</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="請(qǐng)輸入搜索內(nèi)容."<required>
??<button?type="submit">搜索</button>
</form>
</div>
<div?class="LOGO1">
??<h1><strong>楊博林創(chuàng)意個(gè)人網(wǎng)站</strong></h1>
??<br?/>
<div?class="logo2">
??<h2><strong>YBL?creative?personal?website</strong></h2>
</div>
</div>
<div?id="ybl">
????<ul>
<li><a?href="#">首頁(yè)</a></li>??
<li><a?href="#">林工作室</a>?
<ul>
<li><a?href="#">后期制作</a></li>
?<li><a?href="#">系統(tǒng)維護(hù)</a></li>
</ul>
</li>
<li><a?href="#">網(wǎng)頁(yè)設(shè)計(jì)</a>
<ul>
<li><a?href="#">?HTML介紹</a></li>
<li><a?href="#">CSS介紹</a></li>
<li><a?href="#">JS介紹</a></li>
<li><a?href="#">網(wǎng)頁(yè)欣賞</a></li>
</ul>
</li>
<li><a?href="#">手機(jī)刷機(jī)</a>
<ul>
<li><a?href="#">收費(fèi)刷機(jī)</a></li>
<li><a?href="#">資源下載</a></li>
<li><a?href="#">免費(fèi)教程</a></li>
??</ul>
</li>
<li><a?href="#">關(guān)于我們</a>
<ul>
<li><a?href="#">公眾號(hào)</a></li>
<li><a?href="#">聯(lián)系我們</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;???/*這個(gè)里面的Cover表示背景足夠大！不會(huì)出現(xiàn)分四張或者白邊的情況！*/
????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貢獻(xiàn)1036條經(jīng)驗(yàn) 獲得超461個(gè)贊
.search?{
????/*float?不要*/
????float:?right;
????position:?fixed;
????/*這里用right?值自己看著給*/
????left:?1200px;
????width:?260px;
????height:?40px;
????margin:?90px;
????background:?rgba(0,0,0,.2);
????border-radius:?5px;
}這個(gè)search也是一樣
李曉健
TA貢獻(xiàn)1036條經(jīng)驗(yàn) 獲得超461個(gè)贊
#ybl{
????/**這個(gè)float?應(yīng)該不要**/
????float:?right;
????position:fixed;
????/**這里用right(給一個(gè)合適的值)?不要用left**/
????left:600px;
????padding-left:?50px;
????width:680px;
????height:40px;
????padding-top:?100px;
}添加回答
舉報(bào)
0/150
提交
取消