Question

我是网页设计的新手，虽然现在对它有所了解并享受它，我已经搜索了一段时间我的问题并且没有在哪里，希望有人可以帮助我！所以我的问题是，我的左边距设定为25％，右边距设定为25％我的div宽度设置为750px 因此，当我调整屏幕大小时，右边距缩小但左边距保持在25％！这意味着当在我的手机或更小的屏幕上观看时，网站看起来更像是在右侧... 我的网站是http://lawrencetrigg.tk，如果有人可以建议我的问题是什么，会帮助我加载！谢谢你们！

a:-webkit-any-link{
text-decoration:none !important;
}
body {
	background-color: black;
}
#top {
	position: absolute;
		top: 0px;
	background-image: url("images/background-top-one.jpg");
	background-repeat: repeat-x;
  	left: 25%;
  	right: 25%;
 	width: 750px;
  	height: 100%;
	text-align:center;
	
	margin-left: auto;
	margin-right: auto;

}
#bottom1 {
	
	position: fixed;

	background-image: url("images/background-bottom-one.jpg");
	
	bottom: 0px;
    left: 25%;
    right: 25%;
    width: 750px;
    height: 150px; 
	color: black;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
}

div.transbox {
font-size: 16px;

  margin: 30px;
  background-color: #AAAAAA;
  border: 1px solid black;
  opacity: 0.7;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
 div.col-top-one {
	float: left;
	width: 100%;
	font-size: 20px;
	padding: 1px;

	height: 250px;

	
	border-color: white;
	color: white;
	top: 50px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
	top: 0px;
}


li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}


a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:60px; margin-left:-160px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; 
    border:2px solid #FFF;  color:#EEE;
    background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:2px;        
    box-shadow: 0px 0px 8px 4px #666;
    /*opacity: 0.8;*/
}
</style>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lawrence Trigg</title>
<link rel="images/favicon.ico" href="images/favicon.ico">
<style type="text/css">
a:-webkit-any-link{
text-decoration:none !important;
}
body {
	background-color: black;
}
#top {
	position: absolute;
		top: 0px;
	background-image: url("images/background-top-one.jpg");
	background-repeat: repeat-x;
  	left: 25%;
  	right: 25%;
 	width: 750px;
  	height: 100%;
	text-align:center;
	
	margin-left: auto;
	margin-right: auto;

}
#bottom1 {
	
	position: fixed;

	background-image: url("images/background-bottom-one.jpg");
	
	bottom: 0px;
    left: 25%;
    right: 25%;
    width: 750px;
    height: 150px; 
	color: black;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
}

div.transbox {
font-size: 16px;

  margin: 30px;
  background-color: #AAAAAA;
  border: 1px solid black;
  opacity: 0.7;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
 div.col-top-one {
	float: left;
	width: 100%;
	font-size: 20px;
	padding: 1px;

	height: 250px;

	
	border-color: white;
	color: white;
	top: 50px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
	top: 0px;
}


li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}


a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:60px; margin-left:-160px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; 
    border:2px solid #FFF;  color:#EEE;
    background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:2px;        
    box-shadow: 0px 0px 8px 4px #666;
    /*opacity: 0.8;*/
}


<div id="top">


<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="education.html">Education</a></li>
  <li><a href="#skills.html">Skills</a></li>
  <li><a href="#work.html">Work</a></li>
  <li><a href="#gym.html">Gym</a></li>
  <li><a href="images/cv/lawrencecv2016.docx">Download CV</a></li>
  
  <a href="https://www.facebook.com/Lawrencetrigg" class="tooltip">
    <img src="images/icons/social-facebook32.png" onmouseover="this.src='images/icons/social-facebook322.png'" onmouseout="this.src='images/icons/social-facebook32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-facebook32.png" style="float:right;" />
        <strong>Facebook</strong><br />

    </span>
</a>
  <a href="https://www.steam.com" class="tooltip">
    <img src="images/icons/social-steam32.png" onmouseover="this.src='images/icons/social-steam322.png'" onmouseout="this.src='images/icons/social-steam32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-steam32.png" style="float:right;" />
        <strong>Steam</strong><br />

    </span>
</a>
 <a href="https://www.youtube.com" class="tooltip">
    <img src="images/icons/social-youtube32.png" onmouseover="this.src='images/icons/social-youtube322.png'" onmouseout="this.src='images/icons/social-youtube32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-youtube32.png" style="float:right;" />
        <strong>Youtube</strong><br />

    </span>
