导航案例nav-html

原创 2019-01-10 16:32:12 252
摘要:<!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
老师总结:下次作业最好附上作业完成图片,因为图片都是你本地的,老师看不到你的完成效果,布局代码还可以简化

发布手记

热门词条