免费小型公司首页html+css模板
时间: 2023-10-24 20:04:26 浏览: 163
一个小型的html网站模板
4星 · 用户满意度95%
以下是一个简单的免费小型公司首页HTML+CSS模板示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Company Name - Homepage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<h1>Company Name</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="banner">
<h2>Welcome to Company Name</h2>
<p>We provide the best services in the industry</p>
<a href="#" class="btn">Learn More</a>
</section>
<section class="services">
<h3>Our Services</h3>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
<section class="about">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum eget arcu eget bibendum. Nulla facilisi. Aenean euismod, ex eu ultrices lacinia, velit turpis iaculis.</p>
</section>
</main>
<footer>
<p>© 2021 Company Name. All Rights Reserved.</p>
</footer>
</body>
</html>
```
以下是示例CSS代码:
```css
/* General styles */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
color: #333;
text-decoration: none;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
}
/* Header styles */
header {
background-color: #eee;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo h1 {
margin: 0;
}
nav ul {
display: flex;
}
nav ul li {
margin-right: 20px;
}
/* Banner styles */
.banner {
background-image: url('banner.jpg');
background-size: cover;
background-position: center;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
}
.banner h2 {
font-size: 3rem;
margin: 0;
}
.banner p {
font-size: 1.5rem;
margin: 20px 0;
}
/* Services styles */
.services {
background-color: #f7f7f7;
padding: 50px;
text-align: center;
}
.services h3 {
margin-top: 0;
}
.services ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.services li {
margin: 20px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
border-radius: 5px;
}
/* About styles */
.about {
padding: 50px;
text-align: center;
}
.about h3 {
margin-top: 0;
}
```
你可以根据自己的需求进行修改和定制。
阅读全文