2024/3/28
所花时间：2小时
代码行：140行
博客量：1篇
了解到的知识点：进行了css的学习，可以用导航栏并且切换页面
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<html>--%>
<%--<head>--%>
<%-- <meta charset="utf-8" />--%>
<%-- <link rel="stylesheet" type="text/css" href="share.css">--%>
<%-- <title>用户操作</title>--%>
<%-- <meta name="renderer" content="webkit" />--%>
<%-- <meta http-equiv="X-UA-Compatible" content="IE=edge">--%>
<%-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">--%>
<%-- <style>--%>
<%-- *{margin:0;padding:0;font-family: "微软雅黑";box-sizing: border-box;}--%>
<%-- body{min-height:100vh;padding:140px 0;}--%>
<%-- .main{max-width:1500px;width:1500px;margin:0 auto;display: flex;justify-content: center;align-items: center;}--%>
<%-- .item{flex:1;width:1100px;height:1400px;border-radius:0px;position:relative;padding:100px 100px;}--%>
<%-- .item img{height:160px;width:160px;padding:20px;border:2px solid rgba(255,255,255,0.5);border-radius:15px;display:block;margin:0 auto;}--%>
<%-- .item h3{color: black;text-align: center;font-size:26px;line-height:50px;margin-top:20px;}--%>
<%-- .item p{color: #00f7ff;line-height:20px;font-size:20px;margin-top:10px;}--%>
<%-- .item .btns{display:flex;flex-direction: inherit;align-items: center;justify-content: center;margin-top:80px;}--%>
<%-- .item a{text-decoration:none;display:block;width:850px;line-height:40px;text-align:center;border-radius:40px;background:#FFF;font-size:30px;font-weight:bold;cursor: pointer;}--%>
<%-- .item a:hover{opacity: 0.8;}--%>
<%-- .item label1{--%>
<%-- display: inline-block;--%>
<%-- padding-left: 50px;--%>
<%-- padding-right:24px;--%>
<%-- vertical-align: middle;--%>
<%-- }--%>
<%-- .item label2{--%>
<%-- display: inline-block;--%>
<%-- padding-left: 50px;--%>
<%-- padding-right:40px;--%>
<%-- vertical-align: middle;--%>
<%-- }--%>
<%-- .item input {--%>
<%-- border-radius: 4px; /* 添加圆角边框 */--%>
<%-- /* 自定义背景色 */--%>
<%-- color: #f60909; /* 自定义文字颜色 */--%>
<%-- box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); /* 添加阴影效果 */--%>
<%-- width: 190px;--%>
<%-- padding: 7px;--%>
<%-- }--%>
<%-- @media screen and (max-width: 730px) {--%>
<%-- body{--%>
<%-- padding:20px;--%>
<%-- }--%>
<%-- .main {--%>
<%-- display:block;--%>
<%-- }--%>
<%-- .item{--%>
<%-- width:100%;--%>
<%-- margin:0!important;--%>
<%-- margin-bottom:20px!important;--%>
<%-- transform: scale(1)!important;--%>
<%-- }--%>
<%-- }--%>
<%-- ul li a:hover{--%>
<%-- --%>
<%-- color: #000;--%>
<%-- }--%>
<%-- </style>--%>
<%--</head>--%>
<%--<body>--%>
<%--<div class="main">--%>
<%-- <div class="top">--%>
<%-- <h1 style="color: #020202">个人网页</h1>--%>
<%-- <br>--%>
<%-- <div id="divhead">--%>
<%-- <ul class="topnav">--%>
<%-- <li><a href="#div1">   个人资料   </a></li>--%>
<%-- <li><a href="#div2">   获奖记录   </a></li>--%>
<%-- </ul>--%>
<%-- </div>--%>
<%-- </div>--%>
<%--</div>--%>
<%--</div>--%>
<%--<section>--%>
<%-- <div class="box">--%>
<%-- <div id="div1" class="content">--%>
<%-- <%@ include file="file01.jsp" %>--%>
<%-- </div>--%>
<%-- <div id="div2" class="content">--%>
<%-- <%@ include file="file02.jsp" %>--%>
<%-- </div>--%>
<%-- </div>--%>
<%--</section>--%>
<%--</body>--%>
<%--</html>--%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<a href="#" onclick="openPage('home')">Home</a>
<a href="#" onclick="openPage('about')">About</a>
<a href="#" onclick="openPage('contact')">Contact</a>
</div>
<div id="home" class="page">
<label>
<input type="text">
</label>
<h1>Home Page</h1>
<p>Welcome to the Home Page</p>
</div>
<div id="about" class="page">
<h1>About Page</h1>
<p>Learn more about us</p>
</div>
<div id="contact" class="page">
<h1>Contact Page</h1>
<p>Contact us here</p>
</div>
<script>
function openPage(pageName) {
var i, pages;
pages = document.getElementsByClassName("page");
for (i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
document.getElementById(pageName).style.display = "block";
}
</script>
</body>
</html>
