摘要:本文主要向大家介绍了WEB前端的div css 导航,希望对大家学习WEB前端有所帮助。
本文主要向大家介绍了WEB前端的div css 导航,希望对大家学习WEB前端有所帮助。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航条</title> <style type="text/css"> /* * 清除默认样式 */ *{ margin:0; padding:0; } /* * 设置ul */ .nav{ /*去除项目符号*/ list-style: none; /*为ul设置一个背景颜色*/ background-color: #6495ED; /*设置一个宽度*/ /* * 在IE6中,如果为元素指定了一个宽度,则会默认开启hasLayout */ width: 1000px; /*设置元素居中*/ margin: 50px auto; /*解决高度塌陷*/ overflow: hidden; } /** * 设置li */ .nav li{ /*设置li向左浮动*/ float: left; width: 12.5%; } .nav a{ /*将a转换为块元素*/ display: block; /*为a指定一个宽度*/ width: 100%; /*设置文字居中*/ text-align: center; /*设置一个上下内边距*/ padding: 5px 0; /*去除下划线*/ text-decoration: none; /*设置字体颜色*/ color: white; /*设置加粗*/ font-weight: bold; } /* * 设置a的鼠标移入的效果 */ .nav a:hover{ background-color: #c00; } </style> </head> <body> <!-- 创建导航条的结构 --> <ul class="nav"> <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>
希望这篇文章可以帮助到你,总之同学们,it资讯尽在职坐标。
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号