<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/* 清除浏览器默认样式和li的默认样式 */
* {
list-style: none;
padding: 0;
margin: 0;
}
/* logo样式整体 */
.logo {
width: 100%;
display: flex;
justify-content: space-around;
}
/* logo中第非偶数（2n-1）个div样式 */
.logo div:nth-child(2n-1) {
width: 400px;
height: 100px;
background-color: red;
}
/* logo中第偶数（2n）个div样式 */
.logo div:nth-child(2n) {
width: 400px;
height: 100px;
text-align: center;
font-size: 30px;
color: #ccc;
line-height: 100px;
}
/*
img {
width:350px;
float:left;
margin-left:200px;
}
*/
/* 导航整体板块 */
.nav {
margin-left: 0;
width: 100%;
height: 50px;
background-color: blue;
color: white;
}
/* 整体字体板块左边距 */
.nav ul {
margin-left: 15%;
}
/* 字体样式 */
.nav li {
float: left;
line-height: 50px;
width: 130px;
height: 50px;
padding: 0 25px;
box-sizing: border-box;
text-align: center;
}
/* 鼠标滑入背景和字体变色，滑出还原色 */
.nav li:hover {
color: red;
background-color: rgb(0, 0, 205);
}
</style>
<body>
<!-- logo -->
<div class="logo">
<div></div>
<!-- ./ 当前目录下的 ../ 上个目录 ../../ 上个上个目录， 前面是相对地址。看想引入的地址 -->
<!-- <img src="../logo.png" alt=""> -->
<div>TEL:18888888</div>
</div>
<div class="nav">
<ul>
<li>首页</li>
<li>公司简介</li>
<li>产品信息</li>
<li>联系我们</li>
<li>合作加盟</li>
<li>资料下载</li>
</ul>
</div>
</body>
</html>
