首页html写代码：设计一个网页要有导航栏有css特效的，把目录下的b.jpg作为背景图，页脚为：绿色包装公司-牛敬萱

html写代码：设计一个网页要有导航栏有css特效的，把目录下的b.jpg作为背景图，页脚为：绿色包装公司-牛敬萱

时间: 2024-03-25 15:39:31 浏览: 58

以下是一个简单的HTML示例代码，实现了一个带有导航栏和CSS特效的网页，使用了目录下的b.jpg作为背景图，页脚显示“绿色包装公司-牛敬萱”字样。 ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <style> /*导航栏样式*/ nav { background-color: #333; overflow: hidden; } nav a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } nav a:hover { background-color: #ddd; color: black; } /*背景图样式*/ body { background-image: url("b.jpg"); background-repeat: no-repeat; background-size: cover; } /*页脚样式*/ footer { background-color: #4CAF50; color: white; text-align: center; padding: 10px; position: absolute; bottom: 0; width: 100%; } </style> </head> <body>  <nav> <a href="#">首页</a> <a href="#">新闻</a> <a href="#">产品</a> <a href="#">联系我们</a> </nav>  <div> <h1>欢迎来到网站</h1> <p>这是一个演示用的网页</p> </div>  <footer> 绿色包装公司-牛敬萱 </footer> </body> </html> ``` 以上代码中，通过nav元素实现了一个带有导航栏的网页，使用了CSS样式设置了导航栏的颜色、文字样式和鼠标悬停样式。通过body元素设置了背景图的样式，使用了b.jpg作为背景图。通过footer元素设置了页脚的样式，使用了绿色背景和白色文字，同时设置了页脚的位置为页面底部。

阅读全文