用HTML+css写一个基本的企业网导航页
时间: 2024-05-24 17:12:43 浏览: 65
<!DOCTYPE html>
<html>
<head>
<title>企业网导航页</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: #ffffff;
padding: 20px;
text-align: center;
}
.logo {
font-size: 30px;
font-weight: bold;
color: #333333;
text-decoration: none;
}
.navbar {
background-color: #333333;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar a {
color: #ffffff;
text-decoration: none;
padding: 10px;
border-radius: 5px;
}
.navbar a:hover {
background-color: #ffffff;
color: #333333;
}
.content {
background-color: #ffffff;
padding: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.card {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #999999;
text-align: center;
}
.card h3 {
font-size: 20px;
margin-bottom: 10px;
}
.card p {
font-size: 16px;
margin-bottom: 20px;
}
.card a {
background-color: #333333;
color: #ffffff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
.card a:hover {
background-color: #ffffff;
color: #333333;
}
.footer {
background-color: #333333;
color: #ffffff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<a href="#" class="logo">企业网导航页</a>
</header>
<nav class="navbar">
<a href="#">首页</a>
<a href="#">公司简介</a>
<a href="#">产品中心</a>
<a href="#">新闻中心</a>
<a href="#">联系我们</a>
</nav>
<main class="content">
<div class="card">
<h3>公司简介</h3>
<p>我们是一家致力于提供优质产品和服务的企业。</p>
<a href="#">了解更多</a>
</div>
<div class="card">
<h3>产品中心</h3>
<p>我们提供各种高品质的产品,满足客户的需求。</p>
<a href="#">了解更多</a>
</div>
<div class="card">
<h3>新闻中心</h3>
<p>我们关注行业动态,为客户提供最新的资讯。</p>
<a href="#">了解更多</a>
</div>
</main>
<footer class="footer">
<p>版权所有 © 2021 企业网导航页</p>
</footer>
</div>
</body>
</html>
阅读全文