摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航条-浮动</title><style>*{margin:0px;padding:0px;}div.header{background:#ccc;height:64px;}div.c
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条-浮动</title>
<style>
*{margin:0px;padding:0px;}
div.header{background:#ccc;height:64px;}
div.content{width:1000px;margin:0px auto;}
div.content ul>li{list-style: none;float:left;width:100px;height:64px;}
div.content ul>li>a{text-decoration: none;color:white;display: block;height:64px;border-left: 1px solid orange;line-height: 64px;text-align: center;font-weight:bolder;font-size:20px;}
div.header>div.content>div.logo{float:left;}
div.header>div.content>div.nav{float:right;}
ul>li>a:hover{background:orange;}
</style>
</head>
<body>
<div>
<div>
<div>
<a href="#"><img src="../image/favicon.ico" alt="logo"></a>
</div>
<div>
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
批改老师:灭绝师太批改时间:2019-01-10 16:46:46
老师总结:下次作业最好附上作业完成图片,因为图片都是你本地的,老师看不到你的完成效果,布局代码还可以简化