代码:
<!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> /* 清除标签默认内外边距 */ * { margin: 0; padding: 0; /* 盒子自动内减 */ box-sizing: border-box; } .box { height: 44px; border-top: 3px solid #ff8500; border-bottom: 1px dashed #edeef0; } .box a { padding: 0 16px; /* width: 90px; */ height: 40px; background-color: #ffffff; display: inline-block; text-align: center; color: #4c4c4c; line-height: 40px; 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> </body> </html>
效果图;
CSS3-综合案例-新浪导航
最新推荐文章于 2024-10-15 16:13:44 发布
该文章展示了一段HTML代码,用于创建一个带有特定样式的导航条。导航条包含多个内联块元素(a标签),每个元素具有设定的宽度、高度、颜色、边框和悬停效果。CSS用于控制元素的布局和视觉样式,包括清除默认边距、设置盒模型、以及定义hover状态下的背景色和文字颜色变化。
摘要由CSDN通过智能技术生成