<!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> .box { height: 40px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; } /* 后代: box里面的a */ .box a { padding: 0 16px; /* width: 80px; */ height: 40px; /* 推荐先加上: 清楚的看到文字在什么位置 */ /* background-color: #edeef0; */ display: inline-block; text-align: center; line-height: 40px; font-size: 12px; color: #4c4c4c; text-decoration: none; } .box a:hover { background-color: #edeef0; color: #ff8400; } </style> <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 --> </head> <body> <div class="box"> <a href="#">新浪</a> <a href="#">新浪导航新浪导航</a> <a href="#">新浪导航</a> <a href="#">新浪导航</a> </div> <p> <a href="#"></a> </p> </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)