所以我試圖制作一個可點擊的地球儀。單擊它后，我希望它從我的本地主機將我重定向到相應的檔案。這是我用來呼應地球的 PHP 部分。
<?php
echo '<a href="13.3.html"><div > <div ><font size="5" color="#f70505"><b> 13.3</b></font></div></div></a><br/>';
echo '<a href="13.4.html"><div ><div ><font size="5" color="#dbb700"><b> 13.4</b></font></div></div></a><br/>';
echo '<a href="13.5.html"><div ><div ><font size="5" color="#6d36c5"><b> 13.5</b></font></div></div></a><br/>';
echo '<a href="13.6.html"><div ><div ><font size="5" color="#f70505"><b> 13.6</b></font></div></div></a><br/>';
?>
而css檔案就是這個。
.container {
position: relative;
width: 800px;
height: 800px;
margin: auto;
margin-top: 3vh;
background: #0b1a5e;
border-radius: 120px;
z-index: -2;
margin: 0 auto;
}
.tree {
position: relative;
width: 100%;
height: 100%;
left: 13%;
top: 5%;
margin: 0 auto;
}
.tree-triangle3 {
position: absolute;
width: 66%;
height: 36%;
bottom: 20%;
left: 3.5%;
background: #034f33;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tree-triangle2 {
position: absolute;
width: 53%;
height: 33%;
bottom: 35%;
left: 10%;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: #046944;
z-index: 2;
}
.tree-triangle1 {
position: absolute;
width: 42%;
height: 25%;
bottom: 50%;
left: 15.5%;
background: #038052;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
z-index: 3;
}
.trunk {
position: absolute;
width: 10%;
height: 16%;
background: #66503e;
z-index: -1;
bottom: 5%;
left: 32%;
}
.ornament {
position: absolute;
width: 8%;
height: 8%;
border-radius: 50%;
box-shadow: 0 0 3px #033b26;
/* background: #eb5252; */
z-index: 2;
text-align: center;
}
.shine {
position: absolute;
width: 55%;
height: 55%;
top: 10%;
right: 11%;
border-radius: 50%;
background: white;
filter: opacity(60%);
}
.or1 {
left: 50%;
top: 34%;
background: #0742d9;
}
.or2 {
left: 45%;
top: 45%;
background: #c91212;
}
.or3 {
left: 28%;
top: 60%;
background: #dbb700;
}
.or4 {
left: 60%;
top: 68%;
background: #6d36c5;
}
.star {
position: absolute;
width: 20%;
height: 20%;
background: #ffe380;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
left: 26.5%;
top: 11%;
z-index: 4;
}
.star-highlight {
position: absolute;
width: 20%;
height: 20%;
background: #5df505;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
50% 70%,
50% 60%,
50% 46%,
50% 36%
);
left: 26.5%;
top: 11%;
z-index: 4;
}我的問題是，當 T 最大化鍍鉻視窗時，裝飾品會改變它們的寬度和位置。任何人都知道如何解決它？
uj5u.com熱心網友回復：
這不是 PHP echo 的問題。事實上，當您的視口被調整大小時，HTML（和 CSS）保持不變 - 不會再次呼叫 PHP。
我假設所有東西都包含在設定為方形的容器中。您不需要使用媒體查詢來重置其尺寸，但您可能需要確保它對于視口來說永遠不會太寬或太高（這是您需要做出的決定，對用戶來說是否可以？必須滾動）。此代碼段只是將最大寬度限制為視口的寬度。它還通過使用 CSS 縱橫比屬性來設定高度，以確保它始終是方形的。
.container {
position: relative;
width: 800px;
max-width: 100vmin;
aspect-ratio: 1;
margin: auto;
margin-top: 3vh;
background: #0b1a5e;
border-radius: 120px;
z-index: -2;
margin: 0 auto;
}
.tree {
position: relative;
width: 100%;
height: 100%;
left: 13%;
top: 5%;
margin: 0 auto;
}
.tree-triangle3 {
position: absolute;
width: 66%;
height: 36%;
bottom: 20%;
left: 3.5%;
background: #034f33;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tree-triangle2 {
position: absolute;
width: 53%;
height: 33%;
bottom: 35%;
left: 10%;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: #046944;
z-index: 2;
}
.tree-triangle1 {
position: absolute;
width: 42%;
height: 25%;
bottom: 50%;
left: 15.5%;
background: #038052;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
z-index: 3;
}
.trunk {
position: absolute;
width: 10%;
height: 16%;
background: #66503e;
z-index: -1;
bottom: 5%;
left: 32%;
}
.ornament {
position: absolute;
width: 8%;
height: 8%;
border-radius: 50%;
box-shadow: 0 0 3px #033b26;
/* background: #eb5252; */
z-index: 2;
text-align: center;
}
.shine {
position: absolute;
width: 55%;
height: 55%;
top: 10%;
right: 11%;
border-radius: 50%;
background: white;
filter: opacity(60%);
}
.or1 {
left: 50%;
top: 34%;
background: #0742d9;
}
.or2 {
left: 45%;
top: 45%;
background: #c91212;
}
.or3 {
left: 28%;
top: 60%;
background: #dbb700;
}
.or4 {
left: 60%;
top: 68%;
background: #6d36c5;
}
.star {
position: absolute;
width: 20%;
height: 20%;
background: #ffe380;
clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
left: 26.5%;
top: 11%;
z-index: 4;
}
.star-highlight {
position: absolute;
width: 20%;
height: 20%;
background: #5df505;
clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36%);
left: 26.5%;
top: 11%;
z-index: 4;
}<div class="container">
<a href="13.3.html">
<div class="ornament or1">
<div class="shine">
<font size="5" color="#f70505"><b> 13.3</b></font>
</div>
</div>
</a><br/>;
<a href="13.4.html">
<div class="ornament or2">
<div class="shine">
<font size="5" color="#dbb700"><b> 13.4</b></font>
</div>
</div>
</a><br/>;
<a href="13.5.html">
<div class="ornament or3">
<div class="shine">
<font size="5" color="#6d36c5"><b> 13.5</b></font>
</div>
</div>
</a><br/>;
<a href="13.6.html">
<div class="ornament or4">
<div class="shine">
<font size="5" color="#f70505"><b> 13.6</b></font>
</div>
</div>
</a><br/>;
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401318.html
上一篇：使:after箭頭更寬