首页1. 下列是网页中左侧导航链接，请写出html结构和css代码。要求：（1）html结构中包含列表，超链接实现（2）默认背景颜色gray、字体颜色blue;字体大小20px;列表项底部

1. 下列是网页中左侧导航链接，请写出html结构和css代码。要求：（1）html结构中包含列表，超链接实现（2）默认背景颜色gray、字体颜色blue;字体大小20px;列表项底部

时间: 2024-12-21 10:27:29 浏览: 10

当然可以，以下是HTML结构和CSS代码的示例，用于创建一个简单的左侧导航链接： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* CSS样式 */ .nav-container { display: flex; list-style-type: none; background-color: gray; padding: 0; margin: 0; } .nav-list { width: 200px; height: auto; } .nav-item a { display: block; color: blue; text-decoration: none; padding: 8px 16px; font-size: 20px; } .nav-item a:hover { background-color: lightgray; } .nav-bottom-line { border-bottom: 1px solid #ccc; } </style> </head> <body> <div class="nav-container"> <ul class="nav-list"> <li class="nav-item"><a href="#">首页</a></li> <li class="nav-item"><a href="#">关于我们</a></li> <li class="nav-item"><a href="#">产品服务</a></li> <li class="nav-item"><a href="#">联系我们</a></li> </ul> <div class="nav-bottom-line"></div> </div> </body> </html> ``` 在这个例子中，我们使用了`<div>`元素作为容器(`.nav-container`)，内含一个无序列表`<ul>`(`.nav-list`)，每个列表项(`<li>`)对应一个超链接`<a>`。通过`.nav-item`和`:hover`伪类选择器，设置了默认和鼠标悬停时的样式。最后，`.nav-bottom-line`用于添加列表项底部的线，当`nav-bottom-line`元素的兄弟元素数目达到4个时，就会显示底部线条。

阅读全文