代码:
<!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; } .nav { margin: 0 auto; width: 640px; height: 50px; background-color: #ffc0cb; } ul { list-style: none; } .nav li { float: left; } .nav li a { display: block; width: 80px; height: 50px; color: white; /* 谷歌浏览器默认字号16px,不用再加 */ font-size: 16px; line-height: 50px; text-align: center; text-decoration: none; } .nav li a:hover { background-color: #008000; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">新闻1</a></li> <li><a href="#">新闻2</a></li> <li><a href="#">新闻3</a></li> <li><a href="#">新闻4</a></li> <li><a href="#">新闻5</a></li> <li><a href="#">新闻6</a></li> <li><a href="#">新闻7</a></li> <li><a href="#">新闻8</a></li> </ul> </div> </body> </html>
效果图:
CSS3-浮动综合案例-网页导航栏
最新推荐文章于 2024-10-15 16:13:44 发布
该代码段展示了一个使用HTML和CSS构建的简单导航栏,具有响应式设计。导航栏包含8个链接,每个链接在鼠标悬停时颜色会变为绿色。页面布局采用居中对齐,背景色为浅粉色。CSS用于设置无边距、盒模型、文字对齐和悬停效果。
摘要由CSDN通过智能技术生成