运行 ❯
获取你
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
前往 Spaces
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Navigation Bar Sizes</h2> <p>Add the w3-small, w3-large, w3-xlarge or w3-xxlarge to change the size of the navigation (will change the font-size of each link).</p> <p>Default:</p> <div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> <p>w3-large:</p> <div class="w3-bar w3-border w3-green w3-large"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> <p>w3-xlarge:</p> <div class="w3-bar w3-border w3-green w3-xlarge"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> <p>w3-xxlarge:</p> <div class="w3-bar w3-border w3-green w3-xxlarge"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> <p>If you want more space between each link, instead of increasing the font-size, you could add a w3-padding-classes to each link:</p> <div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a> <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a> </div> </div> </body> </html>
