<!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>
