HTML设计网页之网页头部

编程知识行业动态更新时间:2024-06-13 00:17:52

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>