帮我写一份公司首页的html作业,包含css样式代码
时间: 2024-01-27 07:03:05 浏览: 86
好的,以下是一个简单的公司首页的 HTML 页面,包括 CSS 样式代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ABC 公司</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
nav a {
display: inline-block;
padding: 10px 20px;
color: #333;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
margin-right: 10px;
}
nav a:hover {
background-color: #333;
color: #fff;
}
section {
padding: 50px;
text-align: center;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
p {
line-height: 1.5;
margin-bottom: 20px;
text-align: justify;
}
.feature {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.feature-item {
flex: 1;
padding: 10px;
text-align: center;
}
.feature-item img {
max-width: 100%;
height: auto;
}
.cta {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
margin-top: 50px;
}
.cta a {
display: inline-block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
margin-right: 10px;
background-color: #f1c40f;
}
.cta a:hover {
background-color: #fff;
color: #333;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>ABC 公司</h1>
<p>我们提供高质量的产品和服务,让您的生活更加便捷和舒适。</p>
</header>
<nav>
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">服务</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
<section>
<h2>我们的产品</h2>
<p>我们提供各种高质量的产品,包括电子产品、家居用品、运动健身器材等。</p>
<div class="feature">
<div class="feature-item">
<img src="product-1.jpg" alt="产品 1">
<h3>产品 1</h3>
<p>这是产品 1 的简要介绍。</p>
</div>
<div class="feature-item">
<img src="product-2.jpg" alt="产品 2">
<h3>产品 2</h3>
<p>这是产品 2 的简要介绍。</p>
</div>
<div class="feature-item">
<img src="product-3.jpg" alt="产品 3">
<h3>产品 3</h3>
<p>这是产品 3 的简要介绍。</p>
</div>
</div>
</section>
<section>
<h2>我们的服务</h2>
<p>我们提供各种高质量的服务,包括售后服务、技术支持、配件更换等。</p>
<div class="feature">
<div class="feature-item">
<img src="service-1.jpg" alt="服务 1">
<h3>服务 1</h3>
<p>这是服务 1 的简要介绍。</p>
</div>
<div class="feature-item">
<img src="service-2.jpg" alt="服务 2">
<h3>服务 2</h3>
<p>这是服务 2 的简要介绍。</p>
</div>
<div class="feature-item">
<img src="service-3.jpg" alt="服务 3">
<h3>服务 3</h3>
<p>这是服务 3 的简要介绍。</p>
</div>
</div>
</section>
<div class="cta">
<p>想了解更多信息?立即联系我们!</p>
<a href="#">联系我们</a>
</div>
<footer>
<p>版权所有 © ABC 公司</p>
</footer>
</body>
</html>
```
这个 HTML 页面包括一个标题、一个导航栏、两个区块、一个呼吸按钮和一个页脚,并包含了 CSS 样式部分。在 CSS 样式部分中,我们定义了页面的背景颜色、字体、字号和颜色,还去掉了页面的边距和内边距。我们定义了页眉和导航栏的样式,包括背景颜色、文本颜色、内边距和文本对齐。我们还定义了导航栏链接的样式,包括内边距、颜色、字体加粗、圆角和右边距。我们定义了区块的样式,包括内边距、文本对齐和下边距,还定义了特征项目的样式,包括弹性布局、内边距和文本对齐,以及特征项目图像的最大宽度和高度自适应。我们定义了呼吸按钮的样式,包括背景颜色、文本颜色、内边距、圆角和悬停样式。最后,我们定义了页脚的样式,包括背景颜色、文本颜色、内边距和文本对齐。
阅读全文