<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简书</title><link rel="stylesheet" href="./font/iconfont.css"><style>*{margin: 0;padding: 0;box-sizing: border-box;}.header{height: 58px;width: 100%;background-color: #fff;border-bottom: solid 1px #f0f0f0;display: flex;justify-content: center;}.content{width: 1400px;height: 58px;/* background-color: #ccc; */display: flex;justify-content: space-between;align-items: center;gap: 20px;}.content img{height: 50px;width: auto;}.nav{width: 1000px;height: 58px;/* background-color: antiquewhite; */display: flex;justify-content: space-between;}.nav .left{display: flex;justify-content: space-between;align-items: center;font-size: 20px;font-weight: 400;width: 700px;}.nav .left div:nth-of-type(1){color: #d57561;}.nav .left [type="text"]{width: 240px;height: 40px;border-radius: 20px;color: black;font-size: 18px;padding-left:15px;outline: none;background-color:#eee;border: none;}.left i{font-size:30px;font-weight: 500;margin-right: 6px;}.left div:nth-of-type(5){position: relative;}.left div:nth-of-type(5) i{position: absolute;right: 10px;top: 8px;}.nav .right{display: flex;justify-content: space-between;align-items: center;color: #888;font-size: 18px;width: 100px;}.right i{font-size: 26px;}.reg{width: 80px;height: 40px;border-radius: 17px;background-color: white;border:solid 1px #d57561;color: #d57561;letter-spacing: 2px;font-size: 18px;}.edit{width: 100px;height:40px ;border-radius: 17px;background-color:#d57561 ;color:white;border: none;font-size: 18px;}</style>
</head>
<body><div class="header"><div class="content"><img src="./相对路径资料/jianshu.png" alt=""><div class="nav"><div class="left"><div><i class="iconfont icon-zhinanzhen"></i>首页</div><div><i class="iconfont icon-ic_system_update_px"></i>下载APP</div><div><i class="iconfont icon-huangguan"></i>会员</div><div><i class="iconfont icon-daimawenjian"></i>IT技术</div><div><input type="text" placeholder="搜索"><i class="iconfont icon-sousuo"></i></div></div><div class="right"><div><i class="iconfont icon-24gl-textTransform"></i></div><div><a href="./登陆界面.html">登陆</a></div></div></div><div class="btns"><button class="reg">注册</button><button class="edit">写文章</button></div></div></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>
</head>
<body><h3><img src="./相对路径资料/jianshu.png" alt=""></h3><hr><form action="./作业1.html" method="get"><table width="500" border="1" cellpadding="10" align="center"><tr align="center"><td colspan="2">请登录</td><tr><td align="right"><label for="account">手机号或者邮箱</label></td><td><input type="text" id="account" placeholder="手机号或者邮箱"/></td></tr><tr><td align="right"><label for="password">密码：</label></td><td><input type="text" id="password" placeholder="请输入密码"></td></tr><tr><td align="right"><label for="apassword">确认密码：</label></td><td><input type="text" id="apassword" placeholder="请确认密码"></td></tr><tr><td colspan="2" align="center"><input type="reset" value="点此清空数据"><input type="submit" value="登陆"></td></tr></table></form>
</body>
</html>实现效果如下：
点击跳转到登陆页面
点击跳转到主页
