<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */ a { text-decoration: none; width: 100px; height: 50px; background-color: red; display: inline-block; color: #fff; text-align: center; line-height: 50px; } a:hover { background-color: orange; } </style> </head> <body> <!-- a*5 --> <!-- 选多行加内容删除 alt + shift + 鼠标左键单击 --> <a href="#">导航1</a> <a href="#">导航2</a> <a href="#">导航3</a> <a href="#">导航4</a> <a href="#">导航5</a> </body> </html>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)