</a>
 <a href="https://www.dropbox.com" class="tooltip">
    <img src="images/icons/social-dropbox32.png" onmouseover="this.src='images/icons/social-dropbox322.png'" onmouseout="this.src='images/icons/social-dropbox32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-dropbox32.png" style="float:right;" />
        <strong>Dropbox</strong><br />

    </span>
</a>
 <a href="https://www.skype.com" class="tooltip">
    <img src="images/icons/social-skype32.png" onmouseover="this.src='images/icons/social-skype322.png'" onmouseout="this.src='images/icons/social-skype32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-skype32.png" style="float:right;" />
        <strong>Skype</strong><br />

    </span>
</a>
  <a href="https://www.google.com" class="tooltip">
    <img src="images/icons/social-googleplus32.png" onmouseover="this.src='images/icons/social-googleplus322.png'" onmouseout="this.src='images/icons/social-googleplus32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-googleplus32.png" style="float:right;" />
        <strong>Google Plus</strong><br />

    </span>
</a>


</ul>
<div class="col-top-one">



 <div class="transbox">
    <p>Lawrence William Trigg</p>
 <p>I am a bright, young and ambitious individual who is self-motivated and organised. I can work well under pressure and am able to meet targets and deadlines, I am eager to learn new skills and feel the ones currently gained give a vast and varied history to draw from and implement in new situations. Working well within a team is something I enjoy, however I am also capable of working under my own initiative. </p>
 </div>
<div class="transbox">
    <p>Under Construction</p>
 
 </div>
 </div> 

</div>
<div id="bottom1">
<a href="#" class="tooltip">
    <img src="images/icons/icon-mobile1.png" onmouseover="this.src='images/icons/icon-mobile2.png'" onmouseout="this.src='images/icons/icon-mobile1.png'" />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-mobile1.png" style="float:right;" />
        <strong>Mobile Number</strong><br />
        0481718550
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-email1.png" onmouseover="this.src='images/icons/icon-email2.png'" onmouseout="this.src='images/icons/icon-email1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-email1.png" style="float:right;" />
        <strong>Email Address</strong><br />
        lawrencetrigg@me.com
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-picture1.png" onmouseover="this.src='images/icons/icon-picture2.png'" onmouseout="this.src='images/icons/icon-picture1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-picture1.png" style="float:right;" />
        <strong>Name</strong><br />
        Lawrence William Trigg
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-home1.png" onmouseover="this.src='images/icons/icon-home2.png'" onmouseout="this.src='images/icons/icon-home1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-home1.png" style="float:right;" />
        <strong>Test</strong><br />
     Home
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-favorite1.png" onmouseover="this.src='images/icons/icon-favorite2.png'" onmouseout="this.src='images/icons/icon-favorite1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-favorite1.png" style="float:right;" />
        <strong>Test</strong><br />
     Favorite
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-website1.png" onmouseover="this.src='images/icons/icon-website2.png'" onmouseout="this.src='images/icons/icon-website1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-website1.png" style="float:right;" />
        <strong>Test</strong><br />
     Website
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-dob1.png" onmouseover="this.src='images/icons/icon-dob2.png'" onmouseout="this.src='images/icons/icon-dob1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-dob1.png" style="float:right;" />
        <strong>Date Of Birth</strong><br />
   8th May 1989 / 26 Years old
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-location1.png" onmouseover="this.src='images/icons/icon-location2.png'" 

<!-- begin snippet: js hide: false -->

    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-location1.png" style="float:right;" />
        <strong>Test</strong><br />
     Location
    </span>
</a>


</div>

Answer 1

在此元素上更改left和right position：

#top {
    position: absolute;
    top: 0px;
    background-image: url("images/background-top-one.jpg");
    background-repeat: repeat-x;
    left: 0;
    right: 0;
    width: 750px;
    height: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

这个元素的position：

#bottom1 {
    position: fixed;
    background-image: url("images/background-bottom-one.jpg");
    bottom: 0px;
    left: 0;
    right: 0;
    width: 750px;
    height: 150px;
    color: black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

现在它应该有效:)

调整屏幕大小时，左边距保持不变，右边距缩小

1 个答案: