网站看起来如何
基于显示器，我的网站布局和整体设计完全混乱。很多人告诉我把所有的东西都放在分隔符里，但我还是个新手，不知道具体放在哪里。任何帮助将是非常赞赏。我试图使网页设计流畅，但老实说，我更喜欢它无响应。任何回复配上网站在你屏幕上的截图都会很棒
https://xxxmachinegirlxxx.neocities.org/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>machine girl world</title>
<link rel="shortcut icon" href="http://i12.photobucket.com/albums/a213/superkate_2468/favicon-5ico.gif" type="image/x-icon">
<link rel="stylesheet" href="sidebar-content-sidebar.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#hair1" ).draggable();
} );
</script>
<script>
$( function() {
$( "#hair2" ).draggable();
} );
</script>
<script>
$( function() {
$( "#hair3" ).draggable();
} );
</script>
<script>
$( function() {
$( "#hair4" ).draggable();
} );
</script>
<script>
$( function() {
$( "#hair5" ).draggable();
} );
</script>
<script>
$( function() {
$( "#hair6" ).draggable();
} );
</script>
<script>
$( function() {
$( "#hair7" ).draggable();
} );
</script>
<script>
$( function() {
$( "#hair8" ).draggable();
} );
</script>
<script>
$( function() {
$( "#hair9" ).draggable();
} );
</script>
<script>
$( function() {
$( "#hair11" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit1" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit2" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit3" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit4" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit5" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit6" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit7" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit8" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit9" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit10" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit11" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit12" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit13" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit14" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit15" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit16" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit17" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit18" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit19" ).draggable();
} );
</script> <script>
$( function() {
$( "#outfit19" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit20" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit21" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit22" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit23" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit24" ).draggable();
} );
</script> <script>
$( function() {
$( "#outfit25" ).draggable();
} );
</script> <script>
$( function() {
$( "#outfit26" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit27" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit28" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit29" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit30" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit31" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit32" ).draggable();
} );
</script>
<script>
$( function() {
$( "#outfit33" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor1" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor2" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor3" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor4" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor5" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor6" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor7" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor8" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor9" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor10" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor11" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor12" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor13" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor14" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor15" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor16" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor17" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor18" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor19" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor20" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor21" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor22" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor23" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor24" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor25" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor26" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor27" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor28" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor29" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor30" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor31" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor32" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor33" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor34" ).draggable();
} );
</script> <script>
$( function() {
$( "#decor35" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor36" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor37" ).draggable();
} );
</script>
<script>
$( function() {
$( "#decor38" ).draggable();
} );
</script>
<style type="text/css">* {cursor: url(https://cur.cursors-4u.net/special/spe-2/spe192.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/02/05/i-love-my-blog.html" target="_blank" title="I Love My Blog"><img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="I Love My Blog" style="position:absolute; top: 0px; right: 0px;" /></a>
</style>
<style>
a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: blue;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
@font-face {
font-family: '000webfont';
src: url('000webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.mainshawty {
left: 50%;
transform: translateX(-50%);
font-family: '000webfont';
font-size:30px;
height: 65%;
width: 37%;
overflow: scroll;
position: absolute;
right: 400px;
top: 150px;
border: 3px outset #A1A1A1;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
background-color: dimgrey;
}
.sidebarya {
font-family: '000webfont';
font-size:20px;
overflow: hidden;
height: 72%;
width: 12%;
position: absolute;
right: 50px;
top: 120px;
border-image-slice:27 27 27 27;border-image-width:20px 20px 20px 20px;border-image-outset:0px 0px 0px 0px;border-image-repeat:stretch stretch;border-image-source:url("https://xxxmachinegirlxxx.neocities.org/border.png");border-style:solid;
padding-top: 30px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
background-color: dimgrey;
}
.body-text {
font-family: '000webfont';
margin-left: 150px;
font-size: 30px;
}
.sidebarg {
font-family: '000webfont';
font-size:30px;
height: 72%;
width: 12%;
position: absolute;
z-index: 200;
left: 50px;
top: 120px;
overflow:hidden;
border-image-slice:27 27 27 27;border-image-width:20px 20px 20px 20px;border-image-outset:0px 0px 0px 0px;border-image-repeat:stretch stretch;border-image-source:url("https://xxxmachinegirlxxx.neocities.org/border.png");border-style:solid;
padding-top: 30px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
background-color: dimgrey;
}
.sidebar div {
padding: 8px;
font-size: 30px;
display: block;
}
.body-text {
margin-left: 150px;
font-size: 18px;
}
.responsive {
max-width: 100%;
height: auto;
}
body {
background-image: url(https://xxxmachinegirlxxx.neocities.org/yas.gif);
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
</style>
<script language="javascript">
var titletext="i want to be real."
var repeat=true; // SET TO true TO REPEAT, false TO "TYPE" OUT TITLE ONLY ONCE.
set=setTimeout;
var index=0;
function scrolltitle(){
if(index<=titletext.length){
document.title=titletext.substring(0,index);
index++;
set('scrolltitle()', 200);
}else{
index=0;
if(repeat)set('scrolltitle()',1000);
}}
window.onload=function(){
if(!document.layers)set('scrolltitle()',1000);
}
</script>
<body>
<div class="sidebarya">
<div style="position:absolute; left:0px;bottom:0px;"><iframe src="https://www3.cbox.ws/box/?boxid=3512307&boxtag=D3LrV1" width="200px"height="450px" allowtransparency="yes" allow="autoplay" frameborder="0"scrolling="hidden"></iframe></div>
</div>
<div class="mainshawty">
<div style="text-align:center;">
<img src="yaya.png"><br>
Doll Dressup
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href='https://xxxmachinegirlxxx.neocities.org/dollz1.html'>1</a>
<a href='https://xxxmachinegirlxxx.neocities.org/dollz2.html'>2</a>
<a href='https://xxxmachinegirlxxx.neocities.org/dollz3.html'>3</a>
<a href='https://xxxmachinegirlxxx.neocities.org/dollz4.html'>4</a>
<a href='https://xxxmachinegirlxxx.neocities.org/dollz5.html'>5</a>
<br>Heads<br>
<div id="hair1" style="float:left;z-index:200">
<img src="27.gif" class="drag" height="55px" width="50px"></div>
<div id="hair2" style="float: left;z-index:200"><img src="5.gif" class="drag" height="55px" width="50px">
</div>
<div id="hair3" style="float:left;z-index:200"><img src="28.gif" class="drag" height="55px" width="50px">
</div>
<div id="hair4" style="float:left;z-index:200;z-index:200"><img src="44.gif" class="drag" height="50px" width="46px">
</div>
<div id="hair5" style="float:left;z-index:200"><img src="43.gif" class="drag" height="50px" width="46px">
</div>
<div id="hair6" style="float:left;z-index:200"><img src="40.gif" class="drag" height="52px" width="48px">
</div>
<div id="hair7" style="float:left;z-index:200"><img src="31.gif" class="drag" height="55px" width="50px">
</div>
<div id="hair8" style="float:left;z-index:200"><img src="48.gif" class="drag" height="49px" width="44px">
</div>
<div id="hair9" style="float:left;z-index:200"><img src="49.gif" class="drag" height="57px" width="52px">
</div>
<div id="hair11" style="float:left;z-index:200"><img src="36.gif" class="drag" height="62px" width="57px">
</div>
<br><br>Outfits<br><br>
<div id="outfit1" style="float:left;z-index:199"><img src="1.gif" class="drag" height="150px" width="90px">
</div>
<div id="outfit2" style="float:left;z-index:199"><img src="2.gif" class="drag" height="150px" width="70px">
</div>
<div id="outfit3" style="float:left;z-index:199"><img src="3.gif" class="drag" height="150px" width="50px">
</div>
<div id="outfit4" style="float:left;z-index:199"><img src="50.gif" class="drag" height="150px" width="140px">
</div>
<div id="outfit5" style="float:left;z-index:199;z-index:300"><img src="22.gif" class="drag" height="150px" width="90px">
</div>
<div id="outfit6" style="float:left;z-index:199"><img src="4.gif" class="drag" height="150px" width="100px">
</div>
<div id="outfit7" style="float:left;z-index:199"><img src="comout439.gif" class="drag" height="140px" width="110px">
</div>
<div id="outfit8" style="float:left;z-index:199"><img src="comout126.gif" class="drag" height="100px" width="90px">
</div>
<div id="outfit9" style="float:left;z-index:199"><img src="comout1199.gif" class="drag" height="150px" width="110px">
</div>
<div id="outfit10" style="float:left;z-index:199"><img src="comout35.gif" class="drag" height="145px" width="100px">
</div>
<div id="outfit11" style="float:left;z-index:199"><img src="comout910.gif" class="drag" height="85px" width="85px">
</div>
<div id="outfit12" style="float:left;z-index:199"><img src="comout1087.gif" class="drag" height="150px" width="90px">
</div>
<div id="outfit13" style="float:left;z-index:199"><img src="comout118.gif" class="drag" height="90px" width="90px">
</div>
<div id="outfit14" style="float:left;z-index:199"><img src="comout795.gif" class="drag" height="160px" width="100px">
</div>
<div id="outfit15" style="float:left;z-index:199"><img src="comout354.gif" class="drag" height="150px" width="90px">
</div>
<div id="outfit16" style="float:left;z-index:199"><img src="dress15.gif" class="drag" height="150px" width="70px">
</div>
<div id="outfit17" style="float:left;z-index:199"><img src="comout959.gif" class="drag" height="150px" width="110px">
</div>
<div id="outfit18" style="float:left;z-index:199"><img src="comout998.gif" class="drag" height="150px" width="100px">
</div>
<div id="outfit19" style="float:left;z-index:199"><img src="comout933.gif" class="drag" height="150px" width="95px">
</div>
<div id="outfit21" style="float:left;z-index:199"><img src="comout108.gif" class="drag" height="95px" width="85px">
</div>
<div id="outfit22" style="float:left;z-index:199"><img src="compj07.gif" class="drag" height="95px" width="95px">
</div>
<div id="outfit23" style="float:left;z-index:199"><img src="compj03.gif" class="drag" height="100px" width="105px">
</div>
<div id="outfit24" style="float:left;z-index:199"><img src="comout110.gif" class="drag" height="100px" width="95px">
</div>
<div id="outfit25" style="float:left;z-index:199"><img src="compj33.gif" class="drag" height="140px" width="70px">
</div>
<br><br><br>
<center>Decorations</center><br>
<div id="decor1" style="float:left"><img src="comdog45.gif" class="drag" height="45px" width="50px">
</div>
<div id="decor2" style="float:left"><img src="comdog258.gif" class="drag" height="45px" width="50px">
</div>
<div id="decor4" style="float:left"><img src="comdog132.gif" class="drag" height="45px" width="50px">
</div>
<div id="decor3" style="float:left"><img src="6.gif" class="drag" height="40px" width="40px">
</div>
<div id="decor5" style="float:left"><img src="12.gif" class="drag" height="60px" width="60px">
</div>
<div id="decor6" style="float:left"><img src="13.gif" class="drag" height="60px" width="60px">
</div>
<div id="decor7" style="float:left"><img src="8.gif" class="drag" height="40px" width="60px">
</div>
<div id="decor8" style="float:left"><img src="9.gif" class="drag" height="60px" width="60px">
</div>
<div id="decor9" style="float:left"><img src="comxmasan22.gif" class="drag" height="60px" width="40px">
</div>
<div id="decor10" style="float:left"><img src="comcat10.gif" class="drag" height="40px" width="40px">
</div>
<div id="decor11" style="float:left"><img src="comcat01.gif" class="drag" height="35px" width="35px">
</div>
<div id="decor12" style="float:left"><img src="comdog12 (1).gif" class="drag" height="40px" width="40px">
</div>
<div id="decor13" style="float:left"><img src="comtoy47.gif" class="drag" height="40px" width="40px">
</div>
<div id="decor14" style="float:left"><img src="comlove04.gif" class="drag" height="40px" width="40px">
</div>
<div id="decor15" style="float:left"><img src="comlove06.gif" class="drag" height="40px" width="40px">
</div>
<div id="decor16" style="float:left"><img src="comlove02.gif" class="drag" height="40px" width="40px">
</div>
<div id="decor17" style="float:left"><img src="25.gif" class="drag" height="60px" width="60px">
</div>
<div id="decor18" style="float:left"><img src="18.gif" class="drag" height="60px" width="60px">
</div>
<div id="decor19" style="float:left"><img src="comele03.gif" class="drag" height="40px" width="40px">
</div>
<div id="decor20" style="float:left"><img src="comlamp12.gif" class="drag" height="50px" width="20px">
</div>
<div id="decor21" style="float:left"><img src="comcompw32.gif" class="drag" height="70px" width="45px">
</div>
Furniture
<br><br>
<div id="decor22" style="float:left;z-index:1"><img src="comcomp05.gif" class="drag" height="150px" width="145px">
</div>
<div id="decor23" style="float:left;z-index:1"><img src="comcomp13.gif" class="drag" height="150px" width="145px">
</div>
<div id="decor24" style="float:left;z-index:1"><img src="comcomp03.gif" class="drag" height="150px" width="145px">
</div>
<div id="decor25" style="float:left;z-index:1"><img src="comcomp35.gif" class="drag" height="150px" width="145px">
</div>
<div id="decor26" style="float:left;z-index:2"><img src="comseat128.gif" class="drag" height="110px" width="90px">
</div>
<div id="decor38" style="float:left;z-index:2"><img src="comseat128a.gif" class="drag" height="110px" width="90px">
</div>
<div id="decor34" style="float:left;z-index:2"><img src="comseat140.gif" class="drag" height="110px" width="90px">
</div>
<div id="decor27" style="float:left;z-index:2"><img src="combed22.gif" class="drag" height="150px" width="220px">
</div>
<div id="decor28" style="float:left;z-index:2"><img src="combed02.gif" class="drag" height="100px" width="240">
</div>
<div id="decor29" style="float:left;z-index:2"><img src="combed04.gif" class="drag" height="100px" width="230">
</div>
<div id="decor30" style="float:left;z-index:2"><img src="comseat44.gif" class="drag" height="100px" width="230">
</div>
<div id="decor31" style="float:left;z-index:2"><img src="comfur06.gif" class="drag" height="100px" width="80px">
</div>
<div id="decor32" style="float:left;z-index:2"><img src="comfur33.gif" class="drag" height="50px" width="50px">
</div>
<div id="decor33" style="float:left;z-index:2"><img src="comframe14.gif" class="drag" height="50px" width="50px">
</div>
<div id="decor35" style="float:left;z-index:2"><img src="aqu75a.gif" class="drag" height="140px" width="100px">
</div>
<div id="decor36" style="float:left;z-index:2"><img src="comdog142.gif" class="drag" height="100px" width="100px">
</div>
<div id="decor37" style="float:left;z-index:0"><img src="comrug62.gif" class="drag" height="100px" width="160px">
</div>
</div>
</div>
</div>
</div>
<div class="sidebarg">
<div style="text-align:center;"><a href="aboutme.html">About Me</a><br><a href="favorites.html">Favorites</a><br><a href="whathappened.html">Home</a><br><a href="adviceforum.html">Advice</a><br><a href="luna.html">Luna</a><br><a href="diary.html">Diary</a><br><a href="aboutme.html">About Me</a><br><a href="goodies.html">Goodies</a><br><a href="dollz.html">Dolls</a><br>mood<a href="https://www.imood.com/users/jazzdog12"><img src="https://moods.imood.com/display/uname-jazzdog12/fg-000000/trans-1/imood.gif" alt="The current mood of jazzdog12 at www.imood.com" width="100" height="15"></a><br><script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5670617";
var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
fhs.src = "//freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=Online &e2=Online &r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
</script>
<img src="insanedoll.gif"></div>
</div>
<div style="position: relative; left: 0%; top:3%;z-index:1000;translate(4%, -7%);display: flex;
justify-content: center;">
<img src="https://64.media.tumblr.com/88a30b3a680ea1b596124eb40d05f522/ad1af1aa6edf17ff-44/s250x400/2b5679baba0f0ba3c1404743d8b07037a5670ac4.gifv"width="250" height="100">
</div>
<div style="position: relative; left: 21%; top:5%; z-index:1000;transform: translate(2%, -45%);">
<img src="me.png"width="250">
</div>
<div style=" position: relative; left: 62%; bottom:0%;z-index:1000;transform: translate(-3%, -145%);">
<img src="image.png"width="250">
</div>
<iframe width="0" height="0" src="https://www.youtube.com/embed/QGWQ3mSAXl8?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>1 .已经导入了两个jquery "ie "(3.2.1和3.6.0)，删除一个
。这种制作可拖动项目的方法并不聪明。尝试使用draggable类。下面的例子:
HTML:
<div id="hair1" class="draggable">
<img src="example.gif" type="image/gif"/>
</div>
JS:
$(document).ready(function() {
$(".draggable").draggable();
});
。内联CSS应该出现在.css文件中，这样可维护性更好。
第四。也格式化你的代码，以获得更好的可维护性。
这些是给你的一些建议。希望他们有所帮助。