当前位置：首页 > news >正文

静态网页开发与部署

news 来源：原创 2025/4/26 5:16:44

文章目录

首页
部署

首页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title>
</head>
<body><h1>欢迎使用</h1><a href="./login.html">启动系统</a><!-- #  空链接 --></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户登录</title><style>.wrapper{width: 300px;height: 300px;background-color:pink;margin:  192px auto;/* align-items: center; */text-align: center;padding: 64px 10px;}</style>
</head>
<body><div class="wrapper"><h1 style="color: red;">用户登录界面</h1><!--   form --><form action="./list.html" method="get"><input type="text" name="username" placeholder="请输入手机号码"><br><br><input type="password" name="password" placeholder="3-6位数的密码"><br><br><br><input type="submit" value="登录"></form></div></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户界面</title><style>.mytable{margin: 0 auto;text-align: center;}table{margin: 0 auto;}</style>
</head><body><div class="mytable"><h1>用户信息</h1><a href="#">新增</a><table width="500px" border="1px"><tr><th width="100px">序号</th><th width="350px">姓名</th><th width="500px">学号</th><th width="600px">专业</th><th width="600px">操作</th></tr><tr><td>1</td><td>烟雨</td><td>1001</td><td>软件技术</td><td><a href="#">修改</a><a href="#">删除</a><a href="#">详情</a></td></tr><tr><td>2</td><td>言语</td><td>1002</td><td>计算机应用技术</td><td><a href="#">修改</a><a href="#">删除</a><a href="#">详情</a></td>            </tr></table></div></body></html>