在JSP頁面中,我們可以通過CSS來美化頁面的樣式,使得頁面更加美觀和易于使用。以下是如何設置JSP頁面的CSS:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <style> body { background-color: #f2f2f2; } h1 { color: red; } p { color: blue; font-family: "Times New Roman"; } a { color: green; text-decoration: none; } .button { background-color: white; color: black; border: 2px solid #4CAF50; } input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } </style> </head> <body> <h1>Hello World!</h1> <p>This is a JSP page with CSS style.</p> <a href="#">Link</a> <br> <br> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <input type="submit" value="Submit"> </form> </body> </html>
在上面的例子中,我們設置了整個頁面的背景顏色為#f2f2f2,h1標簽的顏色為紅色,p標簽的顏色為藍色,字體為"Times New Roman",并且為鏈接去掉了下劃線。此外,我們還設置了一個class名為"button"的按鈕樣式,以及一個文本輸入框和下拉框的樣式。