写一个企业级别的页面,用html,CSS,JS来写
时间: 2023-06-25 13:03:03 浏览: 160
html+css+js做的企业官网
5星 · 资源好评率100%
很高兴为您提供企业级别的页面设计方案。下面是一个简单的示例页面,它使用HTML、CSS和JS来创建一个响应式布局。
HTML部分:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enterprise Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>Enterprise Website</h1>
<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>
</div>
</header>
<section class="hero">
<div class="container">
<h2>Welcome to our website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ante eget ligula euismod mattis.</p>
<a href="#" class="btn">Learn More</a>
</div>
</section>
<section class="services">
<div class="container">
<h2>Our Services</h2>
<div class="service-box">
<img src="img/service-1.jpg" alt="Service 1">
<h3>Service 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ante eget ligula euismod mattis.</p>
<a href="#" class="btn">Learn More</a>
</div>
<div class="service-box">
<img src="img/service-2.jpg" alt="Service 2">
<h3>Service 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ante eget ligula euismod mattis.</p>
<a href="#" class="btn">Learn More</a>
</div>
<div class="service-box">
<img src="img/service-3.jpg" alt="Service 3">
<h3>Service 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ante eget ligula euismod mattis.</p>
<a href="#" class="btn">Learn More</a>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h2>Testimonials</h2>
<div class="testimonial-box">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ante eget ligula euismod mattis."</p>
<h3>John Doe</h3>
</div>
<div class="testimonial-box">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ante eget ligula euismod mattis."</p>
<h3>Jane Doe</h3>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© 2021 Enterprise Website</p>
</div>
</footer>
</body>
</html>
```
CSS部分:
```css
/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
background-color: #f4f4f4;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header Styles */
header {
background-color: #333;
color: #fff;
padding: 10px 0;
}
header h1 {
float: left;
}
nav {
float: right;
margin-top: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
color: #ccc;
}
/* Hero Section Styles */
.hero {
background-image: url('../img/hero.jpg');
height: 500px;
background-size: cover;
background-position: center;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.hero h2 {
color: #fff;
font-size: 50px;
margin-bottom: 20px;
}
.hero p {
font-size: 24px;
color: #fff;
margin-bottom: 40px;
}
.btn {
display: inline-block;
background-color: #333;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
.btn:hover {
background-color: #fff;
color: #333;
}
/* Services Section Styles */
.services {
padding: 100px 0;
}
.services h2 {
text-align: center;
margin-bottom: 50px;
}
.service-box {
max-width: 300px;
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
}
.service-box img {
max-width: 100%;
border-radius: 5px;
}
.service-box h3 {
margin-top: 20px;
margin-bottom: 10px;
}
.service-box p {
margin-bottom: 20px;
}
/* Testimonials Section Styles */
.testimonials {
background-color: #333;
color: #fff;
padding: 100px 0;
}
.testimonials h2 {
text-align: center;
margin-bottom: 50px;
}
.testimonial-box {
max-width: 600px;
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
}
.testimonial-box p {
font-size: 24px;
margin-bottom: 20px;
}
.testimonial-box h3 {
margin-top: 20px;
margin-bottom: 10px;
}
/* Footer Styles */
footer {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
footer p {
font-size: 16px;
}
```
JS部分:
```js
// Add Smooth Scrolling
$('.btn').on('click', function(e) {
if(this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
```
以上是一个简单的企业级别的页面设计方案,您可以根据需要进行修改、扩展和优化。
阅读全文