完全用div+css做的菜单,相比传统用图片做的打开速度更快。预览最终效果>>
#nav{ height: 44px; width: 425px; background: #FFFFFF;}.vline{ background: #999999; width: 1px; height: 20px;}#nav ul{ margin: 0px; padding: 0px; list-style-type: none;}#nav li{ float: left; font-family: Arial; font-weight: bold; font-size: 12px; text-align: center;}#nav li a{ display: block; width: 84px; line-height: 28px; color: #666666; text-decoration: none; border-top: 4px solid #0F35A5;}#nav li a:hover{ color: #7C8DD9; border-top: 4px solid #7C8DD9;}<div id="nav"><ul><li><a href="#">产品介绍</a></li><li class="vline"></li><li><a href="#">服务支持</a></li><li class="vline"></li><li><a href="#">联系我们</a></li><li class="vline"></li><li><a href="#">新闻中心</a></li><li class="vline"></li><li><a href="#">公司简介</a></li><li class="vline"></li></ul></div>
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号