学完了网页布局，今天开始进行实践，学习了其中的导航菜单制作，自己按照老师教的方法，做了慕课网上的水平导航：
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
#box{ background-color:#000000;height:55px}
img{float:left;height:55px;}
ul{ list-style:none;}
a{color:#666666;text-decoration:none;font-size:18px; font-family:"方正兰亭超细黑简体"}
.nav li{float:left;}
.nav li a{ display:block; text-align:center; height:55px; line-height:55px; width:100px;background-color:#000000; margin-bottom:1px;}
.nav li a:hover{ background-color:#585858; color:#FFFFFF}
</style>
</head>
<body>
<div id="box">
<img src="QQ图片20151125233811.png"/>
<ul class="nav">
<li><a href="#">课程</a></li>
<li><a href="#">计划</a></li>
<li><a href="#">分享</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
</body>
</html>
效果如图片所示
扫一扫
2753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
