gpt4 book ai didi

html - w3-tab 内的 div 容器(作为页面制表符导航)W3 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 10:53:16 24 4
gpt4 key购买 nike

我是 html 和 css 的新手。我找到了 W3.CSS 模板并尝试修改它。我正在尝试制作一个导航工具栏,如本例所示: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_nav_topnav_tab

但我想在 3 个主要容器中分别放置额外的“容器”。但是,额外的 <div>永远不会显示。这是一个例子:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-topnav w3-red">
<a href="#link1">London</a>
<a href="#link2">Paris</a>
<a href="#link3">Tokyo</a>
</div>

<div class="w3-tab">
<div id="link1" class="w3-container">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

<div class="w3-row">
<div class="w3-container w3-half">
<h2>w3-half</h2>
<p>This is a paragraph</p>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
<p>This is a paragraph</p>
</div>
</div>
</div>
<div id="link2" class="w3-container">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div id="link3" class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>
</html>

最佳答案

.w3-tab div 显示被隐藏,您需要更改它。此外,HTML 结构不正确。使用以下内容:

<!DOCTYPE html>
<html>

<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.w3-row, .w3-half {
display:block !important;
}
</style>
</head>

<body>

<div class="w3-topnav w3-red">
<a href="#link1">London</a>
<a href="#link2">Paris</a>
<a href="#link3">Tokyo</a>
</div>

<div class="w3-tab">
<div id="link1" class="w3-container">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

<div class="w3-row">
<div class="w3-container w3-half">
<h2>w3-half</h2>
<p>This is a paragraph</p>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
<p>This is a paragraph</p>
</div>
</div>
</div>
<div id="link2" class="w3-container">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
</div>
<div id="link3" class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>

</html>

关于html - w3-tab 内的 div 容器(作为页面制表符导航)W3 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34842577/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com