1
所以,我正在製作一個網站,當寬度縮小時,它開始看起來真的被擡起來了。我想使它的部分寬度保持不變,並且只需使用水平滾動即可左右移動。我希望這是有道理的。如何使一個HTML5頁面具有恆定的寬度?
HTML5:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Welcome to Alpha Kits!</title>
<meta charset = "utf-8"/>
<link rel = "stylesheet" href = "style.css" type = "text/css"/>
</head>
<body class = "body">
<header class = "mainheader">
<!Temp Logo><img src = "maxresdefault_2.png">
<meta charset = "UTF-8">
<nav><ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "staffmembers.html">Staff Members</a></li>
<li><a href = "forums.html">Forums</a></li>
<li><a href = "photovideo.html">Photos & Videos</a></li>
<li><a href = "donate.html">Donate</a></li>
</ul></nav>
</header>
<div class = "maincontent">
<div class = "content">
<article class = "topcontent">
<header>
<h2><p>Welcome to Alpha Kits!!!</p></h2>
</header>
<footer>
<p class = "post-info">This post was written by Doctor__Redstone</p>
</footer>
<content>
<p>Doctor__Redstone has a small eye</p>
</content>
</article>
<article class = "bottomcontent">
<header>
<h2><p>Forum Rules</p></h2>
</header>
<footer>
<p class = "post-info">This post was written by syndicatebuddy01</p>
</footer>
<content>
<p>syndicatebuddy01 has a smaller eye</p>
</content>
</article>
</div>
</div>
<aside class = "top-sidebar">
<article>
<h2>Top Sidebar</h2>
<p>Something will go here eventually</p>
</article>
</aside>
<aside class = "bottom-sidebar">
<article>
<h2>Bottom Sidebar</h2>
<p>Something will go here eventually</p>
</article>
</aside>
<footer class = "main-footer">
<p>Copyright ©Nathan (CFH_Games) http://www.youtube.com/CfHgAmEs</p>
</footer>
</body>
</html>
CSS3:
body {
background-image: url('background.jpg');
color: #000305;
font-family: Arial;
line-height: 1.5;
text-align: left;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #0000A0;
}
a:hover, a:active {
background-color: #0000A0;
color: #FFFFFF;
}
.body{
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img {
width: 100%;
height: auto;
margin: 2% 0;
}
.mainheader nav {
background-color: #FFFFFF;
background-image: url('dirt.png');
font-weight: bold;
font-family: "MineCrafter 3 Regular";
font-size: 100%;
text-shadow: 3px 0 0;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
font-style: bold;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFFFFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited {
background-color: #0000A0;
text-shadow: none;
color: #FFFFFF;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.maincontent {
line-height: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent{
background-color: #FFFFFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.topcontent header h2 {
color: #0000A0;
font-family: "MineCrafter 3 Regular";
}
.bottomcontent{
background-color: #FFFFFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent header h2 {
color: #0000A0;
font-family: "MineCrafter 3 Regular";
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFFFFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 1.3% 0 1.3% 3%;
padding: 2% 3%;
}
.top-sidebar article h2 {
color: #0000A0;
font-family: "MineCrafter 3 Regular";
font-size: 140%
}
.post-info {
font-style: italic;
color: #999;
font-size: 85%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFFFFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 1.3% 0 2% 3%;
padding: 2% 3%;
}
.bottom-sidebar article h2 {
color: #0000A0;
font-family: "MineCrafter 3 Regular";
font-size: 140%;
}
.main-footer {
width: 94%;
height: 40px;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFFFFF;
margin: 2% 0;
padding: 0 3%
}
.main-footer p {
width: 92;
margin: 1% auto;
color: #0000A0;
}
好吧,我怎麼能做一個快速響應式的設計,當我調整頁面大小時,它看起來挺起來了? – user3022957