实验1 WEB客户端编程

最新推荐文章于 2023-05-18 11:05:59 发布

F2SO4

最新推荐文章于 2023-05-18 11:05:59 发布

阅读量236

点赞数

分类专栏： Javaweb

本文链接：https://blog.csdn.net/m0_51309343/article/details/109518731

版权

Javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实验要求在这里插入图片描述
第一次接触javaweb还是有点蒙的不知道怎么下手，于是参考了一下课本
bottom.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    body
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin:0px auto;
    height:auto;
    width:1400px;
    border:1px solid #006633;
    }

#content
{
    height:auto;
    width:1400px;
    line-height: 1.5em;
    padding:10px;
}

#content p
{
    text-indent: 2em;
}

#content h3
{
    font-size: 16px;
    margin:10px;
}

#footer
{
    height:50px;
    width:cover;
    line-height: 2em;
    text-align: center;
    background-image:url(E:/桌面/Desktop/Javaweb/images/16.jpg);
    padding:10px;
}

*{
    margin:0px;
    padding:0px;
}
<!--
    .l{
        font-family: "宋体";
        font-size: 5px;
        background-image: url(E:/桌面/Desktop/Javaweb/images/.jpg);
        background-attachment: scroll;
        background-position: top;
        background-repeat: no-repeat;
        background-size: 1200px 550px;
    }
-->
</style>
<script type="text/javascript">
//验证电话号码
function checkphone()
{
    var ph=/^1[3456789]\d{9}$/;
    if(!ph.test(document.forms[0].phone.value))
    {
        alert("手机号码不合法！");
        document.forms[0].phone.focus();
        return false;
    }
    else
    {
        alert("手机号码有效!")
        return true;
    }
}
//验证密码
function valid(form)
{
    //验证非空
    if(form.pass.value.length==0)
    {
        alert("请输入密码");
        form.pass.focus();
        return false;
    }
    //验证长度
    if(form.pass.value.length<6)
    {
        alert("密码至少为六位字母和数字");
        form.pass.focus();
        return false;
    }
    var exp=/^[a-z0-9]+$/;
    //验证格式
    if(!exp.test(form.pass.value))
    {
        alert("password contains illegal characters");
        form.pass.focus();
        return false;
    }
    alert("注册成功！")
    return true;
}

</script>
</head>
<body class="l">
<br>
<br>
<p align：center><font-size="36">注册新账号</font></p>
    <form action="" align="center" style="font-size: 20px;">
    手机号码:</font><input type="text"  name="phone" />
    <input type="button" value="验证" onclick="return checkphone()" />
    </form>
    <br>
    <form action="" align="center" style="font-size: 20px;">
    登录密码:<input name="pass" type="password"/>
    <input type="button" value="注册" onclick="return valid(this.form)"/>
    </form>
    <div id="content"></div>
    <h3> </h3>
    <p>   </p>
    <p></p>
    <p></p>
    <div id="footer"><p>关于|广告服务|招聘|客服中心|留言|网站管理|会员登录|购物车 </p>
    <p>Copyright @huangjinrao出版</p></div>
   
</body>
</html>

top.html


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
 body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin:0px auto;
    height:30%;
    width:1400px;
    border:1px solid #006633;
}

#header{
    height:130px;
    width:cover;
    background-image: url(E:/桌面/Desktop/Javaweb/images/16.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    margin:0px 0px 3px 0px;
}

#navigator{
    height:25px;
    width:1400px;
    font-size: 1px;
    list-style-type: none;
}

#navigator li{
    float:left;
}

#navigator li a{
    color:#000000;
    text-decoration: none;
    padding-top: 4px;
    display:block;
    width:218px;
    height:22px;
    text-align: center;
    background-color: #c7d1cb;
    margin-left:2px;
}

#navigtor li a:hover{
    background-color: #006633;
    color:#FFFFFF;
}
    <!--
    .a{
        font-family: "宋体";
        font-size: 5px;
        background-image: url(E:/桌面/Desktop/Javaweb/images/.jpg);
        background-attachment: scroll;
        background-position:center;
        background-repeat: no-repeat;
        background-size: 1400px 80px;
    }
    -->
    </style>
<body class="a">
    <div id="header"></div>
    <div id="navigator">
    <ul id="navigator">
    <li><a href="#">主页</a></li>
    <li><a href="#">个人中心</a></li>
    <li><a href="#">动态</a></li>
    <li><a href="#">商城</a></li>
    <li><a href="#">消息</a></li>
    <li><a href="#">设置</a></li>
    </ul>
    </div>
</body>
</html>

test1.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<frameset rows="30%,70%" frameborder="yes" border="1" framespacing="1" >
<frame src="top.html" name="topframe" scrolling="no"  id="topframe" marginwidth="50"/>
<frame src="bottom.html" name="mainframe" id="mainframe" marginwidth="50" scrolling="yes" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

代码中有些东西是多余的，是设计的时候放进去没有影响就懒得删了
最终的效果是这样的
在这里插入图片描述
不知道有什么地方错了，隔了一段时间打开就老报错。。。vs真的有点难用。。