欢迎来到CloudService文涵的博客

人生三从境界:昨夜西风凋碧树,独上高楼,望尽天涯路。 衣带渐宽终不悔,为伊消得人憔悴。 众里寻他千百度,蓦然回首,那人却在灯火阑珊处。

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

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

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

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

image

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  阅读(465)  评论(0编辑  收藏  举报