效果图
其中导航效果要加入hover状态
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="logo">
<img src="img/logo.png" alt="">
<div class="tell">
TEL:18888888888
</div>
</div>
<div class="clears"></div>
<nav class="pageNav">
<ul>
<li><a href="#" target="_blank"><span>首页</span></a></li>
<li><a href="#" target="_blank"><span>公司介绍</span></a></li>
<li><a href="#" target="_blank"><span>产品信息</span></a></li>
<li><a href="#" target="_blank"><span>联系我们</span></a></li>
<li><a href="#" target="_blank"><span>合作加盟</span></a></li>
<li><a href="#" target="_blank"><span>资料下载</span></a></li>
</ul>
</nav>
</body>
</html>
css代码部分
.pageNav{
width: 100% ;
min-width: 1920px;
height: 70px;
background: #116caa;
}
.pageNav>ul{
width: 1200px;
height: 70px;
}
.pageNav>ul>li{
float: left;
font-size:18px;
line-height: 70px;
width: 103px;
text-align: center;
}
.pageNav>ul>li>a{
color: #fff;
display: block;
transition: all 0.5s;
}
.pageNav>ul>li>a:hover{
width: 103px;
height: 70px;
background: #f15725;
}
.logo{
width: 1200px;
height: 107px;
}
.tell{
width: 300px;
height: 107px;
font-size: 30px;
color: #116caa;
float: right;
line-height: 107px;
}
.logo>img{
float: left;
}
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
