本文介绍了如何使用HTML和CSS创建一个响应式导航栏，包括使用ul-li结构、设置样式（如字体、颜色、布局）、以及实现自适应设计。A_2.html和A_2.css文件提供了具体实现的代码示例。
接上index1.html
创建A_2.html前端网页文档，计如图2所示导航栏效果，主要要求如下：
- 采用ul-li结构设计导航栏，每个列表项为一个文本链接，链接文本入下图所示；
- 创建A_2.css外部样式文件并应用到html中；
- 在样式文件中设置默认字体大小为15px，链接文本居中显示，链接样式设置为无下划线、链接字体默认为蓝色、鼠标滑过时为黄色、鼠标按下时为红色、已访问过为灰色；
- 设置ul宽度为窗口宽度的92%，最小宽度为500px，居中显示，列表项宽度相同，左右外边距为1%，上下内边距4px，左右内边距8px，列表项宽度也能够随窗口宽度自适应变化。
- 图2 A_2.html页面效果图
代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>web前端导航栏设计</title> <style> .list{ text-align: center; display: flex; justify-content: space-around; width: 92%; min-width: 500px; } .list li{ width: 130px; background: #976576; border: solid #000 2px; border-radius: 10px; display:inline-block; text-align: center; margin-top: 40px; align-content: center; } .list li a{ text-decoration: none; } </style> </head> <body> <ul class="list" type='none'> <li><a href="">西华</a></li> <li><a href="">新浪</a></li> <li><a href="">腾讯</a></li> <li><a href="">百度</a></li> <li><a href="">网易</a></li> <li><a href="">淘宝</a></li> </ul> </body> </html>
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
