<!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 { width: 80px; height: 50px; background-color: red; color: white; /* a是行内显示 设置宽高无效 */ /* 转换成行内块元素 */ display: inline-block; /* 文本水平居中 */ text-align: center; /* 文本垂直居中 */ line-height: 50px; /* 文字文本修饰 */ text-decoration: none; } a:hover { background-color: orange; } </style> </head> <body> <a href="#">导航1</a> <a href="#">导航2</a> <a href="#">导航3</a> <a href="#">导航4</a> <a href="#">导航5</a> </body> </html>
效果图:
CSS3-综合案例-导航1
最新推荐文章于 2024-08-05 22:35:13 发布