超鏈接不起作用。我認為css有一些問題。任何人都可以忽略并幫助解決這個問題嗎？ 忽略這個 一個國家每年排放多少？人均排放量是多少？隨著時間的推移，它排放了多少？當我們對貿易進行校正時，排放量如何比較？
*{
margin: 0;
padding: 0;
font-family: 'Dongle', sans-serif;
}
.header{
min-height: 70vh;
width: 100%;
background-position: center;
background-size: cover;
}
nav{
display: flex;
padding: 1% 1%;
justify-content: space-between;
align-items: center;
}
nav img{
width:140px;
height: 80px;
}
.nav-bar{
flex: 1;
text-align: right;
}
.nav-bar ul li{
list-style: none;
display: inline-block;
padding:8px 12px;
}
.nav-bar ul li a{
color: aquamarine;
text-decoration: none;
font-size: 33px;
}
.start-1{
width: 100%;
color: #fff;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
padding-left: 1%;
}
.start-1 h1{
font-size: 50px;
text-align: left;
padding-top: 15%;
}
.start-1 p{
margin: 10px o 40px;
padding-right: 1%;
text-align: left;
font-size: 18px;
color: #fff;
font-family: monospace;
}
.table{
padding-left:2% ;
font-family: monospace;
font-size: 28px;
}
body{
background-image: url(webimages/india.jpg);
background-position: center;
background-size: cover;
position: relative;
width: 100%;
}<html>
<head>
<title>HOME PAGE</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="webimages/logo.jpg" alt="LOGO"></a>
<div class="nav-bar">
<ul>
<li><a href="index.html"><u>HOME</u></a></li>
<li><a href="ABOUT US.html"><u>ABOUT US</u></a></li>
<li><a href="CONTACT US.html"><u>CONTACT US</u></a></li>
<li><a href="DONATE PAGE.html"><u>DONATE</u></a></li>
</ul>
</div>
</nav>
<div class="start-1">
<strong><h1>CO <sub>2</sub> and Greenhouse Gas Emissions Country Profiles</h1></strong>
<p>How are emissions changing in each country? Is your country making progress on reducing emissions? We built 4 country profiles which allow you to explore the statistics for the top polluting countries. Each profile includes interactive visualizations, explanations of the presented metrics, and the details on the sources of the data.</p>
</div>
</section>
<section>
<ol class=table>
<h3 > Every profile includes five sections</h3>
<li> CO2 emissions: How much does a country emit each year? What is the average emissions per person? How much has it emitted over time? How do emissions compare when we correct for trade?</li>
<li>Coal, oil, gas, cement: How much CO2 comes from coal, oil, gas, flaring or cement production?</li>
<li>Other greenhouse gases: How much total greenhouse gases does each country emit? How much methane, and nitrous oxide is emitted?</li>
<li>Emissions by sector: Which sectors contribute most to emissions? Does transport contribute more or less than electricity; how large are agriculture and land use emissions?</li>
<li>Carbon and energy efficiency: How much energy do we use per unit of GDP? How much carbon do we emit per unit of energy?</li>
</ol>
</section>
</body>
</html>超鏈接不起作用。我認為css有一些問題。任何人都可以忽略并幫助解決這個問題嗎？
uj5u.com熱心網友回復：
您的具有類名的容器start-1有一個position: absolute;并且與您的導航重疊。z-index: -1;在該類上添加一個以將其移動到頁面的后面。檢查片段以供參考。
* {
margin: 0;
padding: 0;
font-family: 'Dongle', sans-serif;
}
.header {
min-height: 70vh;
width: 100%;
background-position: center;
background-size: cover;
}
nav {
display: flex;
padding: 1% 1%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 140px;
height: 80px;
}
.nav-bar {
flex: 1;
text-align: right;
}
.nav-bar ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
}
.nav-bar ul li a {
color: aquamarine;
text-decoration: none;
font-size: 33px;
}
.start-1 {
width: 100%;
color: #fff;
position: absolute;
z-index: -1;
left: 50%;
transform: translate(-50%, -50%);
padding-left: 1%;
}
.start-1 h1 {
font-size: 50px;
text-align: left;
padding-top: 15%;
}
.start-1 p {
margin: 10px o 40px;
padding-right: 1%;
text-align: left;
font-size: 18px;
color: #fff;
font-family: monospace;
}
.table {
padding-left: 2%;
font-family: monospace;
font-size: 28px;
}
body {
background-image: url(webimages/india.jpg);
background-position: center;
background-size: cover;
position: relative;
width: 100%;
}<html>
<head>
<title>HOME PAGE</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="webimages/logo.jpg" alt="LOGO"></a>
<div class="nav-bar">
<ul>
<li><a href="index.html"><u>HOME</u></a></li>
<li><a href="ABOUT US.html"><u>ABOUT US</u></a></li>
<li><a href="CONTACT US.html"><u>CONTACT US</u></a></li>
<li><a href="DONATE PAGE.html"><u>DONATE</u></a></li>
</ul>
</div>
</nav>
<div class="start-1">
<strong><h1>CO <sub>2</sub> and Greenhouse Gas Emissions Country Profiles</h1></strong>
<p>How are emissions changing in each country? Is your country making progress on reducing emissions? We built 4 country profiles which allow you to explore the statistics for the top polluting countries. Each profile includes interactive visualizations,
explanations of the presented metrics, and the details on the sources of the data.</p>
</div>
</section>
<section>
<ol class=table>
<h3> Every profile includes five sections</h3>
<li> CO2 emissions: How much does a country emit each year? What is the average emissions per person? How much has it emitted over time? How do emissions compare when we correct for trade?</li>
<li>Coal, oil, gas, cement: How much CO2 comes from coal, oil, gas, flaring or cement production?</li>
<li>Other greenhouse gases: How much total greenhouse gases does each country emit? How much methane, and nitrous oxide is emitted?</li>
<li>Emissions by sector: Which sectors contribute most to emissions? Does transport contribute more or less than electricity; how large are agriculture and land use emissions?</li>
<li>Carbon and energy efficiency: How much energy do we use per unit of GDP? How much carbon do we emit per unit of energy?</li>
</ol>
</section>
</body>
</html>更多關于z-index 這里。
uj5u.com熱心網友回復：
您的.start1div 與選單重疊，并阻止了超鏈接。您可以添加一個.start1{top:100px}看看它是否會降低它的位置，這樣它就不會阻止超鏈接。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/416452.html
標籤：
上一篇：如何擁有一個包含產品ID的鏈接