在調整屏幕大小時，左邊距保持不變，右邊距縮小

即時通訊對於網頁設計來說並不陌生，現在儘快理解它並享受它，ive現在搜索了我的問題一段時間，並沒有得到它的任何地方，希望有人可以幫助我！所以我的問題是，我的左邊距設置爲25％，右邊距設置爲25％我的div寬度設置爲750px 所以當我去調整屏幕大小時，右邊距縮小但左邊保證金保持在25％！這意味着當我在我的手機或更小的屏幕上查看它時，網站看起來像更多的右側... 我的網站是http://lawrencetrigg.tk如果有人可以建議我的問題是什麼，將幫助我加載！謝謝你們！在調整屏幕大小時，左邊距保持不變，右邊距縮小

a:-webkit-any-link{ 
 
text-decoration:none !important; 
 
} 
 
body { 
 
\t background-color: black; 
 
} 
 
#top { 
 
\t position: absolute; 
 
\t \t top: 0px; 
 
\t background-image: url("images/background-top-one.jpg"); 
 
\t background-repeat: repeat-x; 
 
    \t left: 25%; 
 
    \t right: 25%; 
 
    \t width: 750px; 
 
    \t height: 100%; 
 
\t text-align:center; 
 
\t 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 

 
} 
 
#bottom1 { 
 
\t 
 
\t position: fixed; 
 

 
\t background-image: url("images/background-bottom-one.jpg"); 
 
\t 
 
\t bottom: 0px; 
 
    left: 25%; 
 
    right: 25%; 
 
    width: 750px; 
 
    height: 150px; 
 
\t color: black; 
 
\t text-align:center; 
 
\t margin-left: auto; 
 
\t 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 { 
 
\t float: left; 
 
\t width: 100%; 
 
\t font-size: 20px; 
 
\t padding: 1px; 
 

 
\t height: 250px; 
 

 
\t 
 
\t border-color: white; 
 
\t color: white; 
 
\t top: 50px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
\t 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 { 
 
\t background-color: black; 
 
} 
 
#top { 
 
\t position: absolute; 
 
\t \t top: 0px; 
 
\t background-image: url("images/background-top-one.jpg"); 
 
\t background-repeat: repeat-x; 
 
    \t left: 25%; 
 
    \t right: 25%; 
 
    \t width: 750px; 
 
    \t height: 100%; 
 
\t text-align:center; 
 
\t 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 

 
} 
 
#bottom1 { 
 
\t 
 
\t position: fixed; 
 

 
\t background-image: url("images/background-bottom-one.jpg"); 
 
\t 
 
\t bottom: 0px; 
 
    left: 25%; 
 
    right: 25%; 
 
    width: 750px; 
 
    height: 150px; 
 
\t color: black; 
 
\t text-align:center; 
 
\t margin-left: auto; 
 
\t 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 { 
 
\t float: left; 
 
\t width: 100%; 
 
\t font-size: 20px; 
 
\t padding: 1px; 
 

 
\t height: 250px; 
 

 
\t 
 
\t border-color: white; 
 
\t color: white; 
 
\t top: 50px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
\t 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 /> 
 
     [email protected] 
 
    </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>

來源

2016-04-02 Lawrence William Trigg

網站的佈局是非常辛苦的事情落實權利，即使一些專業知識在HTML和CSS的領域使用。如果你是一個新的網頁設計，最好從完整的解決方案開始，比如[Bootstrap]（http://getbootstrap.com/），然後通過添加自定義主題來改變它。 – Aristarhys

變化left和rightposition這個元素由：

#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; 
}

而現在它應該工作:)從頭

來源

2016-04-02 12:22:37

乾杯人實際上就像一個魅力！感謝回覆！ :) –

不客氣！ :) –

在調整屏幕大小時，左邊距保持不變，右邊距縮小

回答

相關問題