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