w3css 在线编辑器 | w3css代码测试

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.cainiaomax.com/w3css/4/w3.css">
<body>
<div class="w3-container">

<h2>带边框的导航栏</h2>
<p>使用 w3-border 类在导航栏周围添加边框：</p>

<div class="w3-bar w3-border w3-light-grey">
  <a href="#" class="w3-bar-item w3-button">首页</a>
  <a href="#" class="w3-bar-item w3-button">链接 1</a>
  <a href="#" class="w3-bar-item w3-button">链接 2</a>
  <a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>

<p>使用 w3-round 类添加圆角边框：</p>

<div class="w3-bar w3-border w3-round w3-light-grey">
  <a href="#" class="w3-bar-item w3-button">首页</a>
  <a href="#" class="w3-bar-item w3-button">链接 1</a>
  <a href="#" class="w3-bar-item w3-button">链接 2</a>
  <a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>

<p>使用 w3-card 类将导航栏显示为卡片：</p>

<div class="w3-bar w3-border w3-card-4 w3-light-grey">
  <a href="#" class="w3-bar-item w3-button">首页</a>
  <a href="#" class="w3-bar-item w3-button">链接 1</a>
  <a href="#" class="w3-bar-item w3-button">链接 2</a>
  <a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>

<p>您还可以为每个链接添加边框：</p>

<div class="w3-bar w3-border w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-border-right">首页</a>
  <a href="#" class="w3-bar-item w3-button w3-border-right">链接 1</a>
  <a href="#" class="w3-bar-item w3-button w3-border-right">链接 2</a>
  <a href="#" class="w3-bar-item w3-button w3-border-right">链接 3</a>
</div>

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