用Eclipse中jsp写一个点餐页面 并用一个css装饰
时间: 2024-05-04 20:22:26 浏览: 174
基于Spring Boot和微信小程序开发的点餐系统,java项目 eclipse和idea都能打开运行 推荐环境配置:ec
首先,你需要创建一个动态Web项目,然后在Eclipse中创建一个JSP文件。
接下来,我们可以使用HTML和CSS来装饰我们的点餐页面。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>点餐页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到餐厅</h1>
</header>
<main>
<form action="order.jsp" method="post">
<fieldset>
<legend>请选择您需要的食物</legend>
<label><input type="checkbox" name="food" value="burger">汉堡</label>
<label><input type="checkbox" name="food" value="pizza">披萨</label>
<label><input type="checkbox" name="food" value="fried_chicken">炸鸡</label>
</fieldset>
<fieldset>
<legend>请选择您需要的饮料</legend>
<label><input type="radio" name="drink" value="cola">可乐</label>
<label><input type="radio" name="drink" value="juice">果汁</label>
<label><input type="radio" name="drink" value="water">水</label>
</fieldset>
<button type="submit">提交订单</button>
</form>
</main>
<footer>
<p>版权所有 © 2021 餐厅</p>
</footer>
</body>
</html>
```
在这个例子中,我们使用了HTML5的语法来创建一个基本的点餐页面。我们使用了`<header>`、`<main>`和`<footer>`标签来分别定义页面的头部、主体和尾部。我们还使用了表单元素`<form>`来让用户选择他们的食物和饮料,以及一个提交按钮`<button>`。
我们还使用了一个外部CSS文件`style.css`来装饰我们的页面。下面是一个示例代码:
```css
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
main {
margin: 20px;
}
fieldset {
margin-bottom: 20px;
}
legend {
font-weight: bold;
}
label {
display: block;
margin-bottom: 10px;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
```
在CSS中,我们设置了页面背景颜色、字体、边距和一些其他样式。我们还为标签`<header>`、`<fieldset>`、`<legend>`、`<label>`和`<button>`添加了样式,以使页面更加美观。
最后,我们需要在我们的JSP文件中引用这个CSS文件。我们可以使用以下代码在JSP文件的头部中引用它:
```html
<link rel="stylesheet" type="text/css" href="style.css">
```
完成以上步骤后,运行项目,即可看到一个简单的点餐页面了。
阅读全文