html只设置导航条背景HTMLCSS制造导航条

导航按钮效果图

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>一级导航</title><style>/css样式可以在style里面写/body {margin: 0;/外边距:分别左,上,右,下都为0,这样就不会涌现旁边高下间距/padding: 0;/内边距:分别左,上,右,下都为0,这样就不会涌现旁边高下内间距/}/第一个div样式/#menu {width: 100%;/宽度:100%表示浏览器默认宽度/height: 45px;/高度/background-color:#FF0033;/背景颜色:赤色/}/第二个div样式/#menu-title {width: 1000px;height: 45px;margin-left: auto;/margin-left: auto;margin-right: auto;可以把div自动居中/margin-right: auto;}/第二个div里面无需列表样式/#menu-title ul {/ul是无序列表/margin: 0px;padding: 0px;list-style: none;/列表样式:无/}/第二个div里面无需列表li样式/#menu-title ul li {width: 142.8px;height: 45px;float: left; /多个li往左浮动/line-height: 45px;/行高/text-align: center;/文本对齐:居中/}/第二个div里面无需列表li里的a：超链接样式/#menu-title ul li a {color: white; /颜色:白/text-decoration: none;/文本下划线:无/}/第二个div里面无需列表li里的a：超链接鼠标经由样式/#menu-title ul li:hover {background-color: #333333;}</style></head><body><div id="menu"><div id="menu-title"><ul><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><li><a href="#">会员登录</a></li></ul></div></div></body></html>

以上HTML+CSS代码复制可用。