1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html网页缩小之后div框移动 当调整大小/放大/缩小页面时 Div可以左右移动

html网页缩小之后div框移动 当调整大小/放大/缩小页面时 Div可以左右移动

时间:2018-09-10 03:46:40

相关推荐

html网页缩小之后div框移动 当调整大小/放大/缩小页面时 Div可以左右移动

我知道这个问题已被问过相当多的时间,但是我找到的解决方案都没有为我工作。我有我制作的这个网站,当我放大和缩小网页时div元素会四处移动。下面是HTML代码:当调整大小/放大/缩小页面时,Div可以左右移动

Shawn & Lucas Web Development!

Welcome to Shawn & Lucas Web Development!

Info

This is a test. -

- Click here!

Menu

Navigate around the website!

About Us

Menu

Navigate around the website!

Shawn & Lucas WEB - Custom Websites ©

而且CSS代码是这样的:

body {

background:#61c9f5;

}

h1 {

color:#000000;

font-family:"Impress BT" arial verdana;

position:relative;

bottom:37px;

}

p.us {

tetx-align:center;

color:white;

font:bold 400%

}

/* Middle Box */

#box {

border-width: 0.139in;

border-color: rgb(75, 75, 75);

border-style: dashed;

background-color: rgb(115, 115, 115);

width: 309px;

height: 296px;

z-index: 1;

display:block;

margin: auto auto;

}

#box h3 {

font-size:180%;

text-align:center;

position:relative;

bottom:30px;

}

#box p {

position:relative;

bottom:60px;

text-align:center;

}

#box a:link, a:visited {

display:block;

font-weight:bold;

color:#FFFFFF;

background-color:#778899;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

text-align:center;

border:1px solid black;

}

#box a:hover, a:active {

background-color:#708090

}

/* End of Middle Box */

/* Left Box */

#leftbox {

border-width: 0.139in;

border-color: rgb(75, 75, 75);

border-style: dashed;

background-color: rgb(115, 115, 115);

width: 309px;

height: 296px;

z-index: 1;

position:absolute;

left:70px

}

#leftbox h3 {

font-size:180%;

text-align:center;

position:relative;

bottom:30px;

}

#leftbox p {

position:relative;

bottom:60px;

text-align:center;

}

/* End of Left Box */

/* Right Box */

#rightbox {

border-width: 0.139in;

border-color: rgb(75, 75, 75);

border-style: dashed;

background-color: rgb(115, 115, 115);

width: 309px;

height: 296px;

z-index: 1;

position:absolute;

top:395px;

right:70px;

}

/* End of Right Box */

div {

border-radius:10px;

}

我没有一个链接,因为这只是我的电脑上,但我有截图:

我不能发布2个以上的链接,因为我没有10个声望,但是当它被缩小时盒子彼此远离。

我知道这个网站并不是一个很好的网站,但它只是一个测试,因为当我放大时没有任何其他网站可以工作。请帮忙! (我尝试了一个包装,但它不起作用)

+1

你不应该把图像中的''标签和''标签已经过时了。 –

+0

这很奇怪。我一直听到有关事情突然崩溃的情况,但从来没有遇到过这个问题...... –

+0

@ Mathias,我知道,这是我的朋友(我们一起制作网站)是谁做的,因为我没有改变它,因为我没有注意到它。我解决了这个问题,但它仍然无效。 –

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。