当前位置 博文首页 > m0_53521757的博客：HTML设计网页之网页头部
HTML设计网页之网页头部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小逯工作室有限科技公司</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/cls.css"/>
<style type="text/css">
#container{
width: 960px;
margin: 0 auto;
}
.nav{
margin: 5px;
}
.top{
height: 100px;
background-color: #2A2A9A;
}
.top_left{
float: left;
}
.top_left img{
width: 80px;
height: 80px;
margin: 10px;
display: inline-block;
}
.top_name{
float: left;
line-height: 100px;
color: white;
font-size: 25px;
font-family: "宋体";
}
.top_right{
float: right;
color: white;
line-height: 100px;
margin-right: 40px;
font-weight: bold;
font-size: 18px;
}
.nav ul{
font-size: 16px;
display: flex;
margin-left: 90px;
margin-right: 90px;
justify-content: space-around;
}
.nav li:hover{
color:orange;
border-bottom: 2px solid orange;
}
</style>
</head>
<body>
<div id="container">
<header class="top">
<div class="top_left"><img src="img/logo.png" ></div>
<div class="top_name">小逯工作室有限科技公司</div>
<div class="top_right">汤经理 0531-10086-10010</div>
</header>
<div class="nav">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>新闻资讯</li>
<li>产品介绍</li>
<li>解决方案</li>
<li>新品推送</li>
<li>资料下载</li>
<li>加盟合作</li>
<li>联系我们</li>
</ul>
</div>
<hr style="margin: 5px;">
<div class="content"> </div>
<footer class="bottom"></div>
</div>
</body>
</html>
页面效果
