用jsp技术写一个企业首页
时间: 2023-12-29 12:55:06 浏览: 28
首先,需要创建一个名为index.jsp的文件,代码如下:
```html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>企业首页</title>
</head>
<body>
<header>
<!-- 导航栏 -->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品与服务</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<!-- 轮播图 -->
<div id="carousel" class="carousel">
<img src="images/slider1.jpg" alt="slider1">
<img src="images/slider2.jpg" alt="slider2">
<img src="images/slider3.jpg" alt="slider3">
</div>
<!-- 产品展示 -->
<section>
<h2>产品展示</h2>
<ul>
<li>
<img src="images/product1.jpg" alt="product1">
<h3>产品1</h3>
<p>产品1介绍</p>
</li>
<li>
<img src="images/product2.jpg" alt="product2">
<h3>产品2</h3>
<p>产品2介绍</p>
</li>
<li>
<img src="images/product3.jpg" alt="product3">
<h3>产品3</h3>
<p>产品3介绍</p>
</li>
</ul>
</section>
<!-- 公司简介 -->
<section>
<h2>公司简介</h2>
<p>公司简介内容</p>
</section>
<!-- 联系我们 -->
<section>
<h2>联系我们</h2>
<p>联系我们内容</p>
</section>
</main>
<footer>
<p>© 2021 企业名称</p>
</footer>
</body>
</html>
```
接下来,需要创建一个名为style.css的样式文件,代码如下:
```css
/* 导航栏样式 */
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ccc;
padding: 10px;
}
nav ul li a {
text-decoration: none;
color: black;
font-size: 18px;
}
/* 轮播图样式 */
.carousel {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.carousel img:first-child {
opacity: 1;
}
```
最后,需要创建一个名为images的文件夹,并将轮播图和产品展示的图片放入其中。
完成以上步骤后,在浏览器中打开index.jsp文件,即可看到企业首页的效果。