jsp+css展示界面
时间: 2023-06-25 07:04:03 浏览: 119
首先,你需要在 JSP 页面中引入 CSS 样式表文件。可以使用 `<link>` 标签来实现:
```html
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
```
其中,`href` 属性的值为 CSS 样式表文件的路径。
接下来,你可以在 JSP 页面中添加 HTML 元素,并使用 CSS 样式来美化它们。例如,你可以创建一个简单的导航栏:
```html
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
```
然后,在样式表文件中定义导航栏的样式:
```css
nav {
background-color: #333;
color: #fff;
height: 50px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 15px;
}
```
这段 CSS 代码将导航栏的背景色设置为深灰色,文字颜色设置为白色,并设置导航栏的高度为 50 像素。此外,它还将列表的样式设置为无,将列表项的显示方式设置为内联块,将列表项之间的间距设置为 20 像素,将链接的文字颜色设置为白色,并设置链接的内边距为 15 像素。
最后,你可以在 JSP 页面中使用样式表文件中定义的样式来美化页面中的其他元素。例如:
```html
<div class="container">
<h1>Welcome to my website!</h1>
<p>Here you can find all sorts of interesting things.</p>
<img src="image.png" alt="An image">
</div>
```
```css
.container {
margin: auto;
width: 80%;
text-align: center;
}
h1 {
font-size: 3em;
}
p {
font-size: 1.2em;
}
img {
max-width: 100%;
height: auto;
}
```
这段 CSS 代码将容器的样式设置为将其水平居中并占据页面宽度的 80%,将容器中的文本居中对齐,并将标题和段落的字体大小设置为 3em 和 1.2em。此外,它还将图片的最大宽度设置为容器的宽度,并将图片的高度设置为自动计算。
阅读全文