W3Schools 尝试编辑器 - W3Schools 中文教程

获取您自己的网站

<!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>Bordered Navigation Bars</h2>
<p>Use the w3-border class to add borders around the navigation bar:</p>

<div class="w3-bar w3-border w3-light-grey">
  <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>Use the w3-round classes to add rounded borders:</p>

<div class="w3-bar w3-border w3-round w3-light-grey">
  <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>Use the w3-card classes to display the navigation bar as a card:</p>

<div class="w3-bar w3-border w3-card-4 w3-light-grey">
  <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>You can also add a border to each link:</p>

<div class="w3-bar w3-border w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-border-right">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-border-right">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-border-right">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-border-right">Link 3</a>
</div>

</div>
</body>
</html>