3
在過去的幾天裏，Iv'e一直在試圖解決這個問題。我現在已經將HTML和CSS傾斜了一個月左右，所以我還是很新的。在CSS中，我將position設置爲absolute，所有位置都以百分比表示。我應該爲不同的分辨率編寫不同的CSS文檔嗎？此刻，我將所有東西都放在1920 X 1080的基礎上。根據我的理解，我需要類似響應式佈局的東西，但我似乎無法弄清楚如何到達那裏。我在Codecademy上學過，我在那裏製作了airbnb頁面，似乎很適合不同的分辨率。 Iv'e看了看，所以我認爲這可能只是我失蹤的事情。 謝謝！針對不同分辨率優化網站
如果你在1080p下運行下面的代碼，它會看起來很好，而任何降低它在所有地方亂七八糟。
html,
body {
margin: 0;
padding: 0;
}
.container {
width: 640px;
margin: 0 auto;
}
/*start of header*/
.header {
background: #8A0808;
}
.nav {
margin: 0;
padding: 20px 0;
}
.nav li {
display: inline;
}
.nav a {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 15px;
display: inline;
text-transform: uppercase;
margin-left: 25px;
text-decoration: none;
}
/*end of header*/
/*start of central box*/
.centralbox {
width: 65%;
height: 150%;
position: absolute;
top: 6%;
left: 17.5%;
background-color: #151515;
}
/*end of central box*/
/*start of logo*/
.logo {
width: 22%;
height: 16%;
position: absolute;
top: 7%;
left: 21%;
}
/*end of logo*/
/*start of h1*/
.h1 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 20%;
left: 42.5%;
text-decoration: underline;
}
/*end of h1*/
/*start of introduction1*/
.introduction1 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 21%;
top: 27%;
width: 58%;
}
/*end of introduction1*/
/*start of main picture*/
.mainimage {
background-color: #585858;
position: absolute;
top: 34%;
left: 21%;
width: 42%;
height: 42%;
}
.boxextension {
width: 16%;
height: 42%;
background-color: #585858;
position: absolute;
top: 34%;
left: 63%;
}
/*end of main picture*/
/*start of h2*/
.h2 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 35%;
left: 62%;
text-decoration: underline;
}
/*end of h2*/
/*start of introduction2*/
.introduction2 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
width: 16%;
position: absolute;
top: 41%;
left: 62%;
}
/*end of introduction2*/
/*start of table*/
.AG9S Table {
width: 20%;
border: 2px solid;
border-color: #000000;
position: absolute;
top: 78%;
left: 21%;
border-radius: 10px;
background-color: #000000;
list-style-type: none;
}
.AG9S Table td {
vertical-align: middle;
border: 1px solid #000000;
text-align: left;
padding: 7px;
font-size: 12px;
font-family: 'Montserrat', sans-serif;
color: #E6E6E6;
}
.AG9S Table tr:nth-child(odd) {
background-color: #8A0808;
}
.AG9S Table tr:nth-child(even) {
background-color: #2E2E2E;
}
.AG9S Table tr:first-child td:first-child {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
}
.AG9S Table tr:first-child td:last-child {
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
}
.AG9S Table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
}
.AG9S Table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
}
/*end of table*/
/*start of infotable1*/
.infotable Table {
width: 30%;
border: 2px solid;
border-color: #000000;
position: absolute;
top: 78%;
left: 42%;
border-radius: 10px;
background-color: #000000;
}
.infotable Table td {
vertical-align: middle;
border: 1px solid #000000;
text-align: left;
padding: 7px;
font-size: 12px;
font-family: 'Montserrat', sans-serif;
color: #E6E6E6;
}
.infotable Table tr:nth-child(odd) {
background-color: #8A0808;
}
.infotable Table tr:nth-child(even) {
background-color: #2E2E2E;
}
.infotable Table tr:first-child td:first-child {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
}
.infotable Table tr:first-child td:last-child {
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
}
.infotable Table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
}
.infotable Table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
}
/*end of infotable1*/
/*start of h3*/
.h3 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 90%;
left: 42%;
text-decoration: underline;
}
/*end of h3*/
/*start of introduction 3*/
.introduction3 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
position: absolute;
top: 96%;
left: 42%;
width: 30%;
}
/*end of introduction 3*/
/*start of h4*/
.h4 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 102%;
left: 42%;
text-decoration: underline;
}
/*end of h4*/
/*start of introduction 4*/
.introduction4 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
position: absolute;
top: 108%;
left: 42%;
width: 30%;
}
/*end of introduction 4*/
/*start of h5*/
.h5 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 117%;
left: 42%;
text-decoration: underline;
}
/*end of h5*/
/*start of introduction 5*/
.introduction5 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
position: absolute;
top: 123%;
left: 42%;
width: 30%;
}
/*end of introduction 5*/
/* start of menu*/
.menu {
position: absolute;
top: 10%;
left: 2%;
}
/*end of menu*/
/*start of footer*/
.footer {
width: 100%;
position: absolute;
top: 150%;
background-color: #333333;
color: #ffffff;
padding: 30px 0;
}
.footer p {
font-family: 'Raleway', sans-serif;
font-size: 11px;
text-transform: uppercase;
}
/*end of footer*/<!DOCTYPE html>
<html>
<head>
<title>Lorem Ipsum Dolor</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='testcss.css' />
</head>
<body background="http://i.imgur.com/EUCIQ9x.png">
<!--start of header-->
<div class="header">
<div class="container">
<ul class="nav">
<li><a href="#"> Lorem </a>
</li>
<li><a href="#"> Home </a>
</li>
<li><a href="#"> Stuff </a>
</li>
<li><a href="#"> This </a>
</li>
<li><a href="#"> That </a>
</li>
</ul>
</div>
</div>
<!--end of header-->
<!--start of central box-->
<div class="centralbox">
</div>
<!--end of central box-->
<!--start of h1-->
<div class="h1">
<h1> Overview </h1>
</div>
<!--end of h1-->
<!--start of spec table 1-->
<div class="AG9S">
<ul>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
</td>
</tr>
</table>
</ul>
</div>
<!--end of table 1-->
<!--start of logo-->
<div class="logo">
<img src="https://git-scm.com/images/logos/downloads/Git-Logo-Black.png" width="100%" height="100%">
</div>
<!--end of logo-->
<!--start of introduction1-->
<div class="introduction1">
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id.
</p>
</div>
<!--end of introduction1-->
<!--start of image-->
<div class="mainimage">
<img src="http://www.clker.com/cliparts/a/2/Y/Q/y/8/mustache-no-background.svg" height="100%" width="100%">
</div>
<div class="boxextension">
</div>
<!--end of image-->
<!--start of introduction2-->
<!--start of h2-->
<div class="h2">
<h2>Lorem</h2>
</div>
<!--end of h2-->
<div class="introduction2">
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure.
</p>
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula,
</p>
</div>
<!--end of introduction2-->
<!--start of infotable-->
<div class="infotable">
<ul>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</ul>
</div>
<!--end of infotable1-->
<!--start of introduction 3-->
<!--start of h3-->
<div class="h3">
<h2>Lorem</h2>
</div>
<!--end of h3-->
<div class="introduction3">
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure.
</p>
</div>
<!--end of introduction 3-->
<!--start of introduction 4-->
<!--start of h4-->
<div class="h4">
<h2>Ipsum</h2>
</div>
<!--end of h4-->
<div class="introduction4">
<P>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure. Illud delenit adipisci mea in. Quo et aperiam temporibus consequuntur,
sit ne quem eirmod pertinax.Lorem ipsum dolor sit amet,
</p>
</div>
<!--end of introduction 4-->
<!--startof h5-->
<div class="h5">
<h2>Dolor</h2>
</div>
<!--end of h6-->
<!--start of introduction 6-->
<div class="introduction5">
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure. Illud delenit adipisci mea in. Quo et aperiam temporibus consequuntur,
sit ne quem eirmod pertinax.Lorem ipsum dolor sit amet,
</p>
</div>
<!--end of introduction 6-->
<!--start of menu-->
<div class="menu">
<select onchange="window.location.href=this.value">
<option value="#">Lorem</option>
<option value="https://www.youtube.com/">Ipsum</option>
<option value="#">Dolor</option>
</select>
</div>
<!--end of menu-->
<!--start of footer-->
<div class="footer">
<div class="container">
<p>© blahblah 2015</p>
</div>
</div>
<!--end of footer-->
</body>
</html>
我認爲你是一個良好的開端，但是當你說你正在做的一切百分比，仍然有以像素爲單位的事情。例如，頂部的'width：640px;'。這不會帶來良好的響應！也許你應該先嚐試一些簡單的設計。 –