Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width,init-scale=1"> <link rel="stylesheet" href= "https://www.w3-container"> <h2>Thanh điều hướng có viền</h2> <p>Sử dụng w3- lớp viền để thêm đường viền xung quanh thanh điều hướng:</p> <div class="w3-bar w3-border w3-light-grey"> <a href="#" class="w3-bar-item w3-button ">Trang chủ</a> <a href="#" class="w3-bar-item w3-button">Liên kết 1</a> <a href="#" class="w3-bar-item w3- nút">Liên kết 2</a> <a href="#" class="w3-bar-item w3-button">Liên kết 3</a> </div> <p>Sử dụng các lớp w3-round để thêm viền tròn:</p> <div class="w3-bar w3-border w3-round w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Trang chủ< /a> <a href="#" class="w3-bar-item w3-button">Liên kết 1</a> <a href="#" class="w3-bar-item w3-button">Liên kết 2</a> <a href="#" class="w3-bar-item w3-button">Liên kết 3</a> </div> <p>Sử dụng các lớp w3-card để hiển thị thanh điều hướng như một thẻ:</p> <div class="w3-bar w3-border w3-card-4 w3-light-grey"> <a href="#" class="w3-bar-item w3-button"> Trang chủ</a> <a href="#" class="w3-bar-item w3-button">Liên kết 1</a> <a href="#" class="w3-bar-item w3-button" >Liên kết 2</a> <a href="#" class="w3-bar-item w3-button">Liên kết 3</a> </div> <p>Bạn cũng có thể thêm đường viền cho mỗi liên kết: </p> <div class="w3-bar w3-border w3-light-grey"> <a href="#" class="w3-bar-item w3-button w3-border-right">Trang chủ</p> a> <a href="#" class="w3-bar-item w3-button w3-border-right">Liên kết 1</a> <a href="#" class="w3-bar-item w3- nút w3-border-right">Liên kết 2</a> <a href="#" class="w3-bar-item w3-button w3-border-right">Liên kết 3</a> </div> < /div> </body> </html>