JavaWeb：实验一JSP运行环境安装及配置

完整代码下载：https://www.123684.com/s/SaYRVv-5iRg3

** 制作一个静态网站的基本页面index.html，要求如下：
1．页面布局采用框架实现，页面布局及样式如图1所示。**

2．在页面的A部分显示显示“登录”和“注册”链接。单击“登录”链接，在C部分显示登录页面，登录页面包含一个HTML表单，页面参考样式如图2所示；单击“注册”链接，在C部分显示注册页面，注册页面也包含一个HTML表单，页面参考样式如图3所示。注册和登录页面可自行设计。

3．在页面的B部分显示一个链接，即网站作者的个人简介，单击该链接，能够在右边的C部分出现作者的个人简介信息。个人简介内容包括：个人基本信息（班级、学号、姓名等）、个人照片、个人简介信息等，请使用合理的HTML标签完成页面的设计。

index.html

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <title>实验一</title>
 
</head>
 
<frameset rows="30%,70%">
 
    <frame src="top.html" noresize="noresize" name="top">
 
        <frameset cols="25%,75%">
 
            <frame src="left.html" noresize="noresize" name="left">
 
                <frame src="main.html" noresize="noresize" name="main">
 
        </frameset>
 
</frameset>
 
</html>

top.html

<!DOCTYPE html>
 
<html lang="en">
 
 
 
<head>
 
    <meta charset="UTF-8">
 
    <title>top</title>
 
</head>
 
 
 
<body>
 
    <a href="login.html" target="main">登录</a>
 
    <a href="rigister.html" target="main">注册</a>
 
</body>
 
 
 
</html>

login.html

 
 
<!DOCTYPE html>
 
<html lang="en">
 
 
 
<head>
 
    <meta charset="UTF-8">
 
    <title>登录页面</title>
 
</head>
 
 
 
<body>
 
    <div>
 
        <h2>登录页面</h2>
 
    </div>
 
    <form>
 
        <div>
 
           用户名：<br> <input type="text" placeholder="请输入用户名"><br><br>
 
        </div>
 
        <div>
 
           密码：<br> <input type="text" placeholder="请输入密码"><br><br>
 
        </div>
 
        <br> <input type="submit" value="登录">
 
    </form>
 
</body>
 
 
 
</html>

rigister.html

<!DOCTYPE html>
 
<html lang="en">
 
 
 
<head>
 
    <meta charset="UTF-8">
 
    <title>注册</title>
 
</head>
 
 
 
<body>
 
    <div>
 
        <h2>登录页面</h2>
 
    </div>
 
    <div>用户名：<br>
 
    <input type="text">
 
    </div>
 
    <div>密码：<br>
 
    <input type="text"><br>
 
    </div>
 
    <div>
 
        性别：<br>
 
        <input type="radio" name="sex" checked>男
 
        <input type="radio" name="sex">女
 
    </div>
 
    <div>
 
        兴趣爱好：<br>
 
        <input type="checkbox">旅游
 
        <input type="checkbox">运动
 
        <input type="checkbox">美食
 
    </div>
 
    <div>
 
        <input type="submit" value="注册">
 
    </div>
 
</body>
 
 
 
</html>

left.html

<!DOCTYPE html>
 
<html lang="en">
 
 
 
<head>
 
    <meta charset="UTF-8">
 
    <title>left</title>
 
</head>
 
 
 
<body>
 
    <a href="intro.html" target="main">个人简介</a>
 
  
 
</body>
 
 
 
</html>

intro.html

<!DOCTYPE html>
 
<html lang="en">
 
 
 
<head>
 
    <meta charset="UTF-8">
 
    <title>Title</title>
 
</head>
 
 
 
<body>
 
    oraola
 
</body>
 
 
 
</html>
 
main.html
 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <title>显示</title>
 
</head>
 
<body>
 
    实验一
 
</body>
 
</html>

posted on 2024-10-21 19:46 Cloudservice 阅读(503) 评论(0) 编辑收藏举报